AJAX與Jqurey實現AJAX

標籤：activex   amp   2-2   callback   app   xhr   通用   解析   改變   

AJAX = Asynchronous JavaScript and XML
（非同步 JavaScript 和 XML）。

Ajax作用：是用JavaScript向伺服器發送非同步請求，然後伺服器給出響應，然後以XML格式的檔案返回給瀏覽器端！
非同步：當瀏覽器向伺服器發送請求的時候，不是整個頁面重新整理，而是局部重新整理[局部資訊發送請求]！
同步：當瀏覽器向伺服器發送請求的時候，整個頁面都會重新整理！

XML:一種檔案格式，現在用XML這種返回格式的資料比較少了，XML解析效能較差，而且比較消耗頻寬[]，現在大多數都是在是使用JSON資料的返回格式！!

2.使原生js發送AJAX請求：
1).建立XMLHttpRequest對象

大部分比較新的瀏覽器都支援的方式（IE7以上）
var xhr = new XMLHttpRequest();
IE6以下的
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以下的
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

通用的擷取XMLHttpRequest對象的方法：

//寫一個擷取XHR的方法
function getXMLHttpRequest(){
try{
//大部分瀏覽器都支援的方式
return new XMLHttpRequest();
}catch(e){
try{
//IE6以下瀏覽器支援的方式
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5以下的瀏覽器
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你是火星來的吧！你的瀏覽器不支援AJAX！");
}

}

}
}

2).給open方法佈建要求參數[method,url]

xhr.open(請求方式,請求地址);
在發送post請求時，還需要設定一個要求標頭，如下：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3).發送請求(send()方法)

xhr.send(請求體);
get請求沒有請求體，所以send中可以傳null或什麼都不傳。
post請求需要通過send來佈建要求參數。

4.需要使用onreadystatechange回呼函數監聽readyState這個屬性狀態變化！

//xhr綁定一個onreadystatechange響應函數，這個函數會在readyState屬性發生改變時調用
xhr.onreadystatechange = function(){
//判斷當前readyState是否為4 ， 且響應狀態代碼為200
if(xhr.readyState==4 && xhr.status==200){
//讀取響應資訊，做相關操作。

//如果資訊為純文字
xhr.responseText

//如果資訊為XML
xhr.responseXML
}
};

通過jQuery實現AJAX
> 使用get和getJSON都會有緩衝問題，並且使用get方法不能傳送較多的資料。
> post方法不會有緩衝的問題，所以我們開發時使用post方法較多。
[1] post()方法
$.post(url, [data], [callback], [type])
參數：
url：發送AJAX的請求地址，字串。
data：發送給伺服器的請求參數，JSON格式。
callback：當前需要擷取伺服器發送的響應時，我們可以通過該回呼函數。
jQuery會將響應資訊以回呼函數的參數的形式返回
type：響應資訊的類型，字串。一般兩個常用值text、json

[2] get()方法
- get方法和post方法使用方式基本一致。

[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法類似，只不過該方法預設的響應類型為JSON，不需要再手動指定。

 

AJAX與Jqurey實現AJAX