1. 程式人生 > >AJAX與Jqurey實現AJAX

AJAX與Jqurey實現AJAX

url post方法 ready alt 地址 問題 head 函數 字符串

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