AJAX常見面試題有哪些

這篇文章主要介紹了AJAX常見面試題有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

什么是AJAX，為什么要使用Ajax

AJAX是“Asynchronous JavaScript and XML”的縮寫。他是指一種創建交互式網頁應用的網頁開發技術。、

客戶端與服務器，可以在【不必刷新整個瀏覽器】的情況下，與服務器進行異步通訊的技術

AJAX應用和傳統Web應用有什么不同？

AJAX應用和傳統Web應用有什么不同？

• 傳統的web前端與后端的交互中，瀏覽器直接訪問Tomcat的Servlet來獲取數據。Servlet通過轉發把數據發送給瀏覽器。

• 當我們使用AJAX之后，瀏覽器是先把請求發送到XMLHttpRequest異步對象之中，異步對象對請求進行封裝，然后再與發送給服務器。服務器并不是以轉發的方式響應，而是以流的方式把數據返回給瀏覽器

• XMLHttpRequest異步對象會不停監聽服務器狀態的變化，得到服務器返回的數據，就寫到瀏覽器上【因為不是轉發的方式，所以是無刷新就能夠獲取服務器端的數據】

這里寫圖片描述

請介紹一下XMLhttprequest對象

請介紹一下XMLhttprequest對象

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。通過XMLHttpRequest對象，Web開發人員可以在頁面加載以后進行頁面的局部更新

介紹一下XMLHttpRequest對象的常用方法和屬性

方法

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

• send(content)

• setRequestHeader(String header,String value)

• getAllResponseHeaders()

• getResponseHeader(String header)

• abort()

常用的方法就是黑色粗體的前三個

• open()：該方法創建http請求

• 第一個參數是指定提交方式(post、get)

• 第二個參數是指定要提交的地址是哪

• 第三個參數是指定是異步還是同步(true表示異步，false表示同步)

• 第四和第五參數在http認證的時候會用到。是可選的

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

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

• send(content)：發送請求給服務器

• 如果是get方式，并不需要填寫參數，或填寫null

• 如果是post方式，把要提交的參數寫上去

屬性

• onreadystatechange：請求狀態改變的事件觸發器（readyState變化時會調用此方法），一般用于指定回調函數

• readyState：請求狀態readyState一改變，回調函數被調用，它有5個狀態

• 0：未初始化

• 1：open方法成功調用以后

• 2：服務器已經應答客戶端的請求

• 3：交互中。Http頭信息已經接收，響應數據尚未接收。

• 4：完成。數據接收完成

  
  

• 

• responseText：服務器返回的文本內容

• responseXML：服務器返回的兼容DOM的XML內容

• status：服務器返回的狀態碼

• statusText：服務器返回狀態碼的文本信息

上面有兩個地方都提及了回調函數，回調函數是什么？？

回調函數就是接收服務器返回的內容！

這里寫圖片描述

Ajax的實現流程是怎樣的？

Ajax的實現流程是怎樣的？

• (1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.

• (2)創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.

• (3)設置響應HTTP請求狀態變化的函數.

• (4)發送HTTP請求.

• (5)獲取異步調用返回的數據.

• (6)使用JavaScript和DOM實現局部刷新.

javascript ¨K0K

AJAX請求總共有多少種CALLBACK

AJAX請求總共有多少種CALLBACK

Ajax請求總共有八種Callback

• onSuccess

• onFailure

• onUninitialized

• onLoading

• onLoaded

• onInteractive

• onComplete

• onException

XMLHttpRequest對象在IE和Firefox中創建方式有沒有不同。

有，IE中通過new ActiveXObject()得到，Firefox中通過newXMLHttpRequest()得到

• 當然了，我們一般使用jquery封裝好的ajax方法，那就沒有那么麻煩了。

AJAX有哪些有點和缺點？

AJAX有哪些有點和缺點？

優點：

• 1、最大的一點是頁面無刷新，用戶的體驗非常好。

• 2、使用異步方式與服務器通信，具有更加迅速的響應能力。

• 3、可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。并且減輕服務器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。

• 4、基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。

缺點：

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

• 2、安全問題 AJAX暴露了與服務器交互的細節。

• 3、對搜索引擎的支持比較弱。

• 4、破壞了程序的異常機制。

• 5、不容易調試。

請解釋一下 JavaScript 的同源策略。

請解釋一下 JavaScript 的同源策略。

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

闡述一下異步加載JS。

闡述一下異步加載JS。

1. 異步加載的方案： 動態插入 script 標簽

2. 通過 ajax 去獲取 js 代碼，然后通過 eval 執行

3. script 標簽上添加 defer 或者 async 屬性

4. 創建并插入 iframe，讓它異步執行 js

參考資料：

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

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

如何解決跨域問題?

如何解決跨域問題?

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

出于安全考慮，服務器不允許ajax跨域獲取數據，但是可以跨域獲取文件內容。

• 所以基于這一點，可以動態創建script標簽，使用標簽的src屬性訪問js文件的形式獲取js腳本，并且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，為了獲取這里的參數數據，需要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，【JSONP】

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

• 前端ajax請求的是本地接口，本地接口接收到請求后向實際的接口請求數據，然后再將信息返回給前端【代理方式】

AJAX跨域的問題可參考下一篇文章

Ajax 解決瀏覽器緩存問題？

Ajax 解決瀏覽器緩存問題？

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

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

• 3、在URL后面加上一個隨機數： "fresh=" + Math.random();。

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“AJAX常見面試題有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!