昨天還沒(méi)有談完，今天做一個(gè)了解。

首先還是以錯(cuò)誤，來(lái)講述。

?

一、AJax常見(jiàn)錯(cuò)誤

Ajax常見(jiàn)的錯(cuò)誤，除了昨天列舉的之外。還有就是如下?tīng)顟B(tài)碼:

405,請(qǐng)求類型錯(cuò)誤，比如請(qǐng)求是POST，你卻用GET，通常出現(xiàn)這種情況是在SpringMVC中的@RequestMapping，有使用SpringMVC經(jīng)驗(yàn)的小伙伴們都知道，@RequestMapping默認(rèn)的請(qǐng)求方式為GET。如果你因?yàn)閺?fù)制粘貼沒(méi)有仔細(xì)檢查，在調(diào)試Ajax的時(shí)候就會(huì)出現(xiàn)405狀態(tài)碼。當(dāng)然了，你沒(méi)有通過(guò)Ajax的調(diào)試方式，通常就會(huì)直接走error,并不會(huì)出現(xiàn)405狀態(tài)碼的提示。一般情況下，出現(xiàn)這種問(wèn)題的概率非常少，因?yàn)檫€有postman。通過(guò)postman進(jìn)行接口測(cè)試，一般情況下，如果你的情況不對(duì)，直接提示不支持該請(qǐng)求。

?

415，服務(wù)器無(wú)法處理請(qǐng)求附帶的媒體格式。因?yàn)槟阍贏jax中加入了contentType并指定了媒體格式為application/json;

如果你的參數(shù)列表中沒(méi)有加入@RequestBody就會(huì)出現(xiàn)415。

@RequestBody通常用來(lái)處理contentType不是默認(rèn)的application/x-www-form-urlcode編碼的內(nèi)容。比如說(shuō)application/json和application/xml,一般情況下處理application/json。

例如:

403,這個(gè)通常就是你的請(qǐng)求參數(shù)與接收參數(shù)不一致，比如createDate在前臺(tái)是String類型，但是后臺(tái)你卻用Date類型接收，就會(huì)出現(xiàn)這種問(wèn)題。

一般情況下，當(dāng)參數(shù)比較多的時(shí)候，建議使用對(duì)象(參數(shù)三個(gè)以上，就建議使用對(duì)象比較好)。

?

500,這個(gè)通常就是服務(wù)端代碼有問(wèn)題了。這個(gè)就要根據(jù)具體的調(diào)試情況來(lái)看了。比如空指針或者是類型轉(zhuǎn)換異常等等。

?

二、如何調(diào)試Ajax

比如我通過(guò)postman來(lái)測(cè)試，沒(méi)有發(fā)現(xiàn)問(wèn)題，并不代表web端異步請(qǐng)求沒(méi)有問(wèn)題。比如我在上面說(shuō)到的Ajax常見(jiàn)錯(cuò)誤，這些常見(jiàn)錯(cuò)誤，很少能通過(guò)postman來(lái)發(fā)現(xiàn)的。因?yàn)殚_(kāi)發(fā)人員，會(huì)因?yàn)槭韬龃笠?#xff0c;懶得測(cè)試(單元測(cè)試)等可能的意外原因?qū)е聠?wèn)題的出現(xiàn)。又或者是我通過(guò)單元測(cè)試發(fā)現(xiàn)沒(méi)問(wèn)題，并不代表web開(kāi)發(fā)請(qǐng)求url或者是安卓那邊請(qǐng)求沒(méi)問(wèn)題。

比如:

?

這段代碼正常返回的集合數(shù)據(jù)是不帶斜杠的，而web請(qǐng)求卻帶斜杠。

這是因?yàn)镾tring的原因，如果將其返回值換為Object或者并將其toJSONString()改為toJSON()就可以得到正常的json數(shù)據(jù)而不是帶斜杠的字符串?dāng)?shù)據(jù)。

雖然說(shuō)，帶斜杠可以通過(guò)jQuery的eval、安卓那邊的replace方法解決，但是最好還是不要繞一大圈。

