前端Jquery中的Ajax

XMLHttpRequest

Ajax是Asyn chronous Javascript And XML的簡寫，其中文意思是：異步 JavaScript 和 XML。它是前端和後端進行數據交換的另一種通道，可以異步更新網頁內容，在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

我們平時所說的Ajax，以及各個庫或者框架支持的封裝的Ajax方法，大多是利用的XMLHTTPRequest對象進行封裝的，使用它可以進行HTTP通信。該對象有兩個等級，目前使用的是XMLHttpRequest Level 2，是對該對象有兩個等級，目前使用的是XMLHttpRequest Level 1改進後的產品。

let xhr = new XMLHttpRequest();
console.dir(xhr);

通過打印該對象的實例方法，我們可以看到該對象有很多成員，具體各個成員是幹啥的，可以參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest，內容有點多，不過我們平時用的時候，並不需要全部關注，我們比較關注的有這幾個：

// 初始化一個請求
xhr.open();
// 發送請求
xhr.send();
// 設置header值
xhr.setRequestHeader()
// 請求的五種狀態readyState
// 0: 請求未初始化
// 1: 服務器連接已建立
// 2: 請求已接收
// 3: 請求處理中
// 4: 請求已完成，且響應已就緒
xhr.readyState
// 響應的內容，其值的類型根據xhr.responseType的值決定
// 其它的還有：
// responseText	獲得字符串形式的響應數據。
// responseXML	獲得 XML 形式的響應數據
xhr.response
// 設置期望服務器響應的數據格式
xhr.responseType
// 響應狀態碼，如 200 (表示一個成功的請求)
xhr.status
// 響應狀態信息，包含一個狀態碼和消息文本
xhr.statusText
// 上傳過程，可以在其上添加一個事件監聽來跟蹤上傳過程
xhr.upload
// 當一個資源的加載已中止時觸發
xhr.onabort
// 當一個資源加載失敗時會觸發
xhr.onerror
// 當一個HTTP請求正確加載出內容後返回時觸發
xhr.onload
// 請求超時的時候調用
xhr.ontimeout
// 當 readyState 屬性值改變時會調用它
xhr.onreadystatechange
// 設置超時時間
xhr.timeout

其實上面列出來的幾個也無需全部記住，下面寫個例子：

let xxx = document.getElementById('xxx');
xxx.onclick = function(){
  // 創建一個xhr對象
  let xhr = new XMLHttpRequest();
  // 監聽readyState屬性值的變化
  xhr.onreadystatechange = function(){
    // 請求響應完畢
    if(xhr.readyState === 4){
      if(xhr.status == 200){
        // console.log(xhr.responseText);
        console.log(xhr.response);
      }else{
        console.log(xhr.status);
      }
    }
   }
  }
  // 創建請求
  xhr.open('GET', '/yyy');
  // xhr.responseType = 'json';
  // 發送請求
  xhr.send()

Jquery中的Ajax

請參考文檔：

http://jquery.cuishifeng.cn/jQuery.Ajax.html

http://jquery.cuishifeng.cn/jQuery.get.html

http://jquery.cuishifeng.cn/jQuery.post.html