面试题-Ajax

1、ajax 返回的状态

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用 send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端调用了

2、实现一个 Ajax

AJAX 创建异步对象XMLHttpRequest 操作XMLHttpRequest 对象

（1） 设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2） 设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针

（3） 获取异步对象的 readyState 属性：该属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行。

（4） 判断响应报文的状态，若为 200 说明服务器正常运行并返回响应数据。

（5） 读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

3、如何实现 ajax 请求，假如我有多个请求，我需要让这些 ajax 请求按照某种顺序一次执行，有什么办法呢？如何处理 ajax 跨域

通过实例化一个 XMLHttpRequest 对象得到一个实例，调用实例的open 方法为这次ajax 请求设定相应的 http 方法，相应的地址和是否异步，以异步为例，调用send 方法，这个方法可以设定需要发送的报文主体，然后通过监听 readystatechange 事件，通过这个实例 的readyState 属性来判断这个 ajax 请求状态，其中分为 0，1，2，3，4 这四种状态（0 未初始化，1 载入/正在发送请求 2 载入完成/数据接收，3 交互/解析数据，4 接收数据完成），当状态为 4 的时候也就是接受数据完成的时候，这时候可以通过实例的 status 属性判断这个请求是否成功

var xhr = new XMLHttpRequest(); 
xhr.open('get', 'aabb.php', true); 
xhr.send(null); 
xhr.onreadystatechange = function() { 
	if(xhr.readyState==4) { 
		if(xhr.status==200) { 
			console.log(xhr.responseText);
		}
	}
}

使ajax 请求按照队列顺序执行，通过调用递归函数：

//按顺序执行多个 ajax 命令，因为数量不定，所以采用递归
function send(action, arg2) {
  //将多个命令按顺序封装成数组对象，递归执行
  //利用了 deferred 对象控制回调函数的特点
  $.when(send_action(action[0], arg2))
  .done(function () {
    //前一个 ajax 回调函数完毕之后判断队列长度if (action.length > 1) {
    //队列长度大于 1，则弹出第一个，继续递归执行该队列 
    action.shift(); send(action, arg2);
  }
  }).fail(function (){ 
  //队列中元素请求失败后的逻辑
  //
  //重试发送
  //send(action, arg2);
  //
  //忽略错误进行下个
  //if (action.length > 1) {
  //队列长度大于 1，则弹出第一个，继续递归执行该队列
  //	action.shift();
  //	send(action, arg2);
  //}
  });
}

//处理每个命令的 ajax 请求以及回调函数function send_action(command, arg2) {
var dtd = $.Deferred();//定义 deferred 对象
$.post( "url",{
  command: command,
  arg2: arg2
}).done(function (json) { json = $.parseJSON(json);
  //每次请求回调函数的处理逻辑
  //逻辑结束dtd.resolve();
  
  }).fail(function (){
  	//ajax 请求失败的逻辑dtd.reject();
});
return dtd.promise();//返回 Deferred 对象的 promise，防止在外部

4、写出原生 Ajax

Ajax 能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术，ajax 的使用分为：

1、创建XMLHttpRequest 对象var xhr = new XMLHttpRequest();

2、向服务器发送请求，使用 xmlHttpRequest 对象的open 和send 方法，

3、监听状态变化，执行相应回调函数

var xhr = new XMLHttpRequest(); 
xhr.open('get', 'aabb.php', true); 
xhr.send(null); 
xhr.onreadystatechange = function() { 
	if(xhr.readyState==4) { 
		if(xhr.status==200) { 
			console.log(xhr.responseText);
		}
	}
}

5、如何实现一个 ajax 请求？如果我想发出两个有顺序的 ajax 需要怎么做？

AJAX 创建异步对象XMLHttpRequest 操作XMLHttpRequest 对象

（1） 设置请求参数（请求方式，请求页面的相对路径，是否异步）。

（2） 设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针。

（3） 获取异步对象的 readyState 属性：该属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行。

（4） 判断响应报文的状态，若为 200 说明服务器正常运行并返回响应数据。

（5） 读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

发出两个有顺序的ajax，可以用回调函数，也可以使用Promise.then 或者async 等。

6、Fetch 和 Ajax 比有什么优缺点？

promise 方便异步，在不想用 jQuery 的情况下，相比原生的ajax，也比较好写。

7、原生 JS 的 ajax

AJAX 创建异步对象XMLHttpRequest 操作XMLHttpRequest 对象

（1） 设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2） 设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针

（3） 获取异步对象的 readyState 属性：该属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行。

（4） 判断响应报文的状态，若为 200 说明服务器正常运行并返回响应数据。

（5） 读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。