原聲ajax與jquery ajax請求的區別

大溼兄發表於2018-02-27
jQuery

        這幾天大家一定都在忙著面試或者是想要去面試吧，所以針對大家的面試我來講講面試中對於ajax的問題的回答，前幾天我也遇到這個坑結果沒有爬上來，所以今天寫這個文章的目的是想要提醒各位這個地方一定要注意，說起來原聲ajax確實不如jquery封裝過的ajax好用，但是還是得知道它怎麼寫和其中的區別。

        原聲ajax請求


var http=null;
if(window.ActiveXObject){
http=new ActiveXObject('Microsoft.XmlHTTP');
}else{
http=new XMLHttpRequest();
}
複製程式碼

        先定義XMLHttpRequest()然後用這個去進行請求


var url=; 
指定url
http.open('GET',url,true);
第一個引數選擇哪種方式提交資料
第二個引數是選擇傳遞的地址
第三個引數是選擇是否非同步傳輸，true:非同步，false:同步
複製程式碼

        之後定義需要請求的url，和請求的方式使用open方法請求


http.readystatechange=function(){
if(http.status==4&&http.status==200){
返回的物件狀態值為4
返回的狀態碼為200
var text=http.responseText;//返回值賦值到DOM
    console.log(text)

}
簡單的異常處理
if(http.status==404){
alert('響應失敗');
}
}
傳送一個 HTTP 請求
http.send();

複製程式碼

        最後判斷請求是否成功，然後列印結果

        貼出來完整的程式碼




var btn=document.getElementById('btn');
btn.onclick=function(){

var http=null;
if(window.ActiveXObject){
http=new ActiveXObject('Microsoft.XmlHTTP');
}else{
http=new XMLHttpRequest();
}
var url=
//指定url
http.open('GET',url,true);
第一個引數選擇哪種方式提交資料
第二個引數是選擇傳遞的地址
第三個引數是選擇是否非同步傳輸，true:非同步，false:同步


當狀態發生改變就觸發的事件（可以理解為node.onchange=function()）
http.readystatechange=function(){
if(http.status==4&&http.status==200){
返回的物件狀態值為:4
返回的狀態碼為200
var text=http.responseText;//返回值賦值到DOM
console.log(text)


}
簡單的異常處理
if(http.status==404){
alert('響應失敗');
}
}
傳送一個 HTTP 請求
http.send();
}

複製程式碼


        這就是一個完整的原聲ajax請求，接下來演示jquery  ajax請求


$.ajax({
url:'/comm/test1.php',
type:'POST', //GET
async:true,    //或false,是否非同步
data:{
name:'yang',age:25
},
timeout:5000,    //超時時間
dataType:'json',    //返回的資料格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('錯誤')
console.log(xhr)
console.log(textStatus)
}
})

複製程式碼

        因為請求非常簡單所以整體程式碼就都貼出來了，其中url是請求地址，type為請求方式，async為是否非同步，timeout為超時時間，dataType為返回格式，success為正確返回的引數，error為報錯時的引數

        jquery是吧ajax進行了二次封裝，所以用起來特別的方便不需要現new一個XMLHttpRequest()就能實現請求

        通過上述程式碼總結來說就是：

        jQuery是javascript的一個框架，也就是有人做好了很多功能，你直接拿來用就好了。比如實現Ajax。純javascript，你可能需要些好多函式，來新建物件，捕捉事件，處理異常等。但用jQuery，你只要按規則呼叫一個方法就行。當然，jQuery還有很多其他功能，詳見jquery手冊。

        ajax是javascript的一個應用方向，主要是通過javascript非同步訪問伺服器端的資料（通常是XML資料或Json資料），來實現無重新整理更新頁面內容，或提交資訊。上面說了，如果用jquery會很容易實現ajax。

        到這裡這篇文章就接近尾聲了，如果文章中還有沒有講到的部分，請在下面留言區進行留言我會一一進行解答，還請給為大神為我 的文章多提寶貴的意見，我都會採納的，謝謝

相關文章