原聲ajax與jquery ajax請求的區別

        這幾天你們必定都在忙着面試或者是想要去面試吧，因此針對你們的面試我來說講面試中對於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) } }) 
複製代碼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(); } 
複製代碼

        由於請求很是簡單因此總體代碼就都貼出來了，其中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。

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