一、同步交互異步交互

1、什么是同步交互

指發(fā)送一個(gè)請(qǐng)求，需要等待返回，然后才能發(fā)送下一個(gè)請(qǐng)求

2、什么是異步交互

指發(fā)送一個(gè)請(qǐng)求，不需要等待返回，隨時(shí)可以再發(fā)送 下一個(gè)請(qǐng)求

同步交互與異步交互的區(qū)別在于：
同步交互需要等待結(jié)果，而異步交互不需要等待結(jié)果

3、異步交互的優(yōu)勢

• 用戶操作無須像同步交互必須等待結(jié)果。
• 異步交互只需與服務(wù)器端交換必要的數(shù)據(jù)內(nèi)容，而不是將所有數(shù)據(jù)全部更新。
• 異步交互對(duì)帶寬造成的壓力相比同步交互更小。
• 通過Ajax實(shí)現(xiàn)異步交互不需要任何第三方插件，只要瀏覽器支持JavaScript語言即可實(shí)現(xiàn)。

4、異步交互的劣勢

• 異步交互破壞了瀏覽器原有的前進(jìn)和后退機(jī)制。
• 如果后面邏輯的執(zhí)行依靠前面邏輯執(zhí)行的結(jié)果的話，異步交互可能會(huì)造成問題。
• Ajax實(shí)現(xiàn)異步交互對(duì)搜索引擎支持較弱。
• Ajax實(shí)現(xiàn)異步交互會(huì)引起一些Web安全問題， 例如SQL注入攻擊、跨站點(diǎn)腳本攻擊等問題。

二、Ajax是什么

Ajax是Asynchronous JavaScript XML的縮寫，被譯為異步JavaScript和XML

Ajax并不是一個(gè)新技術(shù)，而是一個(gè)在2005年被Jesse James Garrett提出的新術(shù)語，用來描述一種使用現(xiàn)有技
術(shù)集合的“新”方法。

當(dāng)使用Ajax模型，HTML 頁面能夠快速地將數(shù)據(jù)逐步更新顯示在用戶界面上，不需要重載(刷新)
整個(gè)頁面。這使得HTML頁面能成更快速地對(duì)用戶的操作進(jìn)行反饋。
盡管Ajax中的“X”代表XML,但由于、JSON的許多優(yōu)勢，目前JSON的使用比XML更加普遍。
JSON和XML都被用于在Ajax模型中封裝數(shù)據(jù)。

1、AJax涉及的技術(shù)

• HTML
• CSS
• JavaScript
• DOM
• XML
• XMLHTTPRequest對(duì)象

XMLHTTPRequest對(duì)象是實(shí)現(xiàn)Ajax異步交互的核心

2、Ajax的工作原理

3、Ajax的核心對(duì)象

3.1、實(shí)現(xiàn)Ajax異步交互的核心就是XMLHttpRequest對(duì)象，該對(duì)象為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。
3.2、XMLHttpRequest對(duì)象提供了一個(gè)通過URL來獲取數(shù)據(jù)的簡單方式，并且不會(huì)使整個(gè)頁面刷新。這使得網(wǎng)頁只更新一部分頁面而不會(huì)打擾到用戶。
3.3、XMLHttpRequest對(duì)象最初由微軟設(shè)計(jì)，隨后被Mozilla、Apple和Google采納。 如今，該對(duì)象已經(jīng)被W3C組織標(biāo)準(zhǔn)化。通過該對(duì)象，可以很容易地得到一個(gè)URL上的資源數(shù)據(jù)。盡管名字里有XML，但XMLHttp.Request對(duì)象可以得到所有類型的數(shù)據(jù)資源，并不局限于XML格式的數(shù)據(jù)。

三、實(shí)現(xiàn)Ajax異步交互

1、實(shí)現(xiàn)Ajax的執(zhí)行步驟

1.1、創(chuàng)建Ajax的核心對(duì)象XMLHttpRequest對(duì)象

function createXMLHttpRequest() {
    var httpRequest;
    if (window.XMLHttpRequest) { // 適用于Chrome, Firefox, Safari,
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //適用于IE瀏覽器
        try {
            httpRequest = new ActiveX0bject("MsxmL2.XMLHTTP"); //IE 7 +
        } catch (e) {
            try {
                httpRequest = new ActiveX0bject("MicrosoftXMLHTTP ") ;// IE 6-
                }
                catch (e) {}
            }
    }
    return httpRequest;
}

