關於ajax原理闡述

ajax是什麼呢？說白了就是一個請求，一個讀取服務器資源以及提交資源到服務器的中間處理機制，那它具體是怎樣工做的，又有怎樣的原理呢？

var ajax=function(url,fnSucceed,fnFail){
    //第一步：初始化http協議，即實例化一個XMLHttpRequest方法。
    //這裏還須要作判斷，由於微軟的老版本IE（＜IE7）不同凡響的是，它的ajax是經過一個ActiveXObject控件實現的，
    //並非其餘瀏覽器的XMLHttpRequest，這是一種兼容寫法。如今其實能夠就用XMLHttpRequest來，畢竟連阿里都宣佈
    //不支持IE8如下的了。
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }
    else{
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //第二步：設置發起請求的內容，方式，要訪問哪裏？哪一個url？是要讀仍是寫？（即get 仍是 post）是同步仍是異步？
    oAjax.open('GET',url,true);
    //true是異步，要同步就是false，
    //get通常用於讀取服務器數據或資源文件。
    //post通常則是用於用戶上傳數據時回傳至服務器，但這兩個實際上都是可讀可寫，只不過是數據傳送的方式不一樣，
    // 之因此人們通常會這樣用主要體如今下面這些方面：
    // 一、get是經過地址欄傳輸（能夠仔細看咱們瀏覽器的上方地址欄，裏面的信息會包括一些比較機密的信息，好比：
    // 當用戶註冊後的信息，若是此時用get進行提交會發生什麼呢？你看最上方的地址欄，裏面顯示的偏偏好是你的帳戶跟
    // 密碼，這就很恐怖了，也很是不安全），而post是經過報文傳輸，數據不會在地址欄顯示，會幫你把提交的數據隱藏，
    // 相對來講比較安全，get中的url有長度限制，最大長度是2k，也就是2048個字符，而post則無限制，
    // 而說到這你可能就會說了，既然post方式這麼多優勢，那爲啥不都用post就能夠了？
    // 你又錯了，是的，post自己也是有限制的，好比：
    // 你在瀏覽網頁的時候點快了，要後退刷新什麼的，用get呢由於他本質上是獲取服務上的資源，而你後退實際上並無
    //要獲取服務器上資源的意思（瀏覽器讀得懂），而用post呢？post本質是什麼呢？是向服務器提交資源或數據，因此用
    //post的時候，你後退了，瀏覽器還覺得你又要提交什麼東西，那它就會把數據再從新提交給服務器，形成重複提交數據
    //說到本質上的東西，你如今知道爲何get有2k的限制了吧？get就是獲取，因爲對於一個服務器上的資源的獲取實際上
    // 是獲取資源的url或者再本質點就是一個標識符，資源標識（url不表明就是資源的實際物理地址），這個通常不會太長，
    //也不必太長，你見過地址欄的東西有一大串一大串的嗎？沒有吧？而post呢？仍是迴歸本質，英文的意思是什麼呢？
    //帖子，投遞，說白了就是上傳或提交，我想當初ajax底層XMLHttpRequest他們的做者也確定但願咱們用post就是用來投遞，
    //用來提交資源的，而get(獲得)就是用來獲取資源的，它們既然這樣想，在設計程序的時候確定也是這樣設計的了，關於
    // 這兩個沒必要要研究太深刻，只須要牢記語義化，get 讀取資源，post 提交資源，這樣你就能夠搞定9成9的ajax請求了，
    //而這，夠了！咱們不是科學家，鑽牛角尖的東西，鑽到必定程度就夠了，固然若是你有時間推薦深刻去研究，好事。

    //第三步：發送請求。
    oAjax.send();

    //第四步：處理請求
    /**這第4步有個大坑，什麼坑呢？既然是響應終端客戶操做的交互請求，那客戶何時操做呢？咱們不知道，服務器也
     * 不會知道。那怎麼辦呢？若是你學過java，有四個字你必定不陌生，說到這你可能想到了，沒錯，就是事件監聽
     * 但咱們這個ajax呢？它不是這樣的，它採用的是js裏一直被其餘程序語言開發者詬病的回調機制，具體是怎樣的呢？
     *
     * 咱們剛剛開頭實例化了一個XMLHttpRequest，它提供了三個屬性：
     * 一、onreadystatechange：拆開看 on readystate change，當readystate這個屬性變化的時候，調用這個函數
     *                        是的，你沒翻譯錯，它就是一個函數，一個回調函數，一個存儲了咱們預先設置好當用戶
     *                        發起請求後咱們要作（或者說服務器要作）的響應操做，一句話，存函數的
     *
     * 二、readyState：剛剛你是否是在納悶，我爲啥要那樣翻譯呢？而不是on ready state change呢？看到這個你恍然大悟
     *                了吧？嘿嘿，其實正確的翻譯還真是第2次翻譯的這個，就是當預備的狀態改變時，只不過預備的狀態
     *                我就當成這個了，這樣你印象會比較深，沒錯，語義化，readyState這個就是XMLHttpRequest的狀態
     *    這個readyState的狀態是預先約定俗成好的，相似於協議這樣，能夠當成一個switch開關，它有幾個case，沒錯
     *    就是這麼任性，這麼認爲沒問題的，具體是哪幾個case呢？
     *    0：請求未初始化
     *    1：服務器鏈接已創建
     *    2：請求已接收
     *    3：請求處理中
     *    4：請求已完成，且響應已就緒。（這個用得比較多，畢竟服務器內部的咱們並不關心，咱們只關心結果）
     *
     * 三、status：這個也是一個狀態，它的可填屬性呢，有一大堆：0**（未初始化），1**（請求收到，繼續處理），2**，
     *            3**，4**，5**，太多了這裏就不列舉了，有個statusText狀態表可自行去查，不過想說的是通常狀況下，
     *            服務器對數據的處理，響應咱們不必去管它究竟是執行到哪一步了？（數據接收不到調試的話除外）
     *            咱們只須要判斷它是否接收完請求，並是否能成功作出響應就能夠了，因此呢，咱們記住幾個經常使用的就可
     *            以了，大腦容量有限，咱們應該記一些最精華的部分，而不是越多越好，固然必須先明白原理才能夠。
     * 這裏呢，我列幾個吧：
     *            200："OK"，最經常使用，成功的意思 （開發者可能比較多用這個）
     *            401：請求受權失敗
     *            404：未找到頁面
     *            500：服務器產生內部錯誤
     *            12029：網絡不通
     *
     * 囉嗦了這麼多，沒實操怎麼行呢？
     * */
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status==200){
                fnSucceed(oAjax.responseText);//響應成功回調的函數，這裏只是簡簡單單的返回了一串數據，
                                               //能夠在裏面或外部的函數裏繼續寫其餘響應操做
            }
            else{
                if(fnFail){
                    fnFail(oAjax.status);
                }
            }
        }
    };//咱們這裏存了一個函數了
};
下面貼一個本身寫的代碼（其實上面都有了，只不過比較雜）

/**
 * Created by Administrator on 2018/5/1 0001.
 */
var dc_ajax_g=function(url,fnSucceed,fnFail) {
    //if (window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    //}
    //else {
    //    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    //};
    oAjax.open('GET',url,true);
    oAjax.send();
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status==200){
                fnSucceed(oAjax.responseText);//響應成功回調的函數，這裏只是簡簡單單的返回了一串數據，
                //能夠在裏面或外部的函數裏繼續寫其餘響應操做
            }
            else{
                if(fnFail){
                    fnFail(oAjax.status);
                }
            }
        }
    };
};