柚子快報(bào)激活碼778899分享：前端 Ajax的應(yīng)用

http://yzkb.51969.com/

1. Ajax

Ajax是Asynchronous Javascript And XML（異步JavaScript和XML）的縮寫。

Ajax技術(shù)描述了使用腳本操縱HTTP和Web服務(wù)器進(jìn)行數(shù)據(jù)交換，在頁(yè)面不刷新的情況下，實(shí)現(xiàn)頁(yè)面的局部更新。

重點(diǎn)：

Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。 通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。 傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

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

瀏覽器在XMLHttpRequest類上定義了它的HTTP方法。這個(gè)類型的每個(gè)實(shí)例都表示一個(gè)獨(dú)立的請(qǐng)求/響應(yīng)對(duì)，并且這個(gè)對(duì)象的屬性和方法允許指定請(qǐng)求細(xì)節(jié)和獲取相應(yīng)數(shù)據(jù)。

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

var xhr = new XMLHttpRequest();

回憶：

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

HTTP請(qǐng)求方法(GET/POST等) 請(qǐng)求的URL 一個(gè)可選的請(qǐng)求頭集合，其中可能包含身份驗(yàn)證信息 一個(gè)可選的請(qǐng)求主體

1.2 Ajax向服務(wù)器發(fā)送請(qǐng)求

創(chuàng)建XMLHttpRequest對(duì)象之后，我們就可以使用XMLHttpRequest對(duì)象的open()方法發(fā)起請(qǐng)求，該方法必須要指定請(qǐng)求方法（GET、POST等）和URL。

xhr.open("GET", "home.html");

xhr.open('method', 'URL' [, asyncFlag [, 'userName' [, 'password']]])

method：用于指定請(qǐng)求方式，如GET、POST，不區(qū)分大小寫。 URL：表示請(qǐng)求的地址。 asyncFlag：可選參數(shù)，用于指定請(qǐng)求方式，同步請(qǐng)求為false，默認(rèn)為異步請(qǐng)求true。 userName和password：可選參數(shù)，表示HTTP認(rèn)證的用戶名和密碼。 請(qǐng)求方法不區(qū)分大小寫，但通常都寫成大寫的形式。除了"GET"和"POST"之外，該方法還支持"DELETE"、"HEAD"、"OPTIONS"和"PUT"作為第一個(gè)參數(shù)。但"TRACE"和 "CONNECT"由于安全風(fēng)險(xiǎn)已被明確禁止使用。 URL用來(lái)指定請(qǐng)求的資源。它可以是一個(gè)相對(duì)URL（相對(duì)于當(dāng)前文檔的URL），也可以是一個(gè)絕對(duì)URL。如果使用的是絕對(duì)URL，則協(xié)議、主機(jī)和端口通常必須要與當(dāng)前文檔URL保持一致，因?yàn)榭缬虻恼?qǐng)求通常會(huì)報(bào)錯(cuò)（在服務(wù)器允許跨域請(qǐng)求時(shí)，則不會(huì)報(bào)錯(cuò)）。

注意：

同步和異步的區(qū)別：是否阻塞代碼的執(zhí)行。

異步方式（默認(rèn)）：是非阻塞的，瀏覽器端的JavaScript程序不用等待Web服務(wù)器響應(yīng)，可以繼續(xù)處理其他事情。當(dāng)服務(wù)器響應(yīng)后，再來(lái)處理Ajax對(duì)象獲取到的響應(yīng)結(jié)果。下面請(qǐng)看異步的執(zhí)行過(guò)程，

同步方式：是阻塞的，當(dāng)Ajax對(duì)象向Web服務(wù)器發(fā)送請(qǐng)求后，會(huì)等待Web服務(wù)器響應(yīng)的數(shù)據(jù)接收完成，再繼續(xù)執(zhí)行后面的代碼。

1.3 設(shè)置http請(qǐng)求頭

除了設(shè)置請(qǐng)求方法和URL以外，我們還可以設(shè)置請(qǐng)求頭。POST請(qǐng)求一般是要用"Content-Type"請(qǐng)求頭指定請(qǐng)求主體的MIME類型(用來(lái)描述實(shí)體內(nèi)容的編碼格式)：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//默認(rèn)編碼格式(數(shù)據(jù)被編碼為名稱/值對(duì))

xhr.setRequestHeader("Content-Type", "application/json");//用來(lái)告訴服務(wù)端消息主體是序列化后的 JSON 字符串