1.2、通過XMLHttpRequest對(duì)象的open(方法與服務(wù)器端建立連接
1.3、構(gòu)建請(qǐng)求所需的數(shù)據(jù)內(nèi)容，井通過XMLHttpRequest對(duì)象的send()方法發(fā)送給服務(wù)器端
1.4、通過XMLHttpRequ lest對(duì)象提供的onreadystatechange事件監(jiān)聽服務(wù)器端的通信狀態(tài)
1.5、接收并處理服務(wù)器端向客戶端響應(yīng)的數(shù)據(jù)結(jié)果
1.6、將處理結(jié)果更新到HTML頁面中

2、具體代碼過程

2.1創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest()
2.2調(diào)用XMLHttpRequest對(duì)象的open方法

與服務(wù)器建立連接
xhr.open('get','http://Localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.htmL?user=zhangwuji&pwd=123456')

/* 
open(method,url)方法
    method:當(dāng)前的請(qǐng)求方式GET、POST···
    url:當(dāng)前請(qǐng)求的服務(wù)器端地址
*/

2.3調(diào)用XMLHttpRequest對(duì)象的send方法

將客戶端頁面數(shù)據(jù)發(fā)送給服務(wù)端
xhr.send(null)

/*
send()方法
    如果不傳遞任何數(shù)據(jù)，向該方法中寫null
*/

/*
向服務(wù)器端發(fā)送請(qǐng)求數(shù)據(jù)
send(data)方法
    參數(shù)data -表示要向服務(wù)器端發(fā)送的請(qǐng)求數(shù)據(jù)
    請(qǐng)求方式：
        1、如果當(dāng)前的請(qǐng)求方式為GET的話- send() 方法中只能傳遞null值
        2、將請(qǐng)求數(shù)據(jù)添加到請(qǐng)求地址鏈接中

兩種情況
*發(fā)送數(shù)據(jù)- user=zhangwuji&pwd=  123456
    *請(qǐng)求數(shù)據(jù)的格式
        1.如果具有多個(gè)請(qǐng)求數(shù)據(jù)的話，之間使用"&"進(jìn)行分隔
        2.每個(gè)數(shù)據(jù)格式-> name=value 
    *不發(fā)送數(shù)據(jù)- send() 方法中必須傳遞null值，而不能為空
*/
//人為方式獲取當(dāng)前的數(shù)據(jù)，構(gòu)建成指定的數(shù)據(jù)格式

2.4利用XMLHttpRequest對(duì)象的onreadystatechange事件

用于監(jiān)聽服務(wù)器的通信狀態(tài) - 存在著處理完畢信號(hào)
接受服務(wù)器返回的處理結(jié)果

xhr.onreadystatechange = function(){//監(jiān)聽服務(wù)器端的通信狀態(tài)
/*
XMLHttpRequest 對(duì)象的readyState屬性
    作用：表示服務(wù)器端的通信狀態(tài)
    值：
        0 未初始化
        1 open方法被調(diào)用
        2 send方法被調(diào)用
        3 正在響應(yīng)
        4 響應(yīng)已完畢
*/
    if(xhr.readyState === 4){
    /* 
        接受服務(wù)器端返回結(jié)果
        XMLHttpRequest對(duì)象的responseText屬性
        作用：用于接受服務(wù)器端的響應(yīng)結(jié)果
    */
    console.log(xhr.responseText);
    }
}

四、GET和POST請(qǐng)求方式

GET請(qǐng)求方式

Ajax異步交互使用GET請(qǐng)求的話：

• 將構(gòu)建的請(qǐng)求數(shù)據(jù)添加到open方法中的url地址中
• 將發(fā)送請(qǐng)求數(shù)據(jù)的send方法中的參數(shù)設(shè)置為null

/*
    send()方法
        如果是GET，send方法只能傳遞null 請(qǐng)求數(shù)據(jù)添加到請(qǐng)求地址中
        如果是POST，send方法傳遞請(qǐng)求數(shù)據(jù)
*/

POST請(qǐng)求方式

Ajax異步交互使用POST請(qǐng)求的話：
調(diào)用send方法之前，需要通過XMLHttpRequest對(duì)象的setRequestHeader方法設(shè)置請(qǐng)求頭信息

1、httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
2、通過XMLHttpRequest對(duì)象的send方法請(qǐng)求數(shù)據(jù)