調(diào)式的手段，主要是在error的function加上對(duì)應(yīng)的三個(gè)參數(shù)XMLHttpRequest、textStatus、errorThrown等。

彈出狀態(tài)碼的是XMLHttpRequest.status,正常的狀態(tài)碼應(yīng)為200。

?

狀態(tài)碼詳解如下:

1**：請(qǐng)求收到，繼續(xù)處理
2**：操作成功收到，分析、接受
3**：完成此請(qǐng)求必須進(jìn)一步處理
4**：請(qǐng)求包含一個(gè)錯(cuò)誤語(yǔ)法或不能完成
5**：服務(wù)器執(zhí)行一個(gè)完全有效請(qǐng)求失敗
100——客戶必須繼續(xù)發(fā)出請(qǐng)求
101——客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請(qǐng)求收到，但返回信息為空
205——服務(wù)器完成了請(qǐng)求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過(guò)的文件
206——服務(wù)器已經(jīng)完成了部分用戶的GET請(qǐng)求
300——請(qǐng)求的資源可在多處得到
301——?jiǎng)h除請(qǐng)求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請(qǐng)求數(shù)據(jù)
303——建議客戶訪問(wèn)其他URL或訪問(wèn)方式
304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化
305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請(qǐng)求的資源臨時(shí)性刪除
400——錯(cuò)誤請(qǐng)求，如語(yǔ)法錯(cuò)誤
401——請(qǐng)求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請(qǐng)求不允許
404——沒(méi)有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖，請(qǐng)求資源不可訪問(wèn)
407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒(méi)有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求
409——對(duì)當(dāng)前資源狀態(tài)，請(qǐng)求不能完成
410——服務(wù)器上不再有此資源且無(wú)進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請(qǐng)求
412——一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤
413——請(qǐng)求的資源大于服務(wù)器允許的大小
414——請(qǐng)求的資源URL長(zhǎng)于服務(wù)器允許的長(zhǎng)度
415——請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式
416——請(qǐng)求中包含Range請(qǐng)求頭字段，在當(dāng)前請(qǐng)求資源范圍內(nèi)沒(méi)有range指示值，請(qǐng)求也不包含If-Range請(qǐng)求頭字段
417——服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求
500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請(qǐng)求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過(guò)載
503——服務(wù)器過(guò)載或暫停維修
504——關(guān)口過(guò)載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來(lái)響應(yīng)用戶，等待時(shí)間設(shè)定值較長(zhǎng)
505——服務(wù)器不支持或拒絕支請(qǐng)求頭中指定的HTTP版本

?

至于XMLHttpRequest.readyState說(shuō)的是AJax異步請(qǐng)求服務(wù)器的過(guò)程(一共五個(gè)過(guò)程):

?

(0)未初始化
此階段確認(rèn)XMLHttpRequest對(duì)象是否創(chuàng)建，并為調(diào)用open()方法進(jìn)行未初始化作好準(zhǔn)備。值為0表示對(duì)象已經(jīng)存在，否則瀏覽器會(huì)報(bào)錯(cuò)－－對(duì)象不存在。

(1)載入
此階段對(duì)XMLHttpRequest對(duì)象進(jìn)行初始化，即調(diào)用open()方法，根據(jù)參數(shù)(method,url,true)完成對(duì)象狀態(tài)的設(shè)置。并調(diào)用send()方法開(kāi)始向服務(wù)端發(fā)送請(qǐng)求。值為1表示正在向服務(wù)端發(fā)送請(qǐng)求。

(2)載入完成
此階段接收服務(wù)器端的響應(yīng)數(shù)據(jù)。但獲得的還只是服務(wù)端響應(yīng)的原始數(shù)據(jù)，并不能直接在客戶端使用。值為2表示已經(jīng)接收完全部響應(yīng)數(shù)據(jù)。并為下一階段對(duì)數(shù)據(jù)解析作好準(zhǔn)備。

