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

什么是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"; //指定url http.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('對不起，請求失敗'); } })

 

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

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