【Javascript基礎】Ajax初識

在之前的開發中,一直使用Jquery的$.ajax完成異步請求的任務,一直對底層沒有深入的瞭解,今天看到mdn上面一篇文章介紹瀏覽器原生AJAX請求的知識,這裡稍微整理一下自己學的內容.

mdn原文地址是:https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

1.什麼是AJAX?

AJAX的全稱是Asynchronous Javascript and XML,中文對應名稱異步JavaScript和XML,它主要通過是XMLHttpRequest對象來和服務器端完成數據的通信.

它可以接收多種信息格式,其中包括json, xml, html甚至是文本文件,AJAX最令人稱贊的特性就是它的異步性,它可以在不刷新頁面的情況下,更新頁面部分的內容(一般都是用戶觸發的事件).

總而言之,AJAX的特點可以概括為以下兩類:
1. 在不重新刷新頁面的條件下,向服務器發送請求;
2. 可以從服務器獲取數據;

2. 一個簡單的例子

2.1 創建AJAX請求的對象

AJAX請求對象主要是通過XMLHttpRequest對象來完成;

  var httpRequest;
  if(window.XMLHttpRequest) {
     httpRequest = new XMLHttpRequest();
  } else if (window.ActiveXObject) {//為瞭兼容老的IE瀏覽器
       httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
  }

2.2 設置如何處理AJAX的Response數據

說明: 設置XMLHttpRequest對象的onreadystatechange來設置一旦接受AJAX的Response後的處理操作.

httpRequest.onreadystatechange = function() {
    //這裡需要判斷當前的AJAX請求的Response可以處理瞭,通過readyState判斷
    if(httpRequest.readyState == XMLHttpRequest.DONE) {
            if(httpRequest.status === 200) {
                alert(httpRequest.responseText);
                 //perfect.
            } else {
                    //狀態碼不是200,表明發生瞭錯誤
                    //TODO:
            }
    }else {
         //表示當前的請求的response還沒有接收完成
    }
};

2.3 是時候發送請求瞭…

上面兩個步驟,定義好請求對象,已經請求接收到response後的處理方式,接下來就是發送請求瞭,

httpRequest.open('GET', 'https://localhost:3000/rest', true);
//httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 httpRequest.send(null);

解釋:
1. open方法: 它接收三個參數,第一個是http 請求的方法,可以是”GET”,”POST”, “DELETE”等其他HTTP協議中定義的方法,這裡要註意,這個參數必須大寫,不能寫成”get”; 第二個參數用來設置請求的資源路徑,第三個參數用來表示當前請求是“異步”還是“同步”,默認是異步(true);
2. setRequestHeader方法: 這個方法用來設置請求的報頭,在發送POST的表單請求時,需要設置Content-Type;
3. send方法: 這個方法發送請求,它接收一個參數,這個參數就是請求body裡面的內容.

發佈留言