Ajax

LuDongWei 發(fā)布于2019-08-23 15:41 / 2138人閱讀

摘要：二技術(shù)的核心技術(shù)的核心是對象簡稱，使得瀏覽器可以發(fā)出請求與接收響應(yīng)。伴隨狀態(tài)碼的字符串信息。第二部分請求頭部，第二行至第六行。第四部分請求數(shù)據(jù)，第八行。例子第一部分狀態(tài)行，由協(xié)議版本號，狀態(tài)碼，狀態(tài)消息三部分組成。

一、什么是Ajax

Ajax的全稱是Asynchronous JavaScript and XML，即異步JavaScript+XML。

二、Ajax技術(shù)的核心

Ajax技術(shù)的核心是XMLHttpRequest對象（簡稱XHR），使得瀏覽器可以發(fā)出HTTP請求與接收HTTP響應(yīng)。
XMLHttpRequest對象的主要屬性有：
onreadystatechange——每次狀態(tài)改變所觸發(fā)事件的事件處理程序。
responseText——從服務(wù)器進(jìn)程返回數(shù)據(jù)的字符串形式。
responseXML——從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對象。
status——從服務(wù)器返回的數(shù)字代碼，如404（未找到）和200（已就緒）。
status Text——伴隨狀態(tài)碼的字符串信息。
readyState——對象狀態(tài)值。

三、XHR 用法

創(chuàng)建Ajax核心對象XMLHttpRequest(記得考慮兼容性)

向服務(wù)器發(fā)送請求

注意：POST請求一定要設(shè)置請求頭的格式內(nèi)容

對于open方法，有幾點需要注意：

URL是相對于當(dāng)前頁面的路徑，也可以似乎用絕對路徑。

open方法不會向服務(wù)器發(fā)送真正請求，它相當(dāng)于初始化請求并準(zhǔn)備發(fā)送。

只能向同一個域中使用相同協(xié)議和端口的URL發(fā)送請求，否則會因為安全原因報錯。
真正能夠向服務(wù)器發(fā)送請求需要調(diào)用send方法，并僅在POST請求可以傳入?yún)?shù)，不需要則發(fā)送null，在調(diào)用send方法之后請求被發(fā)往服務(wù)器。

請求發(fā)往服務(wù)器，服務(wù)器根據(jù)請求生成響應(yīng)（Response），傳回給XHR對象，在收到響應(yīng)后相應(yīng)數(shù)據(jù)會填充到XHR對象的屬性，有四個相關(guān)屬性會被填充：

responseText——從服務(wù)器進(jìn)程返回數(shù)據(jù)的字符串形式。

responseXML——從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對象。

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

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

Http狀態(tài)碼：
1xx：指示信息--表示請求已接收，繼續(xù)處理 2xx：成功--表示請求已被成功接收、理解、接受
3xx：重定向--要完成請求必須進(jìn)行更進(jìn)一步的操作 4xx：客戶端錯誤--請求有語法錯誤或請求無法實現(xiàn)
5xx：服務(wù)器端錯誤--服務(wù)器未能實現(xiàn)合法的請求
常見狀態(tài)碼：

200 OK                     //客戶端請求成功 
400 Bad Request      //客戶端請求有語法錯誤，不能被服務(wù)器所理解 
401 Unauthorized    //請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和WWW-Authenticate報頭域一起使用 
403 Forbidden         //服務(wù)器收到請求，但是拒絕提供服務(wù) 
404 Not Found        //請求資源不存在，eg：輸入了錯誤的URL 
500 Internal Server Error     //服務(wù)器發(fā)生不可預(yù)期的錯誤 
503 Server Unavailable       //服務(wù)器當(dāng)前不能處理客戶端的請求，一段時間后可能恢復(fù)正常

readyState——對象狀態(tài)值。對象狀態(tài)值有以下幾個：

0 - (未初始化)還沒有調(diào)用send()方法

1 - (載入)已調(diào)用send()方法，正在發(fā)送請求

2 - (載入完成)send()方法執(zhí)行完成

3 - (交互)正在解析響應(yīng)內(nèi)容

4 - (完成)響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

在異步請求時，我們可以檢查XHR對象的readyState屬性，該屬性表示請求/響應(yīng)過程中的當(dāng)前活動階段，每當(dāng)readyState值改變的時候都會觸發(fā)一次onreadystatechange事件。
我們可以利用這個事件檢查每次readyState變化的值，當(dāng)為4的時候表示所有數(shù)據(jù)準(zhǔn)備就緒。
有一點我們需要注意：必須在open方法之前指定onreadtstatechange事件處理程序。

四、GET還是POST？

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠

五、HTTP請求

HTTP之請求消息Request
客戶端發(fā)送一個HTTP請求到服務(wù)器的請求消息包括以下格式：
請求行（request line）、請求頭部（header）、空行和請求數(shù)據(jù)四個部分組成。

POST請求例子

POST / HTTP1.1 
Host: www.wrox.com 
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022) 
Content-Type: application/x-www-form-urlencoded 
Content-Length: 40 
Connection: Keep-Alive 

name=Professional%20Ajax&publisher=Wiley

第一部分：請求行，第一行明了是post請求，以及http1.1版本。
第二部分：請求頭部，第二行至第六行。
第三部分：空行，第七行的空行。第四部分：請求數(shù)據(jù)，第八行。

HTTP之響應(yīng)消息Response
一般情況下，服務(wù)器接收并處理客戶端發(fā)過來的請求后會返回一個HTTP的響應(yīng)消息。
HTTP響應(yīng)也由四個部分組成，分別是：狀態(tài)行、消息報頭、空行和響應(yīng)正文。

例子

HTTP/1.1 200 OK Date: Fri, 22 May 2009 06:07:21 GMT Content-Type: text/html; charset=UTF-8

第一部分：狀態(tài)行，由HTTP協(xié)議版本號，狀態(tài)碼，狀態(tài)消息三部分組成。
第一行為狀態(tài)行，（HTTP/1.1）表明HTTP版本為1.1版本，狀態(tài)碼為200，狀態(tài)消息為（ok）
第二部分：消息報頭，用來說明客戶端要使用的一些附加信息
第二行和第三行為消息報頭，Date:生成響應(yīng)的日期和時間；Content-Type:指定了MIME類型的HTML(text/html),編碼類型是UTF-8
第三部分：空行，消息報頭后面的空行是必須的
第四部分：響應(yīng)正文，服務(wù)器返回給客戶端的文本信息。
空行后面的html部分為響應(yīng)正文。