AJAX 使用原生js實現ajax

 

一、什麼是ajax?  異步的JavaScript和XML

        XHTML：可擴展的超文本標記語言

         ||

        HTML

xml:數據結構 可擴展的標記語言

json:輕量級的數據格式

    二、ajax使用的場景

        一、局部刷新

        二、表單驗證 (最初的設計目的)

        三、無刷新動態獲取數據

    三、ajax的優勢

        一、效率高 用戶體驗好

        二、無刷新動態獲取數據

    四、ajax請求數據的流程

        1，建立一個ajax對象 xhr

        2，打開地址

        3，發送

        4，等待數據         

       5，ajax的狀態：  ajax的狀態有哪些

                        0-未初始化，還沒有調用open()方法

                        

                        1-啓動，調用open()方法，已調用send()的方法，正在發送請求

                    

                        2-發送，已經調用send()方法，已接受到響應

                        3-解析 正在解析響應數據

                        四、完成，響應數據解析完成，客戶端能夠調用;（咱們都是使用xhr.readyState == 4 判斷ajax請求是否結束）

        6，服務器的狀態

        常見的服務器狀態碼有哪些？

            100——客戶必須繼續發出請求

            101——客戶要求服務器根據請求轉換HTTP協議版本

            200——交易成功

            201——提示知道新文件的URL

            202——接受和處理、但處理未完成

            203——返回信息不肯定或不完整

            204——請求收到，但返回信息爲空

            205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件

            206——服務器已經完成了部分用戶的GET請求

            300——請求的資源可在多處獲得

            301——刪除請求數據

            302——在其餘地址發現了請求數據

            303——建議客戶訪問其餘URL或訪問方式

            304——客戶端已經執行了GET，但文件未變化

            305——請求的資源必須從服務器指定的地址獲得

            306——前一版本HTTP中使用的代碼，現行版本中再也不使用

            307——申明請求的資源臨時性刪除

            400——錯誤請求，如語法錯誤

            401——請求受權失敗

            402——保留有效ChargeTo頭響應

            403——請求不容許

            404——沒有發現文件、查詢或URl

            405——用戶在Request-Line字段定義的方法不容許

            406——根據用戶發送的Accept拖，請求資源不可訪問

            407——相似401，用戶必須首先在代理服務器上獲得受權

            408——客戶端沒有在用戶指定的餓時間內完成請求

            409——對當前資源狀態，請求不能完成

            410——服務器上再也不有此資源且無進一步的參考地址

            411——服務器拒絕用戶定義的Content-Length屬性請求

            412——一個或多個請求頭字段在當前請求中錯誤

            413——請求的資源大於服務器容許的大小

            414——請求的資源URL長於服務器容許的長度

            415——請求資源不支持請求項目格式

            416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段

            417——服務器不知足請求Expect頭字段指定的指望值，若是是代理服務器，多是下一級服務器不能知足請求

            500——服務器產生內部錯誤

            501——服務器不支持請求的函數

            502——服務器暫時不可用，有時是爲了防止發生系統過載

            503——服務器過載或暫停維修

            504——關口過載，服務器使用另外一個關口或服務來響應用戶，等待時間設定值較長

            505——服務器不支持或拒絕支請求頭中指定的HTTP版本

            

            必需要記住的

                100：客戶端必須發送請求

                200：請求成功

                304：重定向 (提問);

                404: 數據不存在

                500：服務器錯誤

五、ajax可否跨域？如何解決跨域？場景的跨域方式有哪些？

（1）不能

（2） 跨域:瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能調用b.cn中的js,對象或數據(由於a.cn和b.cn是不一樣域),因此跨域就出現了.

同源策略:請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,端口,協議相同.

解決跨域的方式 A: 基於script標籤實現跨域 B:基於jquery跨域 jquery已經把跨域封裝到ajax上 jsonp形式的ajax請求:而且經過get請求的方式傳入參數,注意:跨域請求是隻能是get請求不能使用post請求 C:經過iframe來跨子域