(3)交互
此階段解析接收到的服務(wù)器端響應(yīng)數(shù)據(jù)。即根據(jù)服務(wù)器端響應(yīng)頭部返回的MIME類型把數(shù)據(jù)轉(zhuǎn)換成能通過(guò)responseBody、responseText或responseXML屬性存取的格式，為在客戶端調(diào)用作好準(zhǔn)備。狀態(tài)3表示正在解析數(shù)據(jù)。

(4)完成
此階段確認(rèn)全部數(shù)據(jù)都已經(jīng)解析為客戶端可用的格式，解析已經(jīng)完成。值為4表示數(shù)據(jù)解析完畢，可以通過(guò)XMLHttpRequest對(duì)象的相應(yīng)屬性取得數(shù)據(jù)。
概而括之，整個(gè)XMLHttpRequest對(duì)象的生命周期應(yīng)該包含如下階段：
創(chuàng)建－初始化請(qǐng)求－發(fā)送請(qǐng)求－接收數(shù)據(jù)－解析數(shù)據(jù)－完成

?

?

用個(gè)例子說(shuō)明:

比如我給遠(yuǎn)方的一個(gè)朋友打電話，

第一,我必須要有手機(jī)，沒(méi)有手機(jī)怎么打電話,對(duì)應(yīng)（0）;

第二，我要將我說(shuō)的第一句話傳達(dá)給他,這是(1);

第三,我說(shuō)的話已經(jīng)傳達(dá)給他了，這是(2);

第四，他需要理解我話中所表達(dá)的意思是什么，這是(3);

第五，他已經(jīng)理解的我話的意思，這是(4);

?

也許這個(gè)例子表達(dá)的不是特別恰當(dāng)，但是我覺(jué)得已經(jīng)可以比較好的說(shuō)明異步請(qǐng)求服務(wù)的過(guò)程和readyState的含義。

?

?

三、Ajax中的參數(shù)含義(以jQuery中的$.ajax為例)

1.url:?
　　要求為String類型的參數(shù)，（默認(rèn)為當(dāng)前頁(yè)地址）發(fā)送請(qǐng)求的地址。

2.type:?
　　要求為String類型的參數(shù)，請(qǐng)求方式（post或get）默認(rèn)為get。注意其他http請(qǐng)求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。

3.timeout:?
　　要求為Number類型的參數(shù)，設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置。

4.async:?
　　要求為Boolean類型的參數(shù)，默認(rèn)設(shè)置為true，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行。

5.cache:?
　　要求為Boolean類型的參數(shù)，默認(rèn)為true（當(dāng)dataType為script時(shí)，默認(rèn)為false），設(shè)置為false將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。

6.data:?
　　要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串，將自動(dòng)轉(zhuǎn)換為字符串格式。get請(qǐng)求中將附加在url后。防止這種自動(dòng)轉(zhuǎn)換，可以查看　　processData（防止自動(dòng)轉(zhuǎn)換）選項(xiàng)。對(duì)象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組，JQuery將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。例如{foo:["bar1","bar2"]}轉(zhuǎn)換為&foo=bar1&foo=bar2。

7.dataType:?
　　要求為String類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，JQuery將自動(dòng)根據(jù)http包mime信息返回responseXML或responseText，并作為回調(diào)函數(shù)參數(shù)傳遞。可用的類型如下：
　　xml：返回XML文檔，可用JQuery處理。
　　html：返回純文本HTML信息；包含的script標(biāo)簽會(huì)在插入DOM時(shí)執(zhí)行。
　　script：返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請(qǐng)求時(shí)（不在同一個(gè)域下），所有post請(qǐng)求都將轉(zhuǎn)為get請(qǐng)求。
　　json：返回JSON數(shù)據(jù)。
　　jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時(shí)，例如myurl?callback=?，JQuery將自動(dòng)替換后一個(gè)“?”為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
　　text：返回純文本字符串。