擴(kuò)展閱讀:Form表單的編碼類型

但是有些請(qǐng)求頭我們不能自己指定，例如"Content-Length"、"Date"、"Referer"、"User-Agent"等，XMLHttpRequest將自動(dòng)添加這些頭，防止偽造它們。除此之外，XMLHttpRequest對(duì)象自動(dòng)處理Cookie、連接時(shí)間、字符集和編碼判斷，所以我們無(wú)法向setRequestHeader()傳遞如下的請(qǐng)求頭：

Accept-CharsetContent-Transfer-EncodingTEAccept-EncodingDateTrailerConnectionExpectTransfer-EncodingContent-LengthHostUpgradeCookieKeep-aliveUser-AgentCookie2RefererVia

1.4 發(fā)送請(qǐng)求

使用XMLHttpRequest發(fā)起請(qǐng)求的最后一步是指定可選的請(qǐng)求主體并將它發(fā)送給服務(wù)器。

xhr.send(content);//Open的方式是post

xhr.send(null);//open的方式是get的一般不用send

//xhr.send('clazz=火花&name=張三&gender=男');

GET請(qǐng)求沒有請(qǐng)求體，所以應(yīng)該傳遞null或省略這個(gè)參數(shù)。而POST請(qǐng)求通常具有請(qǐng)求主體，同時(shí)它應(yīng)該與使用setRequestHeader()指定的"Content-Type"一致。

1.5 獲得響應(yīng)

一個(gè)完整的HTTP響應(yīng)消息由狀態(tài)行、響應(yīng)頭、空行和響應(yīng)主體組成。這些都可以通過(guò)XMLHttpRequest對(duì)象的方法和方法獲取。

1.6 監(jiān)聽請(qǐng)求狀態(tài)的改變

為了在響應(yīng)準(zhǔn)備就緒時(shí)得到通知，必須監(jiān)聽XMLHttpRequest對(duì)象上的onreadystatechange事件。

xhr.onreadystatechange = function(){

?

};

但為了理解這個(gè)事件類型，我需要先弄明白readyState屬性。readyState屬性的值是一個(gè)整數(shù)，用來(lái)指示HTTP請(qǐng)求的狀態(tài)。readyState屬性的值如下表所示：

常量值含義UNSENT0初始化，尚未調(diào)用open()方法OPENED1啟動(dòng)，已調(diào)用open()方法，但尚未調(diào)用send()方法HEADERS_RECEIVED2發(fā)送，已調(diào)用send()方法，接收到響應(yīng)頭信息LOADING3接收中，已經(jīng)接收到部分響應(yīng)主體DONE4完成，已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了

在實(shí)際應(yīng)用中，當(dāng)readyState屬性的值改變?yōu)?或1時(shí)可能不會(huì)觸發(fā)這個(gè)事件。當(dāng)readyState屬性的值改變?yōu)?或服務(wù)器的響應(yīng)完成時(shí)，所有的瀏覽器都會(huì)觸發(fā)readystatechange事件。因此為了判斷響應(yīng)是否真正完成了，我們應(yīng)該在事件處理程序中時(shí)刻檢測(cè)readyState屬性的值。

xhr.onreadystatechange = function(){

if (xhr.readyState === 4) {

console.log("請(qǐng)求完成了");

}

};

但這樣只能確保請(qǐng)求完成了，并不能確保請(qǐng)求成功。因此我們還需要根據(jù)響應(yīng)的【狀態(tài)碼】來(lái)判斷請(qǐng)求是否成功。

我們可以通過(guò)XMLHttpRequest對(duì)象的status和statusText屬性獲取HTTP狀態(tài)碼，狀態(tài)消息。

xhr.status ? ? ? // 200

xhr.statusText ? // OK

代碼如下：

xhr.onreadystatechange = function(){

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

console.log("請(qǐng)求完成并且成功了");

}

};

完善的判斷信息

xhr.onreadystatechange = function(){

? ?if (xhr.readyState === 4) {

? ? ? ? ? ?if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

? ? ? ? ? ? ? ?alert(xhr.responseText);

? ? ? ? ? } else {

? ? ? ? ? ? ? ?alert("Request was unsuccessful: " + xhr.status);

? ? ? ? ? };

? ? ? };

};

1.7 獲取響應(yīng)頭

