摘要：常見(jiàn)面試題什么是，為什么要使用是的縮寫。該對(duì)象在中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。頭信息已經(jīng)接收，響應(yīng)數(shù)據(jù)尚未接收。同源策略是客戶端腳本尤其是的重要的安全度量標(biāo)準(zhǔn)。這樣頁(yè)面的所有都會(huì)執(zhí)行這條語(yǔ)句就是不需要保存緩存記錄。

AJAX是“Asynchronous JavaScript and XML”的縮寫。他是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。、

客戶端與服務(wù)器，可以在【不必刷新整個(gè)瀏覽器】的情況下，與服務(wù)器進(jìn)行異步通訊的技術(shù)

AJAX應(yīng)用和傳統(tǒng)Web應(yīng)用有什么不同？

傳統(tǒng)的web前端與后端的交互中，瀏覽器直接訪問(wèn)Tomcat的Servlet來(lái)獲取數(shù)據(jù)。Servlet通過(guò)轉(zhuǎn)發(fā)把數(shù)據(jù)發(fā)送給瀏覽器。

當(dāng)我們使用AJAX之后，瀏覽器是先把請(qǐng)求發(fā)送到XMLHttpRequest異步對(duì)象之中，異步對(duì)象對(duì)請(qǐng)求進(jìn)行封裝，然后再與發(fā)送給服務(wù)器。服務(wù)器并不是以轉(zhuǎn)發(fā)的方式響應(yīng)，而是以流的方式把數(shù)據(jù)返回給瀏覽器

XMLHttpRequest異步對(duì)象會(huì)不停監(jiān)聽(tīng)服務(wù)器狀態(tài)的變化，得到服務(wù)器返回的數(shù)據(jù)，就寫到瀏覽器上【因?yàn)椴皇寝D(zhuǎn)發(fā)的方式，所以是無(wú)刷新就能夠獲取服務(wù)器端的數(shù)據(jù)】

請(qǐng)介紹一下XMLhttprequest對(duì)象

Ajax的核心是JavaScript對(duì)象XmlHttpRequest。該對(duì)象在Internet Explorer 5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。通過(guò)XMLHttpRequest對(duì)象，Web開(kāi)發(fā)人員可以在頁(yè)面加載以后進(jìn)行頁(yè)面的局部更新

open()(String method,String url,boolean asynch,String username,String password)

send(content)

setRequestHeader(String header,String value)

getAllResponseHeaders()

getResponseHeader(String header)

abort()

常用的方法就是黑色粗體的前三個(gè)

open()：該方法創(chuàng)建http請(qǐng)求

第一個(gè)參數(shù)是指定提交方式(post、get)

第二個(gè)參數(shù)是指定要提交的地址是哪

第三個(gè)參數(shù)是指定是異步還是同步(true表示異步，false表示同步)

第四和第五參數(shù)在http認(rèn)證的時(shí)候會(huì)用到。是可選的

setRequestHeader(String header,String value)：設(shè)置消息頭（使用post方式才會(huì)使用到，get方法并不需要調(diào)用該方法）

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

send(content)：發(fā)送請(qǐng)求給服務(wù)器

如果是get方式，并不需要填寫參數(shù)，或填寫null

如果是post方式，把要提交的參數(shù)寫上去

onreadystatechange：請(qǐng)求狀態(tài)改變的事件觸發(fā)器（readyState變化時(shí)會(huì)調(diào)用此方法），一般用于指定回調(diào)函數(shù)

readyState：請(qǐng)求狀態(tài)readyState一改變，回調(diào)函數(shù)被調(diào)用，它有5個(gè)狀態(tài)

0：未初始化

1：open方法成功調(diào)用以后

2：服務(wù)器已經(jīng)應(yīng)答客戶端的請(qǐng)求

3：交互中。Http頭信息已經(jīng)接收，響應(yīng)數(shù)據(jù)尚未接收。

4：完成。數(shù)據(jù)接收完成

responseText：服務(wù)器返回的文本內(nèi)容

responseXML：服務(wù)器返回的兼容DOM的XML內(nèi)容

status：服務(wù)器返回的狀態(tài)碼

statusText：服務(wù)器返回狀態(tài)碼的文本信息

