摘要：這類狀態(tài)碼代表了客戶端看起來可能發(fā)生錯(cuò)誤，妨礙了服務(wù)器的處理。

AJAX 是一種與服務(wù)器交換數(shù)據(jù)無需刷新網(wǎng)頁的技術(shù)，最早由Google公司在谷歌地圖里使用，并迅速風(fēng)靡。

AJAX是不能跨域的，如需跨域，可以使用document.domain="a.com"；或者使用服務(wù)器代理，代理XMLHttpRequest文件

AJAX是基于現(xiàn)有的Internet標(biāo)準(zhǔn)，并且聯(lián)合使用它們：

XMLHttpRequest 對象 (異步的與服務(wù)器交換數(shù)據(jù))
JavaScript/DOM (信息顯示/交互)
CSS (給數(shù)據(jù)定義樣式)
XML (作為轉(zhuǎn)換數(shù)據(jù)的格式)

所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對象。

創(chuàng)建Ajax對象：

//IE6以上
var oAjax = new XMLHttpRequest();

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")

oAjax.open(方法,url,是否異步)

我們都知道，Ajax即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。所以，Ajax天生就是工作在異步模式的（異步為true，同步false）

同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè)數(shù)據(jù)包的通訊方式。
異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個(gè)數(shù)據(jù)包的通訊方式。
（簡單點(diǎn)說：同步就是只能一件一件事的來做，而異步就是可以多件事同時(shí)進(jìn)行）

    請求數(shù)據(jù)

 

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

oAjax.onreadystatechange = function(){   //當(dāng)請求狀態(tài)改變時(shí)要調(diào)用的事件處理器

    alert(oAjax.readystate);           

}

只要readyState屬性的值發(fā)生變化時(shí)，便會(huì)觸發(fā)一次readyStatechange事件?？梢岳眠@個(gè)事件來檢測每次狀態(tài)變化后readyState的值。通常，我們只對readyState值為4的階段感興趣，因?yàn)檫@時(shí)所有數(shù)據(jù)都已經(jīng)就緒，不過，必須在調(diào)用open()之前指定onreadystatechange事件處理程序才能確?？鐬g覽器兼容性。下面來看一個(gè)例子：

var xhr = createXHR();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.statusText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

XMLHttpRequest這個(gè)對象的屬性：

它的屬性有：

onreadystatechange  每次狀態(tài)改變所觸發(fā)事件的事件處理程序。

responseText     從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。
responseXML    從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對象。

status           從服務(wù)器返回的數(shù)字代碼，比如常見的404（未找到）和200（已就緒）

status Text       伴隨狀態(tài)碼的字符串信息

當(dāng)XHR對象把一個(gè)HTTP請求發(fā)送到服務(wù)器的過程中會(huì)經(jīng)歷幾個(gè)狀態(tài)，直到請求被處理，然后才接收一個(gè)回應(yīng)。readyState就是XHR請求的狀態(tài)屬性，它本身有5個(gè)屬性值：

0（未初始化）還沒有調(diào)用open()方法
1（載入）已調(diào)用send()方法，正在發(fā)送請求
2(載入完成)send()方法完成，已收到全部響應(yīng)內(nèi)容
3(解析)正在解析響應(yīng)內(nèi)容
4（完成）響應(yīng)內(nèi)容解析完成，可以再客戶端使用了

1字頭：消息。這一類型的狀態(tài)碼，代表請求已被接受，需要繼續(xù)處理。
2字頭：成功。這一類型的狀態(tài)碼，代表請求已成功被服務(wù)器接收、理解、并接受。
3字頭：重定向。這類狀態(tài)碼代表需要客戶端采取進(jìn)一步的操作才能完成請求。
4字頭：客戶端錯(cuò)誤。這類狀態(tài)碼代表了客戶端看起來可能發(fā)生錯(cuò)誤，妨礙了服務(wù)器的處理。
5字頭：服務(wù)器錯(cuò)誤。這類狀態(tài)碼代表了服務(wù)器在處理請求的過程中有錯(cuò)誤或者異常狀態(tài)發(fā)生

另附：http狀態(tài)碼詳解
w3cschool HTTP 狀態(tài)消息：http://www.w3school.com.cn/ta...