響應(yīng)頭用于告知客戶端本次響應(yīng)的基本信息，包括服務(wù)器程序名、內(nèi)容的編碼格式、緩存控制等。請(qǐng)求頭和響應(yīng)頭是瀏覽器和服務(wù)器之間交互的重要信息，由程序自動(dòng)處理，通常不需要人為干預(yù)。 使用getResponeHeader()和getAllResponeHeaders()獲取響應(yīng)頭信息。

xhr.getResponeHeader("Content-Type") ? ? ?// "text/html"

xhr.getAllResponeHeaders() ? ? ? ? ? ? ?// 獲取所有的響應(yīng)頭

1.8 獲得響應(yīng)主體

服務(wù)器的響應(yīng)實(shí)體內(nèi)容有多重編碼格式，當(dāng)用戶請(qǐng)求的是一個(gè)網(wǎng)頁(yè)，實(shí)體內(nèi)容的格式就是HTML，如果請(qǐng)求的是圖片響應(yīng)的就是圖片，服務(wù)器為了告知瀏覽器內(nèi)容類型，會(huì)通過(guò)響應(yīng)頭中的Content-type字段來(lái)描述，這是一種MIME常見的類型。

無(wú)論響應(yīng)主體內(nèi)容類型是什么，響應(yīng)主體的內(nèi)容都會(huì)保存到responseText和responseXML屬性中；而對(duì)于非XML數(shù)據(jù)而言responseXML屬性的值將為null。

xhr.responseText ? ? // 服務(wù)器端返回的文本內(nèi)容

1.9 處理服務(wù)器返回的數(shù)據(jù)

服務(wù)器返回的數(shù)據(jù)都是JSON格式的字符串，為了使用方便，我們需要先把字符串轉(zhuǎn)換成JavaScript對(duì)象（Object/Array）。

JSON.parse(xhr.responseText);

轉(zhuǎn)換之后，就能以訪問對(duì)象屬性的方式拿到各種數(shù)據(jù)，實(shí)例如下：

// 轉(zhuǎn)換成Object類型的對(duì)象

[{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}]

?

// 轉(zhuǎn)換成Array類型的對(duì)象

[

{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},

{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},

{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},

{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}

]

1.10 怎樣向服務(wù)器傳遞數(shù)據(jù)？

GET方式的請(qǐng)求：

傳遞給后臺(tái)的數(shù)據(jù)要拼接到URL的后面，以問號(hào)（？）開始，參數(shù)是以name=value的形式出現(xiàn)，每?jī)蓚€(gè)鍵值對(duì)之間以（&）分隔。例如：

'http://192.168.0.101:8080/AjaxDemo/LoginServlet?username=zhangsan&password=123456'

POST方式的請(qǐng)求：

先通過(guò)請(qǐng)求頭（Content-Type）指定數(shù)據(jù)的格式類型，常用的格式類型有兩種，分別是：

application/x-www-form-urlencoded：用來(lái)告訴服務(wù)端消息主體是經(jīng)過(guò) URL編碼的字符串(窗體數(shù)據(jù)被編碼為名稱/值對(duì)) application/json ：用來(lái)告訴服務(wù)端消息主體是序列化后的 JSON 格式的字符串 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.setRequestHeader("Content-Type","application/json");

?

然后將編碼之后的數(shù)據(jù)通過(guò)send()方法傳遞給服務(wù)器，例如：

?

xhr.send(“clazz=%E7%81%AB%E8%8A%B112%E6%9C%9F&name=%E9%99%88%E6%A2%A6%E9%BE%99&gender=%E7%94%B7&age=20&hobby=%E7%9D%A1%E8%A7%89&hobby=%E6%89%93%E8%B1%86%E8%B1%86&tel=13834569928&address=%E5%8D%97%E9%98%B3&remark=%E6%96%B0%E5%90%8C%E5%AD%A6&date=2019-08-01”)。

2. 接口文檔

在實(shí)際的項(xiàng)目開發(fā)中，后臺(tái)服務(wù)寫好之后，后臺(tái)人員會(huì)給前臺(tái)人員一份【接口文檔】，文檔中列出了每個(gè)功能所需要的接口信息，我們前臺(tái)人員只需要根據(jù)文檔的要求與服務(wù)器進(jìn)行數(shù)據(jù)交互即可。接口文檔示例如下：

