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);