Ajax概述：

+ Ajax(Asynchronous JavaScript And Xml),非同步的JavaScript和Xml。是一種用來改善用戶體驗的技術，其實質是利用瀏覽器內置的一個特殊對象（XMLHttpRequest，一般稱之為Ajax對象）非同步地（Ajax對象在向伺服器發送請求時，瀏覽器並不會銷毀當前頁面，用戶仍然可以對當前頁面作其他的操作）向伺服器發送請求，伺服器送回部分數據（不是一個完整的新的頁面，而是文本或者Xml文檔），在瀏覽器端，可以利用這些數據部分更新當前頁面。整個過程，頁面無刷新，不打斷用戶的操作。

+ 優點：

1) 頁面無刷新，不打斷用戶的操作。

2) 按需要獲取數據，客戶端（瀏覽器）與伺服器端之間的數據傳輸量大大減少

3) 是一種標準化的技術，不需要下載任何插件。

+ 獲得Ajax對象：由於XMLHttpRequest（Ajax對象）沒有標準化，所以要區分瀏覽器。

function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//非IE瀏覽器
}else{
xhr=new ActiveXObject(Microsoft.XMLHttp);//IE瀏覽器
}
return xhr;
}

語句處理：

$(「id」) <—> document.getElementById(「id」);

$F(「id」) <—> document.getElementById(「id」).value;

+ Ajax對象屬性：

1）onreadystatechange：綁定一個事件處理函數（監聽器），該函數用來處理readystatechange事件。Ajax對象的readyState屬性發生改變，比如從0到1，則會產生onreadystatechange事件。

2）responseText：獲得伺服器返回的文本數據。

3）responseXML：獲得伺服器返回的Xml文檔。

4）status：獲得狀態碼。

5）readyStatue：返回Ajax對象與伺服器通訊的狀態，返回值是一個number類型的值。一共有5個值，分別是：

①0：（未初始化）對象已建立，但是尚未初始化（尚未調用open方法）。

②1：（初始化）對象已建立，尚未調用send方法。

③2：（發送數據）send方法已調用。

④3：（數據傳送中）已接收部分數據。

⑤4：（響應結束）Ajax對象已經獲得了伺服器返回的所有的數據。

if(xhr.readyState==4 && xhr.status == 200){…}

+ get請求：

1）獲得Ajax對象，比如：var xhr=getXhr();//調用之前定義的函數

2）發送get請求：

① xhr.open(『get』,check_username.do?username=chang&age=23,true)；

//參數依次為：請求方式、url、同步還是非同步(true：非同步，用戶能對當前頁面進行其他操作，不會銷毀頁面；false:同步，瀏覽器會鎖定該頁面，用戶只能等待，不會銷毀頁面)

② xhr.onreadystatechange=func1();//綁定一個事件處理函數（監聽器）

③ xhr.send(null);//送請求參數，因為參數已經寫在了請求資源路徑中，所以這裡為null。

④事件處理函數func1()：

function f1(){
if(xhr.readyState==4){
var txt=xhr.responseText;
dom操作……
}
}

+ post請求：

1）獲得Ajax對象，比如：var xhr=getXhr();//調用之前定義的函數

2）使用Ajax對象發送post請求：

① xhr.open(「post」,」check.do」,true);//建立連接

② xhr.setRequestHeader(「content-type」,」application//x-www-form-urlencoded」);//發送一個content-type消息頭, 必須設置

③ xhr.onreadystatechange=func1();//綁定一個事件處理函數（監聽器）

④ xhr.send(「username=小紅「);//發送請求參數

【注意：與get請求不同，請求參數要放到send方法裡面；因為按照HTTP協議的要求，發送post請求時，應該發送一個content-type消息頭，而Ajax對象在默認情況下，不會發送這個消息頭，所以，需要調用setRequestHeader方法來添加。】

3）編寫函數處理事件func1();

+ 亂碼問題：

1）get請求：

—>亂碼產生原因：IE瀏覽器內置的Ajax對象會使用「GBK」或「GB2312」對中文參數進行編碼，而其他瀏覽器（Chrom、Firefox）內置的Ajax對象會使用「utf-8」對中文參數進行編碼。伺服器端，默認會使用「ISO-8859-1」去解碼。因為編碼與解碼所使用的字符集（編碼格式）不一致，所以，會出現亂碼問題。

—> 亂碼解決：

① 設置伺服器使用指定的字符集去解碼。比如，可以修改Tomcat的server.xml配置（conf文件夾中），添加URIEncoding=「utf-8"（告訴伺服器，對於所有的get請求，默認使用「utf-8」去解碼），修改之後重新啟動伺服器。

② 使用encodeURI()函數（JS中內置函數）對請求地址進行編碼。encodeURI()函數會使用「utf-8」進行編碼。

xhr.open(get,check_username.do?username=+$F(username),true);
var uir=check_username.do?username=+$F(username);
xhr.open(get,encodeURI(uri),true);

2）post請求：

—> 亂碼產生原因：所有瀏覽器（一般指三大瀏覽器：Chrom、Firefox、IE）內置的Ajax對象都會使用「utf-8」對中文參數進行編碼，而伺服器默認情況下，會使用「ISO-8859-1」去解碼。

【注意：Firefox特殊，本應是亂碼，但能正常顯示。通過截取消息頭髮現Firefox會在消息頭中自動添加」charset=utf-8"。】

—> 亂碼解決：伺服器端添加：request.setCharacterEncoding("utf-8");

+ 緩存問題

1）get請求：

—> 緩存原因：IE瀏覽器（其他瀏覽器沒這個問題）內置的Ajax對象會檢查請求地址是否訪問過，如果訪問過，則不再向伺服器發送請求。

—> 解決方式：

① 在請求地址後面添加一個隨機數，用於欺騙IE；如：xhr.open(get,getNumber.do?+Math.random(),true);

② 使用post方式發請求。

【注意：】

1）href="javascript:;"相當於href="#"，寫成href="javascript:;"一般要和onclick事件一起使用，表示a元素不再指向一個地址，而是點擊後觸發一個事件。

+ 同步請求：

1）什麼是同步請求

Ajax對象在向伺服器發送請求時，瀏覽器會鎖定當前頁面，用戶不能夠對當前頁面做任何的操作。

2）如何發送同步請求

open(請求方式，請求地址，false)

3）優先使用非同步，因為同步會影響性能，當伺服器端處理比較慢的時候，瀏覽器會鎖定當前頁面（「假死」）。

4）只有當客戶端需要等待伺服器的響應之後，才能繼續向下執行時，應該使用同步。

【注意：Firefox的某些版本（低版本，如3、4）對於同步的支持比較特殊：

不能使用xhr.onreadystatechange來綁定一個事件處理函數，而應該在send方法執行之後，才調用xhr.responseText方法來獲得伺服器返回的數據。】

+ 跨域

當協議、子域名、主域名、埠號中任意一個不相同時的介面訪問即是跨域。

javaScript出於安全考慮，不允許跨域調用其他頁面的對象。如a.com下的js不能調用b.com下的js對象。

* 處理方法

1）代理方式JSONP：需要與伺服器端配合。

—> 在伺服器端的介面中添加jsonp;

—> 在web端的ajax的參數：dataType:」jsonp」,jsonp:」callback自定義返回名」；

2）在HTML5中已經提供了跨域支持。只需要在伺服器添加header:」Access-Control-Allow」和「Access-Control-Allow-Methods:POST,GET」

推薦閱讀：

相關文章