接口請(qǐng)求方式作用請(qǐng)求參數(shù)/api/student/getStudentGET1、獲取所有學(xué)生信息 2、根據(jù)ID獲取學(xué)生信息 3、根據(jù)name獲取學(xué)生信息可選參數(shù)： id 學(xué)生ID name 學(xué)生姓名/api/student/removeStudentGET1、根據(jù)ID刪除學(xué)生信息必傳參數(shù)： id 學(xué)生ID/api/student/addStudentPOST1、添加學(xué)生信息必傳參數(shù)： clazz班級(jí) name 姓名 gender 性別 age 年齡 tel 電話 address 地址信息 remark 備注信息/api/student/updateStudentPOST1、更新學(xué)生信息必傳參數(shù)：id 學(xué)生ID clazz班級(jí) name 姓名 gender 性別 age 年齡 tel 電話 address 地址信息 remark 備注信息**

3. 開發(fā)模式

3.1 前后端混合

前端代碼與后臺(tái)代碼混合編寫，也就是說(shuō)前端代碼和后臺(tái)代碼同時(shí)出現(xiàn)在一個(gè)文件中。例如，index.php文件是由PHP代碼和HTML代碼混寫的：

$x=5; // global scope

function myTest() {

? $y=10; // local scope

? echo "

在函數(shù)內(nèi)部測(cè)試變量：

? echo "變量 x 是：$x";

? echo "
";

? echo "變量 y 是：$y";

}

?

myTest();

?

echo "

在函數(shù)之外測(cè)試變量：

echo "變量 x 是：$x";

echo "
";

echo "變量 y 是：$y";

?>

?

//再例如，index.jsp是由 Java代碼和HTML代碼混寫的：

?

<%@ page language="java" contentType="text/html; charset=UTF-8"

? ?pageEncoding="UTF-8"%>

在前后端不分離的時(shí)代，在項(xiàng)目開發(fā)階段，前端人員負(fù)責(zé)編寫HTML頁(yè)，后端人員負(fù)責(zé)寫接口，前端人員調(diào)試頁(yè)面動(dòng)態(tài)數(shù)據(jù)都需要后端人員的配合，不能單獨(dú)調(diào)試，耗時(shí)耗力。前端把前后端代碼存放于同一個(gè)代碼庫(kù)中，甚至是同一工程目錄下。頁(yè)面中還夾雜著后端代碼。前后端工程師進(jìn)行開發(fā)時(shí)，都必須把整個(gè)項(xiàng)目導(dǎo)入到開發(fā)工具中。

3.2 前后端分離

隨著時(shí)代的發(fā)展，漸漸的許多大中小公司開始把前后端的界限分的越來(lái)越明確，前端工程師只管前端的事情，后端工程師只管后端的事情。

前后端分離情形一

前端資源和后臺(tái)接口位于同一個(gè)服務(wù)器

前后端分離情形二

前臺(tái)資源和后臺(tái)接口分別位于不同的服務(wù)器(跨域)

3.3 跨域和同源策略

例如【前后端分離情形二】瀏覽器不允許一個(gè)服務(wù)器中的頁(yè)面向另一個(gè)服務(wù)器發(fā)送請(qǐng)求，錯(cuò)誤信息如下：

我們通常稱這種類型的請(qǐng)求叫跨域請(qǐng)求。

為什么會(huì)跨域呢?

因?yàn)檫`背了同源策略的請(qǐng)求就形成了跨域。

那什么是同源策略呢?

是指協(xié)議，域名，端口號(hào)相同就稱為同源,同源的請(qǐng)求是允許的,如果非同源，那么在請(qǐng)求數(shù)據(jù)時(shí)，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常，提示拒絕訪問,就造成了跨域。

那怎么樣解決這個(gè)問題呢？

為使受信任的網(wǎng)站之間能夠跨域訪問，HTML5提供了一個(gè)新的策略，就是Access-Control-Allow-Origin響應(yīng)頭。目標(biāo)服務(wù)器通過(guò)該響應(yīng)頭可以指定允許來(lái)自特定URL的跨域請(qǐng)求，其值可以設(shè)置為任意URL或特定URL等。

實(shí)現(xiàn)方式有:

1、通過(guò)設(shè)置后臺(tái)服務(wù)器允許跨域請(qǐng)求

2、JSONP

3、使用代理服務(wù)器

4、前臺(tái)使用代理

3.4 JSONP實(shí)現(xiàn)跨域請(qǐng)求

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。我們可以通過(guò)使用 html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對(duì)象。這種跨域的通訊方式稱為JSONP。

JSONP：遵循瀏覽器的同源策略基礎(chǔ)上實(shí)現(xiàn)跨域請(qǐng)求的一種方式。 原理：與XMLHttpRequest無(wú)關(guān)，是利用