原始XMLHttpRequest方法詳情回顧_jquery

用一個典型的登入驗證的範例來示範吧

一般來說，使用XMLHttpRequest物件來進行登陸驗證要經過以下這幾個步驟

1.使用DOM方式獲得輸入框中的值         

複製代碼 代碼如下:

var userName = document.getElementById("userName").value;

2.建立XMLHttpRequest，這一步驟比較複雜，主要原因是考慮瀏覽器的兼容性問題。       

複製程式碼 代碼如下:

代碼如下:
> >        //針對FireFox，Mozillar，Opera，Safari，IE7，IE8
        xmlhttp = new XMLHttpRequest(       if (xmlhttp. overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
         //針對IE6，IE5.5，IE5
        / /兩個可以用來建立XMLHTTPRequest物件的控制項名稱，保存在一個js的陣列中
        //排在前面的版本較新
       ];
        for (var i = 0; i             就終止迴圈
                //若建立失敗，回拋出異常，然後可以繼續循環，繼續嘗試建立
                xmlhttp = new ActiveXObject(activexName[i]);            }
        }
    }



3.註冊XMLHttpRequest物件的回呼函數，當回呼函數時，括號上需要函數名，不要加號。
    

複製程式碼
程式碼如下:

程式碼如下:

程式碼如下:

//註冊🎜函數名，不要加括號
    //我們需要將函數名稱註冊，如果加上括號，就會把函數的回傳值註冊上，這是錯誤的
    xmlhttp.onreadystatechange = callback;

4.設定（ GET ）連線資訊
     

複製程式碼

複製程式碼



複製程式碼

複製程式碼

複製碼>//第一個參數表示http的請求方式，支援所有http的請求方式，主要使用get和post//第二個參數表示請求的url位址，get方式請求的參數也在url中//第三個參數表示採用非同步還是同步方式交互，true表示異步xmlhttp.open("GET","AJAXServer?name=" userName,true);

5.發送請求 

複製程式碼複製程式碼

代碼如下xmlhttp.send(null);6.（POST）方式，需要自己設定http的請求頭，並且由於要進行編碼，所以不能直接在XHR. open的第二個參數中將資料發送過去，而應該用send()方法將資料傳送過去複製程式碼 程式碼如下:

//POST方式請求的程式碼
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自行設定http的請求頭
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式傳送資料
xmlhttp.send("name=" userName);

回呼函數：

複製程式碼 程式碼如下:

程式碼如下:


function callback() {
    //alert(xmlhttp.readyState);
    //5。接收回應資料
    //判斷物件的狀態是互動完成
    if (xmlhttp.readyState == 4) {
        //http ) {
            //取得服務漆器端回傳的資料
            //與伺服器區輸出🎜>            //將資料顯示在頁面上
            //以dom的方式找出div標籤對應的元素節點
            var divNode   
            divNode.innerHTML = responseText ;
        } else {
            alert("錯了！！！");
 🎜>