上面有兩個(gè)地方都提及了回調(diào)函數(shù)，回調(diào)函數(shù)是什么？？

回調(diào)函數(shù)就是接收服務(wù)器返回的內(nèi)容！

Ajax的實(shí)現(xiàn)流程是怎樣的？

(1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.

(2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息.

(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).

(4)發(fā)送HTTP請(qǐng)求.

(5)獲取異步調(diào)用返回的數(shù)據(jù).

(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

AJAX請(qǐng)求總共有多少種CALLBACK

Ajax請(qǐng)求總共有八種Callback

onSuccess

onFailure

onUninitialized

onLoading

onLoaded

onInteractive

onComplete

onException

有，IE中通過(guò)new ActiveXObject()得到，F(xiàn)irefox中通過(guò)newXMLHttpRequest()得到

當(dāng)然了，我們一般使用jquery封裝好的ajax方法，那就沒(méi)有那么麻煩了。

AJAX有哪些有點(diǎn)和缺點(diǎn)？

優(yōu)點(diǎn)：

1、最大的一點(diǎn)是頁(yè)面無(wú)刷新，用戶的體驗(yàn)非常好。

2、使用異步方式與服務(wù)器通信，具有更加迅速的響應(yīng)能力。

3、可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，ajax的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求，和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。

4、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。

缺點(diǎn)：

1、ajax不支持瀏覽器back按鈕。

2、安全問(wèn)題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。

3、對(duì)搜索引擎的支持比較弱。

4、破壞了程序的異常機(jī)制。

5、不容易調(diào)試。

請(qǐng)解釋一下 JavaScript 的同源策略。

同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。所謂同源指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議，指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性。

闡述一下異步加載JS。

異步加載的方案： 動(dòng)態(tài)插入 script 標(biāo)簽

通過(guò) ajax 去獲取 js 代碼，然后通過(guò) eval 執(zhí)行

script 標(biāo)簽上添加 defer 或者 async 屬性

創(chuàng)建并插入 iframe，讓它異步執(zhí)行 js

參考資料：

https://www.cnblogs.com/zichi/p/4597766.html

https://www.cnblogs.com/xkloveme/articles/7569426.html

如何解決跨域問(wèn)題?

理解跨域的概念：協(xié)議、域名、端口都相同才同域，否則都是跨域

出于安全考慮，服務(wù)器不允許ajax跨域獲取數(shù)據(jù)，但是可以跨域獲取文件內(nèi)容。

所以基于這一點(diǎn)，可以動(dòng)態(tài)創(chuàng)建script標(biāo)簽，使用標(biāo)簽的src屬性訪問(wèn)js文件的形式獲取js腳本，并且這個(gè)js腳本中的內(nèi)容是函數(shù)調(diào)用，該函數(shù)調(diào)用的參數(shù)是服務(wù)器返回的數(shù)據(jù)，為了獲取這里的參數(shù)數(shù)據(jù)，需要事先在頁(yè)面中定義回調(diào)函數(shù)，在回調(diào)函數(shù)中處理服務(wù)器返回的數(shù)據(jù)，【JSONP】

在后端上配置可跨域【CORS方式】

前端ajax請(qǐng)求的是本地接口，本地接口接收到請(qǐng)求后向?qū)嶋H的接口請(qǐng)求數(shù)據(jù)，然后再將信息返回給前端【代理方式】

AJAX跨域的問(wèn)題可參考：

https://segmentfault.com/a/1190000012469713

Ajax 解決瀏覽器緩存問(wèn)題？

1、在ajax發(fā)送請(qǐng)求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

2、在ajax發(fā)送請(qǐng)求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

3、在URL后面加上一個(gè)隨機(jī)數(shù)： "fresh=" + Math.random();。

4、在URL后面加上時(shí)間戳："nowtime=" + new Date().getTime();。

5、如果是使用jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁(yè)面的所有ajax都會(huì)執(zhí)行這條語(yǔ)句就是不需要保存緩存記錄。

--

如果文章有錯(cuò)的地方歡迎指正，大家互相交流。習(xí)慣在微信看技術(shù)文章的同學(xué)，可以關(guān)注微信公眾號(hào):Java3y