什么是同步? 客戶(hù)端要發(fā)起請(qǐng)求，服務(wù)器端要去處理薪前，而且去響應(yīng)润努，這時(shí)候客戶(hù)端完全是等待，等待服務(wù)器端的處理和響應(yīng)示括，當(dāng)服務(wù)器端處理響應(yīng)后客戶(hù)端會(huì)重新載入頁(yè)面铺浇。這時(shí)候如果你有錯(cuò)誤，那么只能再次發(fā)起請(qǐng)求垛膝，再次等待鳍侣。同步的事件會(huì)讓人瘋狂。

同步和異步

什么是同步

Paste_Image.png

客戶(hù)端要發(fā)起請(qǐng)求吼拥，服務(wù)器端要去處理倚聚，而且去響應(yīng)，這時(shí)候客戶(hù)端完全是等待凿可，等待服務(wù)器端的處理和響應(yīng)惑折，當(dāng)服務(wù)器端處理響應(yīng)后客戶(hù)端會(huì)重新載入頁(yè)面。這時(shí)候如果你有錯(cuò)誤枯跑，那么只能再次發(fā)起請(qǐng)求惨驶，再次等待。同步的事件會(huì)讓人瘋狂敛助。

什么是異步

Paste_Image.png

當(dāng)你填寫(xiě)表單數(shù)據(jù)時(shí)粗卜，頁(yè)面當(dāng)時(shí)就把數(shù)據(jù)發(fā)送到服務(wù)器，也就是頁(yè)面發(fā)送了個(gè)請(qǐng)求辜腺，服務(wù)器去做處理和響應(yīng)休建，得到你的數(shù)據(jù)不符合要求乍恐，他會(huì)把響應(yīng)結(jié)果，發(fā)給頁(yè)面测砂，但是在這個(gè)過(guò)程中茵烈，你還是可以依舊去填寫(xiě)，表單其他內(nèi)容砌些，這時(shí)候服務(wù)器告訴你有填寫(xiě)錯(cuò)誤的地方呜投，在頁(yè)面上的表現(xiàn)，只是把你填寫(xiě)錯(cuò)誤的旁邊標(biāo)上一行字存璃，并沒(méi)有刷新你的頁(yè)面仑荐，這樣在填寫(xiě)表單時(shí)，所有的錯(cuò)誤信息都會(huì)顯示在頁(yè)面纵东，你可以實(shí)時(shí)的更正粘招，這個(gè)過(guò)程中你不會(huì)有整個(gè)頁(yè)面的刷新，也不會(huì)有整個(gè)頁(yè)面的提交和等待偎球，當(dāng)你最后點(diǎn)擊提交一切都可以搞定了洒扎。

怎么實(shí)現(xiàn)Ajax技術(shù)呢？

1. 運(yùn)用HTML和CSS來(lái)實(shí)現(xiàn)頁(yè)面衰絮，表達(dá)信息袍冷；
2. 運(yùn)用XMLHttpRequest對(duì)象和web服務(wù)器進(jìn)行數(shù)據(jù)的異步交換；
3. 運(yùn)用JavaScript操作DOM猫牡，實(shí)現(xiàn)動(dòng)態(tài)局部刷新胡诗；

Ajax-XMLHttpRequest對(duì)象創(chuàng)建

目前瀏覽器都支持標(biāo)準(zhǔn)的XHR對(duì)象，也支持標(biāo)準(zhǔn)的構(gòu)造函數(shù)淌友。

但是在IE5和IE6瀏覽器中煌恢，是不支持var request=new XMLHttpRequest();因?yàn)槟菚r(shí)候XHR還未定義。

如何兼容IE5和IE6甚至更早的版本亩进？

var request;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    request = new XMLHttpRequest();
} else { // code for IE6, IE5
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

只需要判斷下症虑，如果有XHR定義缩歪，我們就使用標(biāo)準(zhǔn)的構(gòu)造函數(shù)归薛，我們直接 new ActiveXObject("Microsoft.XMLHTTP");就可以了。

Ajax-HTTP請(qǐng)求

什么是HTTP

HTTP是計(jì)算機(jī)匪蝙，通過(guò)網(wǎng)絡(luò)進(jìn)行通信的規(guī)則主籍。

它主要使我們客戶(hù)，也就是常說(shuō)的瀏覽器能夠從服務(wù)器也就是常說(shuō)的web服務(wù)器逛球，去請(qǐng)求信息和服務(wù)千元。

Paste_Image.png

HTTP是一種無(wú)狀態(tài)的協(xié)議

無(wú)狀態(tài)指的是不建立持久的連接，也就是說(shuō)服務(wù)端不保留連接的一些相關(guān)信息颤绕。

一個(gè)客戶(hù)端幸海，想服務(wù)器發(fā)送請(qǐng)求祟身，然后web服務(wù)器返回響應(yīng)，接著連接就被關(guān)閉了物独，這個(gè)處理過(guò)程是沒(méi)有記憶的袜硫。如果后續(xù)的處理需要之前傳遞的一些信息，那么就要重新的傳遞挡篓。這就是經(jīng)常說(shuō)HTTP是一種無(wú)狀態(tài)的協(xié)議婉陷。

概念介紹--HTTP請(qǐng)求

一個(gè)完整的HTTP請(qǐng)求過(guò)程，通常有下面7個(gè)步驟官研。

1. 建立TCP連接秽澳；

2. Web瀏覽器向Web服務(wù)器發(fā)送請(qǐng)求命令；

3. Web瀏覽器發(fā)送請(qǐng)求頭信息戏羽；

4. Web服務(wù)器做出應(yīng)答担神；

5. Web服務(wù)器發(fā)送應(yīng)答頭信息；

6. Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)始花；

