js原生ajax與jquery的ajax的用法區別

標籤：非同步請求   detail   arch   obj   get   title   ntb   word   success   

什麼是ajax和原理?

• AJAX 是一種用於建立快速動態網頁的技術。
• 通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料

XMLHttpRequest對象的基本屬性：

• onreadtstatechange 每次狀態改變所觸發事件的時間處理常式。
• responseText 從伺服器響應返回以字串為形式的資料
• responseXML 從伺服器響應返回以XML（DOM相容文檔）資料對象
• status 從伺服器返回的數字代碼
  
  • 100-199 用於指定用戶端應相應的某些動作。
  • 200-299 用於表示請求成功。
  • 300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊。
  • 400-499 用於指出用戶端的錯誤。
  • 500-599 用於支援伺服器錯誤。
  • 常用 200（正常）404（找不到） 500（伺服器錯誤）
  • 詳細看 連結
• status Text (如： if status==200 =>OK ) 伴隨狀態代碼的字串資訊
• readyState 對象狀態值
  
  • 0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
  • 1 (初始化) 對象已建立，尚未調用send方法
  • 2 (發送資料) send方法已調用，但是當前的狀態及http頭未知
  • 3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText擷取部分資料會出現錯誤，
  • 4 (完成) 資料接收完畢,此時可以通過通過responseXml和responseText擷取完整的回應資料
    　　

執行個體

<div id="content"></div><button id="btn"></button><script>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="http://XXXX";  //指定urlhttp.open(‘GET‘,url,true); //第一個參數選擇哪種方式提交資料//第二個參數是選擇傳遞的地址//第三個參數是選擇是否非同步傳輸，true:非同步，false:同步//當狀態發生改變就觸發的事件（可以理解為node.onchange=function()）http.readystatechange=function(){   if(http.status==4&&http.status==200){        //返回的對象狀態值為:4        //返回的狀態代碼為200        document.getElementById(‘content‘).innerHTML=http.responseText;//傳回值賦值到DOM   }   //簡單的異常處理   if(http.status==404){       alert(‘響應失敗‘);   }}發送一個 HTTP 要求http.send();}</script>

接下來是介紹jQuery的ajax提交

因為是為了對比與原生的區別，畢竟jQuery 的ajax更強大了，因為提供了更多內容的封裝
- 首先，jquery的常用方式有

$.ajax，$.post， $.get， $.getJSON。

• 先來個執行個體壓壓驚

$.ajax({    //請求類型，get,post    type:‘GET‘,    // 請求的資料類型，可以是html,json,xml等    dataType:‘json‘，    //傳輸的資料    data:{        num1:num1,        num2:num2    },    //選擇是否支援非同步重新整理，預設為true    async:true,    success:function(){         console.log(‘very good 請求成功‘);    },    error:function(){         console.log(‘對不起，請求失敗‘);    }})

 

• 如果你是用.get或者 . post那更簡單了，直接把type去掉也可以了
  是不是很簡單？相比傳統的用法，看起來更簡潔，更容易理解，相當於往對象裡面放值就可以自動化使用了

其實核心都是XMLHttpRequest對象的調用，和其對象屬性的掌握。

原文轉自：http://blog.csdn.net/dexing07/article/details/52759874

js原生ajax與jquery的ajax的用法區別