AJAX 相關筆記

AJAX (Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）)。

平時工做中使用ajax的頻率挺高的，這裏整理了一些ajax相關的小知識，後續還會繼續補充學習到的內容。爲了本身可以更好的掌握和使用。

簡言

1 ajax最大的優勢就是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。使網頁實現異步更新。
2 使用腳本操縱HTTP和WEB服務器進行數據交換，不會致使頁面重載。

原生ajax

雖然原生的ajax如今用的可能很少，但仍是有必要懂的。

• 1 XMLHttpRequest

瀏覽器在XMLHttpRequest類上定義了它們的HTTP API。這個類的每一個實例都表示一個獨立的請求／響應對，而且這個對象的屬性和方法容許制定請求細節和提取響應數據。

• 2 一個HTTP請求由4部分組成
  • HTTP 請求方法或者動做
  • 正在請求的URL
  • 一個可選的請求頭集合，其中可能包括身份驗證信息。
  • 一個可選的請求主體。
• 3 服務器返回的HTTP響應包含3部分
  • 一個數字和文本組成的狀態碼，用來顯示請求的成功和失敗。
  • 一個響應頭集合
  • 響應主體
• 4 方法
  • open()方法 - 與服務器端創建鏈接
  • send()方法 - 向服務器端發送請求
  • setRequestHeader() - 設置請求頭信息
• 5 事件
  • onreadystatechange事件
    做用 - 監聽服務器端的通訊狀態
    觸發 - 服務器端的通訊狀態變化時
• 6 屬性
  • readyState屬性 - 獲取服務器端的通訊狀態
  • status屬性 - 獲取服務器端的狀態碼
  • responseText屬性 - 返回服務器端響應的文本格式數據
  • responseXML屬性 - 返回服務器端響應的XML格式數據

請求步驟

1 實例化XMLHttpRequest對象

var request = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

new ActiveXObject("Microsoft.XMLHTTP");

處理ie低版本兼容性問題

function getXMLHttpRequest(){
       let xhr = null;//聲明變量
       if(window.XMLHttpRequest){// 其餘瀏覽器
        xhr = new XMLHttpRequest();
       }else{// IE瀏覽器
        xhr = new ActiveXObject("Microsoft.XMLHttp");
       }
       return xhr;
    }

2 指定請求

建立XMLHttpRequest對象以後，發起Http請求的下一步是調用XMLHttpRequest對象的open()方法去指定這個請求的兩個必須部分：方法和url

request.open("GET", //http  get請求
    "data.csv"); // URL的內容

open()的第一個參數能夠是：get post head put等

• get 和 post
  1 get用於常規請求，適用於當URL徹底指定請求資源，當請求對服務器沒有任何反作用以及當服務器的響應是可緩存的。
  2 post 經常使用於html表單，它在請求主體中包含額外數據且這些數據常存儲到服務器上的數據庫中。相同URL的重複post請求從服務器獲得的響應可能不一樣，同時不該該緩存使用這個方法的請求。
  簡言之，post方法有本身的特色：
  沒法使用緩存文件（更新服務器上的文件或數據庫）
  向服務器發送大量數據（POST 沒有數據量限制）
  發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

• 若是有請求頭的話，請求進程的下個步驟是設置它。例如post請求須要「Content-Type」頭指定請求主題的MIME類型。

request.setRequestHeader("Content-Type","text/plain");

• 發起HTTP 請求的最後一步是指定可選的請求主體並向服務器發送它。

request.send(null);

若是是get請求則沒有請求主體，因此能夠傳參數null，可是post一般須要請求主體，而且它應該匹配使用setRequestHeader指定的"Content-Type"頭。
小栗子

function postMessage(msg) {
        var request = new XMLHttpRequest();
        request.open("POST","/test.php");
        request.setRequestHeader("Content-Type","text/plain","charset=utf-8");
        request.send(msg);
    }

3 取得響應

一個完整的HTTP響應由狀態碼、響應頭集合和響應主體組成。經過XMLHttpRequest對象的屬性和方法能夠得到。

• readyState屬性 指定了HTTP請求的狀態。
  0 - 請求未初始化
  1 - （與服務器端）正在鏈接
  2 - 請求正在接收
  3 - 請求正在響應
  4 - 請求響應完畢
• status和statusText屬性以數字和文本的形式返回HTTP狀態碼。例如：200和「ok」表示成功請求，404和"not found" 表示url不能匹配服務器上的任何資源。
• 服務器經常使用的狀態碼及其對應的含義以下：
  200：服務器響應正常。
  304：該資源在上次請求以後沒有任何修改（這一般用於瀏覽器的緩存機制，使用GET請求時尤爲須要注意）。
  400：沒法找到請求的資源。
  401：訪問資源的權限不夠。
  403：沒有權限訪問資源。
  404：須要訪問的資源不存在。
  405：須要訪問的資源被禁止。
  407：訪問的資源須要代理身份驗證。
  414：請求的URL太長。
  500：服務器內部錯誤。

• 如需得到來自服務器的響應，可以使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

  小栗子

  function getText(url,callback) {
        let request = new XMLHttpRequest();
        request.open("get",url);
        request.onreadystatechange = function() {
            //若是請求完成而且請求成功
            if (request.readyState === 4 && request.status === 200) {
                let type = request.getResponseHeader("Content-Type");
                if (type.match(/^text/)) {
                    callback(request.responseText);
                }
            }
        }
        request.send(null); 
    }

jQuery - AJAX

jQuery - AJAX通過對原生js的封裝，使用和理解起來就簡單的多了，關於jQuery - AJAX的參考資料不少，這裏寫個小栗子溫習一下。

$.ajax({url:"http://testurl.com",success:function(res){
        let data = res.data;
        return data;
    }});

//load() 方法從服務器加載數據，並把返回的數據放入被選元素中。
    $(selector).load(URL,data,callback);
    //必需的 URL 參數規定您但願加載的 URL。
    //可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
    //可選的 callback 參數是 load() 方法完成後所執行的函數名稱。

Axios

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

• 從瀏覽器中建立 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據

• 客戶端支持防止 CSRF/XSRF (跨站請求僞造)

  安裝方法(3種)：

$ npm install axios

$ bower install axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

參考地址：
https://www.npmjs.com/package/axios
http://www.tuicool.com/articles/eMb2yuY

具體axios相關會在之後繼續總結和整理，這裏舉個工做中用過的小栗子

import axios from 'axios';
    import qs from 'qs'; //使用qs庫對數據進行編碼

    const ajax = (url, type = 'get', data) => {
    return axios({
        method: type,
        url: url,
        data: data ? qs.stringify(data) : null,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded' // 表單數據格式正式的MIME類型
        }
      });
    }

    export default ajax;