AJAX常見面試題
阿新 • • 發佈：2022-05-04
什麼是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實現區域性重新整理.
<script type="text/javascript">
var httpRequest;
function checkUsername() {
if(window.XMLHttpRequest) {
//在IE6以上的版本以及其他核心的瀏覽器(Mozilla)等
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject();
}
//建立http請求
httpRequest.open("POST", "Servlet1", true);
//因為我使用的是post方式，所以需要設定訊息頭
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//指定回撥函式
httpRequest.onreadystatechange = response22;
//得到文字框的資料
var name = document.getElementById("username").value;
//傳送http請求，把要檢測的使用者名稱傳遞進去
httpRequest.send("username=" + name);
}
function response22() {
//判斷請求狀態碼是否是4【資料接收完成】
if(httpRequest.readyState==4) {
//再判斷狀態碼是否為200【200是成功的】
if(httpRequest.status==200) {
//得到服務端返回的文字資料
var text = httpRequest.responseText;
//把服務端返回的資料寫在div上
var div = document.getElementById("result");
div.innerText = text;
}
}
}
</script>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。
- 非同步載入的方案： 動態插入 script 標籤
- 通過 ajax 去獲取 js 程式碼，然後通過 eval 執行
- script 標籤上新增 defer 或者 async 屬性
- 建立並插入 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跨域的問題可參考：
- https://segmentfault.com/a/1190000012469713
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都會執行這條語句就是不需要儲存快取記錄。