7. Web服務(wù)器關(guān)閉TCP連接杏瞻；

一個(gè)HTTP請(qǐng)求一般由四部分組成

1. HTTP請(qǐng)求的方法或動(dòng)作，比如是GIT還是POST請(qǐng)求衙荐；

2. 正在請(qǐng)求的URL捞挥，總得知道請(qǐng)求的地址是什么吧；

3. 請(qǐng)求頭忧吟，包含一些客戶(hù)端環(huán)境信息砌函，身份驗(yàn)證信息等；

4. 請(qǐng)求體溜族，也就是請(qǐng)求正文讹俊，請(qǐng)求正文中可以包含客戶(hù)提交的查詢(xún)字符串信息，表單信息等等煌抒。

Paste_Image.png

GIT請(qǐng)求和POST請(qǐng)求

• GIT：一般用于信息獲取
  使用URL傳遞參數(shù)
  對(duì)所發(fā)送信息的數(shù)量也有限制仍劈，一般在2000個(gè)字符

• POST：一般用于修改服務(wù)器上的資源。
  對(duì)所發(fā)送信息的數(shù)量無(wú)限制

HTTP響應(yīng)

一個(gè)HTTP響應(yīng)一般由三部分組成

1. 一個(gè)數(shù)字和文字組成的狀態(tài)碼寡壮，用來(lái)顯示請(qǐng)求是否成功還是失敺犯怼；

2. 響應(yīng)頭况既，響應(yīng)頭也和請(qǐng)求頭一樣包含許多有用的信息这溅，例如服務(wù)類(lèi)型，日期時(shí)間棒仍，內(nèi)容類(lèi)型和長(zhǎng)度等悲靴；

3. 響應(yīng)體，也就是響應(yīng)正文莫其；

Paste_Image.png

HTTP響應(yīng)狀態(tài)碼介紹

HTTP響應(yīng)狀態(tài)碼由3位數(shù)字構(gòu)成癞尚，其中首位數(shù)字定義了狀態(tài)碼的類(lèi)型：

• 1XX:1開(kāi)頭耸三，信息類(lèi)，表示收到web瀏覽器請(qǐng)求浇揩，正在進(jìn)一步的處理中吕晌；

• 2XX:2開(kāi)頭，成功临燃，表示用戶(hù)請(qǐng)求被正確接收睛驳，理解和處理例如：200 OK；

• 3XX:3開(kāi)頭膜廊，重定向乏沸，表示請(qǐng)求沒(méi)有成功，客戶(hù)必須采取進(jìn)一步的動(dòng)作爪瓜；

• 4XX:4開(kāi)頭蹬跃，客戶(hù)端錯(cuò)誤，表示客戶(hù)端提交的請(qǐng)求有錯(cuò)誤铆铆，例如：404 NOT ;

• Found蝶缀，意味著請(qǐng)求中所引用的文檔不存在；

• 5XX:5開(kāi)頭薄货，服務(wù)器錯(cuò)誤翁都，表示服務(wù)器不能完成對(duì)請(qǐng)求的處理：如 500;

Ajax-XMLHttpRequest發(fā)送請(qǐng)求

XMLHttpRequest對(duì)象的方法

GET 請(qǐng)求：

request.open("GET","gte.php",true);
request.send();

POST 請(qǐng)求

request.open("POST","post.php",true);
request.send();

如果需要像 HTML 表單那樣 POST 數(shù)據(jù)税娜，請(qǐng)使用 setRequestHeader() 來(lái)添加 HTTP 頭坐搔。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=黃&sex=男");

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
這個(gè)方法其實(shí)要設(shè)置HTTP的頭信息敬矩，告訴web服務(wù)器我們要發(fā)送一個(gè)表單概行，
需要注意的是request.setRequestHeader方法要寫(xiě)在request.open和request.send中間，否則將會(huì)拋出異常弧岳。

Ajax-XMLHttpRequest取得響應(yīng)

獲得來(lái)自服務(wù)器的響應(yīng)凳忙，請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

onreadystatechange 事件

當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)却紧，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)桐臊。

每當(dāng) readyState 改變時(shí)胎撤，就會(huì)觸發(fā) onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息断凶。

function but() {
    var request;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        request = new XMLHttpRequest();
    } else { // code for IE6, IE5
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {  //響應(yīng)完成且請(qǐng)求成功
            //做一些事情  request.responseText;
        }
    }
    request.open("GET", "gte.php", true);
    request.send();
}

總結(jié)下Ajax使用的步驟

第一步

new一個(gè)XHM對(duì)象new XMLHttpRequest();

兼容寫(xiě)法

    var request;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        request = new XMLHttpRequest();
    } else { // code for IE6, IE5
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }

第二步

調(diào)用open方法

    request.open("GET", "gte.php", true);

第三步

將請(qǐng)求發(fā)送到服務(wù)器

    request.send();

第四步

對(duì)過(guò)程進(jìn)行監(jiān)聽(tīng)來(lái)知道服務(wù)器是否正確的做出了響應(yīng)舶沛，接著就可以做一些事情

    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {  //響應(yīng)完成且請(qǐng)求成功
            //做一些事情  request.responseText;
        }
    }

未完