用JS實現Ajax請求

AJAX核心（XMLHttpRequest）

      其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpServlet對象完成的。也就是說，我們只需要學習一個Javascript的新對象即可。

1	var  xmlHttp =  new  XMLHttpRequest()；（大多數瀏覽器都支持DOM2規范）

注意，各個瀏覽器對XMLHttpRequest的支持也是不同的！為了處理瀏覽器兼容問題，給出下面方法來創建XMLHttpRequest對象：

function createXMLHttpRequest() {
        var xmlHttp;
        // 適用於大多數瀏覽器，以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 適用於IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 適用於IE5.5，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }            
        return xmlHttp;
    }

使用流程

步驟1:  打開與服務器的連接（open方法）

當得到XMLHttpRequest對象后，就可以調用該對象的open()方法打開與服務器的連接了。open()方法的參數如下：

open(method, url, async)：

• method：請求方式，通常為GET或POST；
• url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL后追加參數；
• async：這個參數可以不給，默認值為true，表示異步請求；

1 2	var  xmlHttp = createXMLHttpRequest(); xmlHttp.open( "GET" ,  "/ajax_get/?a=1" ,  true );

步驟2:  發送請求

當使用open打開連接后，就可以調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數為POST請求參數，即對應HTTP協議的請求體內容，若是GET請求，需要在URL后連接參數。

注意：若沒有參數，需要給出null為參數！若不給出null為參數，可能會導致FireFox瀏覽器不能正常發送請求！

1	xmlHttp.send( null );

步驟3:  接收服務器響應

當請求發送出去后，服務器端就開始執行了，但服務器端的響應還沒有接收到。接下來我們來接收服務器的響應。

XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：

• 0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法；
• 1：請求已開始，open()方法已調用，但還沒調用send()方法；
• 2：請求發送完成狀態，send()方法已調用；
• 3：開始讀取服務器響應；
• 4：讀取服務器響應結束。 

onreadystatechange事件會在狀態為1、2、3、4時引發。

　　下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！

xmlHttp.onreadystatechange = function() {
            alert('hello');
        };

但通常我們只關心最后一種狀態，即讀取服務器響應結束時，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

其實我們還要關心服務器響應的狀態碼是否為200，其服務器響應為404，或500，那么就表示請求失敗了。我們可以通過XMLHttpRequest對象的status屬性得到服務器的狀態碼。

最后，我們還需要獲取到服務器響應的內容，可以通過XMLHttpRequest對象的responseText得到服務器響應內容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

 if 發送POST請求

<1>需要設置請求頭：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；注意 :form表單會默認這個鍵值對不設定，Web服務器會忽略請求體的內容。

<2>在發送時可以指定請求體了：xmlHttp.send(“username=yuan&password=123”)

JS實現ajax小結

/*
    創建XMLHttpRequest對象；
    調用open()方法打開與服務器的連接；
    調用send()方法發送請求；
    為XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在

    XMLHttpRequest的1、2、3、4，四種狀態時被調用；

    XMLHttpRequest對象的5種狀態，通常我們只關心4狀態。

    XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState為4時才能獲取到。

    XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在
    readyState為4時才能獲取到！

*/

var ele_btn=document.getElementsByTagName("button")[0]
    ele_btn.onclick=function () {

        // 發送ajax

         // （1） 獲取 XMLHttpRequest對象
         xmlHttp = new XMLHttpRequest();

         //  (2) 連接服務器
        //  get
        //xmlHttp.open("get","/sendAjax/?a=1&b=2");

        //  post
        xmlHttp.open("post","/sendAjax/");

        // 設置請求頭的Content-Type
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        // （3） 發送數據
        var ele_csrf=document.getElementsByName("csrfmiddlewaretoken")[0];
        ele_num1=document.getElementsByClassName("num1")[0];
        ele_num2=document.getElementsByClassName("num2")[0];
        ele_ret=document.getElementsByClassName("ret")[0];

        s1="num1="+ele_num1.value;
        s2="num2="+ele_num2.value;
        s3="&csrfmiddlewaretoken="+ele_csrf.value;
        xmlHttp.send(s1+"&"+s2+s3) ;   // 請求體數據


        // （4） 回調函數  success
        xmlHttp.onreadystatechange = function() {
            if(this.readyState==4 && this.status==200){
                ele_ret.value=this.responseText

            }
        };


    }

 var ele_btn=document.getElementsByTagName("button")[0]
    ele_btn.onclick=function () {

        // 發送ajax

         // （1） 獲取 XMLHttpRequest對象
         xmlHttp = new XMLHttpRequest();

         //  (2) 連接服務器
        //  get
        //xmlHttp.open("get","/sendAjax/?a=1&b=2");

        //  post
        xmlHttp.open("post","/sendAjax/");

        // 設置請求頭的Content-Type
        var ele_csrf=document.getElementsByName("csrfmiddlewaretoken")[0];
        xmlHttp.setRequestHeader("Content-Type","application/json");
        xmlHttp.setRequestHeader("X-CSRFToken",ele_csrf.value);

        // （3） 發送數據

        xmlHttp.send('{"name":"moses","age":22}') ;   // 請求體數據


        // （4） 回調函數  success
        xmlHttp.onreadystatechange = function() {
            if(this.readyState==4 && this.status==200){
                console.log(this.responseText)

            }
        };


    }