Javascript之Ajax基礎知識

Ajax：async javascript and xml  異步的JS和XML

    -> 客戶端JS中的方法，用來向服務器端發送請求(還能夠傳遞給服務器端數據)，而後把服務器端返回的內容獲取到(ajax通常是運行在客戶端的瀏覽器中的)

Ajax四步：

    建立一個AJAX對象(下面的這種寫法在IE6及更低版本的瀏覽器中不支持)

    -> var xhr = new XMLHttpRequest;

    發送前的基本信息的配置：get：配置請求的方式，url：打開一個url地址(配置向服務器端地址發送請求)，false：同步請求，true：異步請求，默認是true；[username]向服務器提供請求的用戶名；[userpass]：向服務器提供請求的用戶密碼；後面兩個值通常都不寫，只有服務器作了安全的限制，只容許特定的用戶訪問的話，咱們才須要傳遞

    -> xhr.open("get",url,false,[username],[userpass])

    給onreadystatechange事件綁定一個方法，監聽狀態的改變(只要狀態改變，就會觸發此方法的執行)

    -> xhr.onreadystatechange = function(){

        0 UNSENT：當前的請求尚未發送

        1 OPENED URL地址已經打開(發送前的參數配置已經完成)

        2 HEADERS_RECEIVED 響應頭信息已經接受

        3 LOADING 主要返回的內容正在服務器端進行準備處理

        4 DONE 響應主題的內容已經成功返回到客戶端

        xhr.status：HTTP網絡狀態碼，描述了服務器響應內容的狀態

            200 OR ^2\d{2} (200或者以2開頭的)：都表明響應主體的內容成功

            301 -> 永久重定向/永久轉移

            302 -> 臨時重定向/臨時轉移  服務器的負載均衡

            304 -> 本次獲取的內容是讀取緩存中的數據

            400 -> 客戶端傳遞給服務器端的參數發生錯誤  

            401 -> 無權限訪問

            404 -> 客戶端訪問的地址不存在

            500 -> 未知的服務器錯誤

            503 -> 服務器已經超負荷

        if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){

           var val =  xhr.responseText;

        }

    }

    發送請求：參數是請求主體中傳遞給服務器的內容

    -> xhr.send(null);

 

xml：可擴展的標記語言(在XNL文件中使用的標籤都是本身擴展的)

    -> 利用本身擴展的有規則的標記來存儲相關的數據

 

//-> HTTP METHOD: 客戶端服務器端發送請求的方式
    // -> 如下的請求方式無論哪種均可以向服務器傳遞數據,也能夠從服務器獲取到數據,並且從本質意義上講如下的方式是沒有任何的區別的,例如:用POST作的事情,用GET也能作,
    // 而咱們給你們接下來說的區別都是目前開發這門約定俗稱的規範:
    //GET:通常應用於從服務器獲取數據(給服務器的數據少,從服務器拿的數據多,項目中最經常使用的請求方式就是GET)
    //使用GET請求給服務器傳遞內容通常都使用URL問號傳參的方式
//    xhr.open("get","/getList?num=12");
    //POST:通常應用於向服務器推送數據(給服務器的多,從化服務器拿的少)
    //使用post請求給服務器傳遞內容咱們通常都是用請求主體的方式傳遞給服務器
//    xhr.open("post","/getList");
//    xhr.send('{"name":"zhufeng","age":"7"}');
    
    //PUT:通常應用於給給服務器上增長資源文件(上傳圖片功能)
    //DELETE:通常應用於從服務器上刪除資源文件
    //HEAD:通常應用於只獲取服務器的響應頭信息

 

GET PK POST:

    大小問題：get請求傳遞給服務器的內容存在大小的限制，post理論上是沒有限制，緣由是由於get是經過url傳參給服務器，而每一個瀏覽器對於URL的長度存在限制，谷歌8KB，火狐1KB，IE2KB的長度限制，若是超出長度限制，瀏覽器會把超出的部份內容截取；

    緩存問題：get請求會出現緩存(這個緩存不必定是304)，post是沒有緩存的；在項目中咱們的GET請求通常不會讓其出現緩存「清除緩存」：在URL後面追加一個隨機數

    xhr.open("get", "/getList?name=12&_=" + Math.random())

    安全問題：通常來講GET不安全，而POST相對安全一些