AJAX原生寫法

一、手寫AJAX的步驟

　　
　　手寫AJAX並沒有一個固定的標準的答案，但是AJAX的關鍵步驟就那麼幾步，我會先用文字介紹關鍵步驟，然後給出兩個版本的手寫AJAX的代碼及註釋。幫助大家很好地理解和記憶。

　　1.創建XMLHttpRequest對象
　　2.指定響應函數
　　3.打開連接（指定請求）
　　4.發送請求
　　5.創建響應函數

　　注：第三步是使用XMLHttpRequest對象的open（）方法，字面意思open是打開的意思，即打開連接。但是準確的說應該是指定Http請求。因爲瀏覽器在使用AJAX技術與服務通信時，發送的是Http請求，那麼就要指定Http的請求方法，url等信息。
　　

二、參考代碼（W3C）

//聲明一個變量，用來實例化XMLHttpRequest對象
var xmlhttp=null;
if (window.XMLHttpRequest){
    // 新版本的瀏覽器可以直接創建XMLHttpRequest對象
    xmlhttp=new XMLHttpRequest();
}

else if (window.ActiveXObject) {
    // IE5或IE6沒有XMLHttpRequest對象，而是用的ActiveXObject對象
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

if (xmlhttp!=null){
    //指定響應函數爲state_Change
    xmlhttp.onreadystatechange=state_Change;
    //指定請求，這裏要訪問在/example/xdom路徑下的note.xml文件，true代表的使用的是異步請求
    xmlhttp.open("GET","/example/xdom/note.xml",true);
    xmlhttp.send(null);//發送請求
} else {
    alert("Your browser does not support XMLHTTP.");
}

//創建具體的響應函數state_Change
function state_Change() {
    if (xmlhttp.readyState==4) {
        if (xmlhttp.status==200) {
            // 這裏應該是函數具體的邏輯
        } else {
            alert("Problem retrieving XML data");
        }
    }
}

　　1.創建XMLHttpRequest對象 （1-10行代碼）
　　2.指定響應函數（第15行代碼）
　　3.打開連接（指定請求）（第16行代碼）
　　4.發送請求（第17行代碼）
　　5.創建響應函數（25-38行代碼）

　　（排版問題代碼行數不對應）

　　這個是W3C上講解AJAX的代碼，比較權威，我做了一些註釋，方便大家理解。面試的時候寫這段代碼應該是沒有問題的。
W3C原文鏈接
　　

三、參考代碼（MDN）

<!--html部分，創建一個按鈕控件-->
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
    Make a request
</span>

<script type="text/javascript">
(function() {
    var httpRequest;//聲明一個變量，用來實例化XMLHttpRequest對象

    document.getElementById("ajaxButton").onclick = function() { 
        makeRequest('test.html'); //這裏將AJAX操作封裝在makeRequest函數中，函數的參數爲要請求的url，即根目錄下的test.html文件。
    }; 

    function makeRequest(url) {
        //創建XMLHttpRequest對象
        httpRequest = new XMLHttpRequest();
        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
        }

        //指定響應函數爲alertContents
        httpRequest.onreadystatechange = alertContents;

        //指定請求，方法爲GET，url爲上面的test.html
        httpRequest.open('GET', url); 

        //發送請求
        httpRequest.send();

    }

    //創建響應函數alertContents
    function alertContents() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
})();//這是一個立即執行函數
</script>

　　
　　1.創建XMLHttpRequest對象 （第13行代碼）
　　2.指定響應函數（第19行代碼）
　　3.打開連接（指定請求）（第21行代碼）
　　4.發送請求（第23行代碼）
　　5.創建響應函數（29-37行代碼）

　　這個是MDN上講解AJAX的代碼，我做了一些註釋，方便大家理解。
MDN原文鏈接
　　

四、總結

　　
　　這篇文章講解了如何較爲規範的手寫AJAX，下篇文章我會具體介紹XMLHttpRequest對象的有關知識以及AJAX相關的Http請求的知識。

　　注：轉載自知乎的一篇文章，原博主留的鏈接已經失效，這裏留下知乎上的鏈接： 傳送門