6, 

        get與post的區別

        一、上傳獲取數據

        二、get不安全 post安全 這樣理解有點錯誤

                form Data

            取決於http協議和https協議

        get傳遞數據的時候經過url進行傳遞數據 在地址？後面進行傳遞數據

        類型 key = val 若是是傳遞多個值的時候 用&分割

        例如

            www.baidu.com?username=帥哥&age=34&sex=男

        get存儲量的大小隻有2K

        post傳遞數據的時候 虛擬的機制 setRequestHeader() send(數據)

（1）get的ajax

//第一步 建立ajax對象

var xhr = new XMLHttpRequest();

//第二步 打開要發送的地址

xhr.open("get","http://10.9.188.25/qbank/php/select.php");

/*

    參數1：method--->get post

    參數2：請求的地址

    參數3：布爾值 默認是false 異步true同步

*/

//第三部發送

xhr.send();

console.log(xhr.readyState)

//第四步

xhr.onreadystatechange = function(){

    if(xhr.readyState == 4 && xhr.status == 200){

        console.log(JSON.parse(xhr.responseText))

    }

}

 

（2）post的ajax

//第一步建立ajax對象

var xhr = new XMLHttpRequest();

//打開請求的方式

xhr.open("post","http://10.9.188.25/qbank/php/insert.php");

//若是是post進行提交的時候必須設置響應頭

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

//post發送數據請求的時候參數要放在send裏面

xhr.send("content=面向對象&where=this的指向&idea=多練");

xhr.onreadystatechange = function(){

    if(xhr.readyState == 4 && xhr.status == 200){

        console.log(JSON.parse(xhr.responseText))

    }else{

        console.log(xhr.status);

    }

}

（3）封裝ajax

function ajax(options){

    //建立一個ajax對象

    var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");

    //數據的處理 {a:1,b:2} a=1&b=2;

    var str = "";

    for(var key in options.data){

        str+="&"+key+"="+options.data[key];

    }

    str = str.slice(1)

    if(options.type == "get"){

        var url = options.url+"?"+str;

        xhr.open("get",url);

        xhr.send();

    }else if(options.type == "post"){

        xhr.open("post",options.url);

        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

        xhr.send(str)

    }

    //監聽

    xhr.onreadystatechange = function(){

        //當請求成功的時候

        if(xhr.readyState == 4 && xhr.status == 200){

            var d = xhr.responseText;

            //將請求的數據傳遞給成功回調函數

            options.success&&options.success(d)

        }else if(xhr.status != 200){

            //當失敗的時候將服務器的狀態傳遞給失敗的回調函數

            options.error&&options.error(xhr.status);

        }

    }

}

ajax({

    type:"get/post",

    url:"請求的地址",

    data:{},

    success:function(data){

        console.log(data)

    }

})

 

 

1，AJAX不是JavaScript的規範,  ajax的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求

注意：AJAX請求是異步執行的，也就是說，要經過回調函數得到響應。

2,使用原生js實現ajax
建立一個 XMLHttpRequest 對象。若是不支持建立該對象的瀏覽器，則須要建立 ActiveXObject，具體方法以下：
var xmlHttpRequest;
function createXmlHttpRequest(){
if(window.XMLHttpRequest)  //非IE
xmlHttpRequest = new XMLHttpRequest();
else if(window.ActiveObject)//IE6+
xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
else//IE6-
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}
提交請求的方法：
open(method,url);//分別爲提交的方法(GET或者POST)和提交的url
send(content);
onreadystatechange(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.state == 200){
//請求成功
}
}else{
//請求失敗
}
}

 

當建立了XMLHttpRequest對象後，要先設置onreadystatechange的回調函數。在回調函數中，一般咱們只需經過readyState === 4判斷請求是否完成，若是已完成，再根據status === 200判斷是不是一個成功的響應。

XMLHttpRequest對象的open()方法有3個參數，第一個參數指定是GET仍是POST，第二個參數指定URL地址，第三個參數指定是否使用異步，默認是true，因此不用寫。

注意，千萬不要把第三個參數指定爲false，不然瀏覽器將中止響應，直到AJAX請求完成。若是這個請求耗時10秒，那麼10秒內你會發現瀏覽器處於「假死」狀態。

最後調用send()方法才真正發送請求。GET請求不須要參數，POST請求須要把body部分以字符串或者FormData對象傳進去。