AJAX總結（二），手寫AJAX

前言

博主博客：Stillwater的博客
知乎專欄：前端汪汪
本文爲做者原創轉載請註明出處：
http://hiztx.top/2017/01/12/a...

---

在前端面試的時候常常會有以下情景。AJAX會嗎？能不能手寫個AJAX？第一個問題能夠參見個人另外一篇博客，AJAX總結（一），AJAX概述。這篇博文咱們來回答第二個問題，手寫AJAX。

---

1、手寫AJAX的步驟

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

1. 建立XMLHttpRequest對象

2. 指定響應函數

3. 打開鏈接（指定請求）

4. 發送請求

5. 建立響應函數

---

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

2、參考代碼（W3C）

var xmlhttp=null;//聲明一個變量，用來實例化XMLHttpRequest對象
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();// 新版本的瀏覽器能夠直接建立XMLHttpRequest對象
  }
  
else if (window.ActiveXObject)
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE5或IE6沒有XMLHttpRequest對象，而是用的ActiveXObject對象
  }
  
  
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;//指定響應函數爲state_Change
  xmlhttp.open("GET","/example/xdom/note.xml",true);//指定請求，這裏要訪問在/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. 發送請求（第18行代碼）

5. 建立響應函數（25-38行代碼）

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

---

3、參考代碼（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) {
    httpRequest = new XMLHttpRequest();//建立XMLHttpRequest對象
    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    
    httpRequest.onreadystatechange = alertContents;//指定響應函數爲alertContents
    
    httpRequest.open('GET', url); //指定請求，方法爲GET，url爲上面的test.html
   
    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原文連接

---

4、總結

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