關于原生AJAX和jQueryAJAX的程式設計

1.回顧傳統Ajax開發步驟

1 ①：建立xmlHttpRequest對象
 2 var xmlHttp = creatHttpRequest();
 3 ②：綁定回調函數
 4 xmlHttp.onreadystatechange = function(){……}
 5 ③：建立連接配接
 6 xmlHttp.open(“GET”,”url”);
 7 ④：發送資料
 8 xmlHttp.send(null) //GET請求
 9 如果是POST請求需要設定編碼格式：
10 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
11 xmlHttp.send(“key=value?key=value”)
12 ⑤：書寫回調函數
13 if(readyState == 4){
14 if(status ==200){
15 ……
16 //操作xmlHttp.responseText主要針對傳回HTML片段和json
17 //操作xmlHttp.responseXML主要針對傳回XML片段。
18 }
19 }      

2.jQuery的Ajax開發

jQuery提供了最底層的Ajax調用方法：$.ajax

1 $.ajax{
2 type:”POST”
3 url: “some.php”
4 data: "name=John&location=Boston",
5 success: function(msg){
6 alert( "Data Saved: " + msg );
7 }
8 }      

// 因為使用比較繁瑣，是以在實際開發中，應用很少

為了簡化Ajax開發，jQuery提供了對$.ajax（）進一步的封裝方法$load、$get、$post。這三個方法不支援跨域，$getJSON、$getScript支援跨域。

①：load方法

load方法是jQuery中最為簡單和常用的Ajax方法，處理HTML片段此方法最為合适。

文法

$("jquery對象").load("url","data") ;

url：Ajax通路伺服器位址

data：請求參數

傳回内容HTML片段 ，自動放入$("jquery對象")innerHTML 中(如果傳回的資料需要處理，我們可以使用get或者post)

load()方法的傳遞參數根據參數data來自動自定。如過沒有參數的傳遞，采用GET方式傳遞，否則采用POST方式

 比如校驗使用者名是否存在

$(function(){

    // 為使用者名添加離焦事件

    $("input[name='username']").blur(function(){

       // 獲得目前輸入 username

       var username = $(this).val();

       // 送出Ajax校驗

        $("#info").load("/Ajax/checkUsername" , {'username': username});

    });

});

<form>

    <!-- div display:block  自動換行效果  span display:inline; 不會換行 -->

    使用者名 <input type="text" name="username" /> <span id="info"></span> <br/>

    密碼 <input type="password" name="password"/><br/>

     <input type="submit" value="注冊" />

</form>

②：get方法和post方法

文法 ：

$.get/$.post("url","parameter",function(data){...});

url Ajax通路伺服器位址

parameter 代表請求參數

function 回調函數 data 代表從伺服器傳回資料内容

這裡data代表各種資料内容 ： HTML片段、JSON、XML 

如果傳遞參數給伺服器使用 $.post , 不需要傳參數 可以使用 $.get 

作者：SummerChill