　　statusText是響應(yīng)返回的文本信息，僅當(dāng)readyState值為3或4的時(shí)候才能使用。當(dāng)readyState為其它值時(shí)視圖存取statusText屬性將引發(fā)異常。

.load()方法是局部方法，因?yàn)樗枰粋€(gè)包含元素的jQuery對象作為前綴，而$.get()和$.post()是全局方法，無需指定某個(gè)元素，對于用途而言，.load()適合做靜態(tài)文件的異步獲取，而對于需要傳遞參數(shù)到服務(wù)器頁面的，$.get()和$.post()更加合適。

GET和POST傳入的data是一個(gè)鍵值對 對象，不同的是GET傳入的data是通過地址欄傳輸?shù)?，而POST是通過表單提交的，

$(function () {
    $("input").click(function () {
        $.get("test.php?url=baidu.com", function (response,status,xhr) {
            $("#box").html(response);
        })
    })
});

POST提交不能使用url傳參。post提交可以使用字符串形式的鍵值對形式傳參，自動(dòng)轉(zhuǎn)換為http消息實(shí)體傳參

$(function () {
    $("input").click(function () {
        $.post("test.php","url=baidu.com", function (response,status,xhr) {
            $("#box").html(response);
        })
    })
});

//post提交可以使用對象鍵值對

$(function () {
    $("input").click(function () {
        $.post("test.php",{
                url:"baidu.com"http://post提交可以使用對象鍵值對
            }, function (response,status,xhr) {
            $("#box").html(response);
        })
    })
});

$.get()方法有四個(gè)參數(shù)，前面三個(gè)參數(shù)和.load()一樣，多了一個(gè)第四參數(shù)type，即服務(wù)器返回的內(nèi)容格式，包括xml,json,script,html,text等，第一個(gè)參數(shù)為必選參數(shù)，后面三個(gè)為可選參數(shù)

$.ajax()是所有Ajax方法中最底層的方法，所有其他方法都是基于$.ajax()方法的封裝，這個(gè)方法只有一個(gè)參數(shù)，傳遞一個(gè)
各個(gè)功能鍵值對的對象。

$(function () {
    $("input").click(function () {
        $.ajax({
            type : "POST",
            url: "test.php",
            data:{
                url: "baidu.com"
            },
            success : function(response,status,xhr){
                $("#box").html(response);
            }
        })
    })
});

Ajax用的最多的地方莫過于表單操作，而傳統(tǒng)的表單操作是通過submit提交將數(shù)據(jù)傳輸?shù)椒?wù)器，如果使用Ajax異步處理
的話，我們需要將每個(gè)表單元素獲取才能提交，這樣工作效率就大大降低

    用戶名: 
    郵件: 
    

表單元素特別多的情況下應(yīng)采用表單序列化，即data:$(“form”).serialize();//得到的是字符串鍵值對，并且對url進(jìn)行編碼

serialize()方法不但可以序列化表單內(nèi)的元素，還可以直接獲取單選框，復(fù)選框和下拉列表框等內(nèi)容

    用戶名: 
    郵件: 
    
    男
    女
    

傳統(tǒng)的ajax有如下的問題：

1、可以無刷新改變頁面內(nèi)容，但無法改變頁面URL

2、為了更好的可訪問性，內(nèi)容發(fā)生改變后，通常改變URL的hash

3、hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問題

4、進(jìn)而瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時(shí)去判斷hash是否改變

5、但這種方式對搜索引擎很不友好

6、twitter和google約定了使用#!xxx（即hash第一個(gè)字符為!），搜索引擎進(jìn)行支持。

本人兼職前端付費(fèi)技術(shù)顧問，如需幫助請加本人微信hawx1993，非誠勿擾

1.為初學(xué)前端而不知道怎么做項(xiàng)目的你指導(dǎo)
2.指導(dǎo)并扎實(shí)你的JavaScript基礎(chǔ)
3.幫你準(zhǔn)備面試并提供相關(guān)指導(dǎo)性意見
4.為你的前端之路提供極具建設(shè)性的意見
5.讓你的學(xué)習(xí)更有效率，對知識點(diǎn)的理解更加透徹
6.不解答可以百度到的答案，也不解答你遇到的bug

付費(fèi)（每月僅需99）能讓我更有耐心和責(zé)任心的為你指導(dǎo)，讓雙方產(chǎn)生更良好的協(xié)作