ajax常見面試題

作者：Java3y

什麼是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都會執行這條語句就是不需要儲存快取記錄。