原生Ajax與jQuery中的ajax操作

一.基本實現

1.創建XMLHttpRequest對象

現代瀏覽器基本都內建了xmlhttpRequest對象，若要兼容低版本瀏覽器（IE5，IE6等）,則需要對其做兼容處理

 var xmlHttp = null;
function ajaxFunction(the_request_url) {
    try{
       //chrome，Firefox，Safari，opera
      xmlHttp = new XMLHttpRequest();
    }catch (e) {
        try{
            //IE6以上版本
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e) {
            try{
            //IE6以下版本
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e) {
               //否則提示用戶瀏覽器不支持ajax操作
               alert("您的瀏覽器不支持ajax");
               return false;
            }
       }
   }

2.創建狀態監聽處理

    function readyStateChangeHandle() {
        if(xmlHttp.readyState == 4) {    //響應完成
            if(xmlHttp.status == 200) {   //請求成功
               //   document.getElementById('vv').innerHTML =                          xmlHttp.responseText;
            }
        }
    }

ajax響應狀態碼：（具體參考AJAX請求時status返回狀態明細表http://hibeary.iteye.com/blog/697997）

• 0 :（未初始化）還沒有調用send()方法 .
  此階段確認XMLHttpRequest對象是否創建，併爲調用open()方法進行初始化作好準備。值爲0表示對象已經存在，否則瀏覽器會報錯（對象不存在）
• 1 :（載入）已調用send()方法，正在發送請求.
  此階段對XMLHttpRequest對象進行初始化，即調用open()方法，根據參數完成對象狀態的設置。並調用send()方法開始向服務端發送請求。值爲1表示正在向服務端發送請求。
• 2 :（載入完成）send()方法執行完成，已經接收到全部響應內容
  此階段接收服務器端的響應數據。但獲得的還只是服務端響應的原始數據，並不能直接在客戶端使用。值爲2表示已經接收完全部響應數據。併爲下一階段對數據解析作好準備
• 3 :（交互）正在解析響應內容
  此階段解析接收到的服務器端響應數據。即根據服務器端響應頭部返回的MIME類型把數據轉換成能通過responseBody、responseText或responseXML屬性存取的格式，爲在客戶端調用作好準備。狀態3表示正在解析數據。
• 4 :（完成）響應內容解析完成，可以在客戶端調用了
  此階段確認全部數據都已經解析爲客戶端可用的格式，解析已經完成。值爲4表示數據解析完畢，可以通過XMLHttpRequest對象的相應屬性取得數據。

3.發送請求，建立連接

if(xmlHttp) {
            xmlHttp.open('GET',the_request_url,true);
            xmlHttp.onreadystatechange =readyStateChangeHandle;    //監聽狀態
            xmlHttp.send(null);
        }

第一個參數爲請求的方式，常用請求方式爲get和post；
第二個參數爲請求的url，類型有txt,html,xml等；
第三個參數爲是否異步請求，默認爲true；

get請求與post請求傳參的差別

• get請求
  如果需要給url傳參，則直接在其後面附加參數即可；
  例如：’/test/?name=lily&age=18’
  get請求方式時，send()方法的參數可以爲空或者傳一個null;
• post請求
  post請求方式時，需要設置請求頭信息：
  xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
  post傳參時，要把參數寫在send()中。
  例如：xmlhttp.send(‘name=lily&age=18’);

二.3種數據交互方式

(1).txt格式
xmlhttp.open(“GET”,”test.html”,true);
(2).xml格式

function xml(url) {
   ......
  var xmlItem=xmlDOM.getElementsByTagName("note");
      document.getElementById('msg').innerHTML = xmlItem[0].firstChild.data;
      }
      <div id="msg"></div>
 <button onclick="test('ajax_data.xml')">btn</button>

(3).json格式
使用eval(string)將json解析成對象

var txt = "{'userid': '17','name': 'lily'}";
var txtObj = eval( "(" + txtObj + ")" );

然後便可以以對象的方式對數據進行訪問：
txtObj.userid ; //17

三.JQuery中的Ajax方法

+ $.ajax() 方法是屬於最底層的方法，
+ 第二層是  .load(),  $.get() ,$.post()方法，
+ 第三層是 getScript() 和 getJSON() 方法。

（1）. 可以使用.load()方法加載一個頁面，或者加載頁面中的一部分

$("#aid").load("test.html");     //#aid 爲要加載html頁面的容器
$("#aid").load("test.html #bid");

(2).$get()方法

$.get(url[,data][,callback]);

$("#btn").click(function() {   
  $.get("test.html",function(data) {
     $("#id").html(data);   //將test.html頁面的內容作爲data傳到#id元素中
});
});

(3).jQuery.ajax()函數

$.ajax(url[,options])
$.ajax(options) 此時url是options的第一個參數

$.ajax({
    type: "GET",
    url: url,
    data: data,
    dataType: "script",
    success: callback
})

type：HTTP請求的類型，默認是“GET”，可以設定其他請求類型
url：獲取數據的url。對get請求，data選項會添加到該url後面。
data：添加到url中（GET請求）或者在請求內體中（POST請求）發送的數據。可以是字符串或者是對象。
dataType：指定響應數據的預期類型，以及jQuery處理該數據的方式。也可以是：“text”、“html”、“script”、“json”、“jsonp”和“xml”。
contentType：指定請求的HTTP Content-Type頭，即data數據的編碼格式。默認是“application/x-www-form-urlencoded”
success：指定Ajax請求成功完成時的回調函數。第一個參數是服務器發送的數據；第二個參數是jQuery的狀態嗎；第三個參數是用來發送其扭曲的描述。
success(function(data) {…});
回調函數也可是error、complete、beforeSend、context、