8.beforeSend：
　　這個(gè)參數(shù)主要是為了在向服務(wù)器發(fā)送請(qǐng)求前，執(zhí)行一些操作。要求為Function類型的參數(shù)，發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請(qǐng)求。XMLHttpRequest對(duì)象是惟一的參數(shù)。
??????????? function(XMLHttpRequest){
?????????????? this;?? //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
??????????? }
9.complete：
　　要求為Function類型的參數(shù)，請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)（請(qǐng)求成功或失敗時(shí)均調(diào)用）。參數(shù)：XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類型的字符串。
????????? function(XMLHttpRequest, textStatus){
???????????? this;??? //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
????????? }

10.success：

　　要求為Function類型的參數(shù)，請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。
???????? (1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。
???????? (2)描述狀態(tài)的字符串。
???????? function(data, textStatus){
??????????? //data可能是xmlDoc、jsonObj、html、text等等
??????????? this;? //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
???????? }

11.error:
要求為Function類型的參數(shù)，請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)。該函數(shù)有3個(gè)參數(shù)，即XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。ajax事件函數(shù)如下：
?????? function(XMLHttpRequest, textStatus, errorThrown){
????????? //通常情況下textStatus和errorThrown只有其中一個(gè)包含信息
????????? this;?? //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
?????? }

12.contentType：
要求為String類型的參數(shù)，當(dāng)發(fā)送信息至服務(wù)器時(shí)，內(nèi)容編碼類型默認(rèn)為"application/x-www-form-urlencoded"。該默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。

13.dataFilter：
要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。
??????????? function(data, type){
??????????????? //返回處理后的數(shù)據(jù)
??????????????? return data;
??????????? }

14.dataFilter：
要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。
??????????? function(data, type){
??????????????? //返回處理后的數(shù)據(jù)
??????????????? return data;
??????????? }

15.global：
要求為Boolean類型的參數(shù)，默認(rèn)為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會(huì)觸發(fā)全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

16.ifModified：
要求為Boolean類型的參數(shù)，默認(rèn)為false。僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認(rèn)值是false，即忽略頭信息。

17.jsonp：
要求為String類型的參數(shù)，在一個(gè)jsonp請(qǐng)求中重寫回調(diào)函數(shù)的名字。該值用來(lái)替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分，例如{jsonp:'onJsonPLoad'}會(huì)導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。

18.processData：

要求為Boolean類型的參數(shù)，默認(rèn)為true。默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象（從技術(shù)角度來(lái)講并非字符串）以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹(shù)信息或者其他不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為false。

19.scriptCharset：
要求為String類型的參數(shù)，只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或者"script"，并且type是GET時(shí)才會(huì)用于強(qiáng)制修改字符集(charset)。通常在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。

上述的1,2,6,7,10,11,12是我開(kāi)發(fā)過(guò)程中比較常用的。其他的幾乎很少用。

?

四、SSM框架與Ajax三種方式(主要說(shuō)明參數(shù)傳遞和接收)

第一種，直接在參數(shù)列表中寫。

?

優(yōu)點(diǎn)，直接指明參數(shù)類型即可，確保前端和后臺(tái)的參數(shù)類型一致，就可以接收并處理;

缺點(diǎn),當(dāng)參數(shù)過(guò)多時(shí)，建議使用對(duì)象，不然隨著業(yè)務(wù)改動(dòng)，可能需要對(duì)象參數(shù)列表進(jìn)行修改，導(dǎo)致出現(xiàn)一些不必要的異常，比如415狀態(tài)碼和403狀態(tài)碼異常或者是500狀態(tài)碼異常。

?

第二種，通過(guò)HttpServletRequest

?

第三種，使用Map

注意，使用Map的話，記得在參數(shù)列表中加上@RequestParam，否則會(huì)發(fā)現(xiàn)參數(shù)無(wú)法傳過(guò)來(lái)。

?

這三種如果都用于Ajax異步交互，其本質(zhì)可以發(fā)現(xiàn)都是通過(guò)獲取鍵來(lái)得到值。

當(dāng)然了，再本質(zhì)，就是基于HTTP請(qǐng)求。

?

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的谈谈Ajax(二)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。