Ajax面試題詳解

一、Ajax面試題及答案

1.什麼是AJAX?

AJAX全稱是Asynchronous JavaScript And XML，是指一種創建互動式網頁應用的網頁開發技術，通過在後台與伺服器進行少量數據的交換，而不需要重新載入整個頁面，從而實現網頁的局部更新。

2.AJAX優缺點都有哪些？

優點：
（1）部分頁面刷新，大大提高頁面的性能和用戶體驗；
（2）非同步交互，不阻塞前端頁面，提高用戶體驗；
（3）前後端分離，實現前後端分離開發；
（4）數據傳輸使用JSON數據格式，與Web服務通信更方便。

缺點：
（1）對搜索引擎的支持不友好，因為搜索引擎爬蟲不會執行AJAX請求；
（2）瀏覽器兼容問題，不同瀏覽器對XMLHttpRequest的實現機制不同；
（3）需要考慮瀏覽器後退、刷新按鈕等操作對頁面狀態產生影響的問題；
（4）在後端需要增加特殊的代碼支持AJAX請求事務處理。

3.AJAX的核心是什麼？

AJAX請求的核心是XMLHttpRequest對象，它可以在不刷新頁面的情況下與伺服器進行數據交互。

二、Ajax面試題2021

1.如何避免GET請求產生緩存？

在GET請求URL後面增加一個時間戳或者隨機數，保證每次請求的URL都不相同，避免緩存。例如：

$.ajax({
    type: "GET",
    url: "data.json?" + new Date().getTime(), 
    dataType: "json",
    success: function(data) {
        // 處理返回的數據
    }
});

2.AJAX請求超時如何處理？

可以使用XMLHttpRequest.timeout屬性設置請求超時時間，超過指定時間後自動觸發error事件。例如：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 處理返回的數據
    }
};
xhr.open("GET", "data.json", true);
xhr.timeout = 3000; // 設置請求超時時間為3秒
xhr.ontimeout = function() {
    console.log("請求超時");
}
xhr.send(null);

3.AJAX請求中發生了跨域問題如何解決？

可以使用JSONP或者CORS解決跨域問題。

（1）JSONP：利用script標籤不受同源策略限制的特性，實現跨域請求，例如：

$.ajax({
    url: "http://example.com/data.php",
    dataType: "jsonp",
    success: function(data) {
        // 處理返回的數據
    }
});

（2）CORS：需要伺服器支持跨域請求，可以在伺服器端設置允許跨域請求的響應頭信息。例如：

Access-Control-Allow-Origin: *

表示允許所有域名跨域請求，也可以設置指定的域名才能進行跨域請求。

三、前端Ajax面試題

1.什麼是同源策略？

同源策略是瀏覽器的一種安全策略，通常指的是限制從一個源載入的文檔或腳本如何與來自另一個源載入的資源進行交互。同源是指兩個頁面的協議、域名、埠號都相同。
例如，http://example.com不能直接訪問http://www.example.com的Cookie信息。

2.AJAX請求中的readyState有哪些狀態？

（1）0 - 未初始化。XMLHttpRequest對象已創建，但尚未調用open方法。
（2）1 - 打開。open方法已經被調用，但是send方法未被調用。
（3）2 - 發送。send方法被調用，請求正在處理中，但響應及響應頭並未完全接收。
（4）3 - 接收。接收到部分響應數據。
（5）4 - 完成。響應數據已經完全接收。

3.GET和POST請求有什麼區別？

（1）GET請求：從伺服器上獲取數據。GET請求的數據會附在URL之後，以?分割URL和傳輸數據，多個參數用&連接。GET請求不安全，因為URL欄會顯示參數信息，所以不適合傳輸敏感信息。GET請求的數據量有限制，最大只能傳輸1024位元組。
（2）POST請求：向伺服器提交數據。POST請求的數據被封裝在請求體中，不會在URL中顯示，所以比GET請求更安全。POST請求傳輸的數據量沒有限制。

四、Ajax常見面試題

1.如何取消一個AJAX請求？

可以使用XMLHttpRequest對象的abort方法取消一個AJAX請求。例如：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 處理返回的數據
    }
};
xhr.open("GET", "data.json", true);
xhr.send(null);

// 取消請求
xhr.abort();

2.AJAX請求中出現的錯誤如何處理？

可以在AJAX請求中的error事件中處理AJAX請求中的錯誤信息。例如：

$.ajax({
    url: "http://example.com/data.php",
    success: function(data) {
        // 處理返回的數據
    },
    error: function(xhr, status, error) {
        console.log("AJAX請求出錯" + error);
    }
});

3.AJAX請求最多能同時進行多少個？

不同的瀏覽器對AJAX請求同時能進行的數量限制不同。
IE6：兩個（一個IE7及更高版本為6個）
IE7：兩個（一個IE7及更高版本為6個）
IE8：六個
Firefox：八個
Chrome：六個
Safari：六個
Opera：不限制

五、Ajax面試問題

1.如何發送跨域請求？

可以使用JSONP或者CORS解決跨域問題。

（1）JSONP：利用script標籤不受同源策略限制的特性，實現跨域請求，例如：

$.ajax({
    url: "http://example.com/data.php",
    dataType: "jsonp",
    success: function(data) {
        // 處理返回的數據
    }
});

（2）CORS：需要伺服器支持跨域請求，可以在伺服器端設置允許跨域請求的響應頭信息。例如：

Access-Control-Allow-Origin: *

表示允許所有域名跨域請求，也可以設置指定的域名才能進行跨域請求。

2.AJAX請求中的contentType屬性有什麼作用？

contentType屬性是指發送數據到伺服器時使用的內容類型，常用值有application/x-www-form-urlencoded、multipart/form-data、application/json等。
例如：

$.ajax({
    type: "POST",
    url: "data.php",
    data: JSON.stringify({"name": "張三", "age": 18}),
    contentType: "application/json",
    success: function(data) {
        // 處理返回的數據
    }
});

3.AJAX請求會出現死循環嗎？為什麼？

可能會出現死循環。因為AJAX請求的請求和響應是非同步的，如果在請求中出現了阻塞操作，例如alert彈窗，那麼就會出現死循環。
例如：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 處理返回的數據
    } else {
        // 出現alert，導致AJAX請求陷入死循環
        alert("出現了一個窗口");
    }
};
xhr.open("GET", "data.json", true);
xhr.send(null);