Ajax基础M

ajax返回的状态

参考回答：
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求

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

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

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

实现一个Ajax

参考回答：
AJAX创建异步对象XMLHttpRequest
操作XMLHttpRequest 对象

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

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

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

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

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

如何实现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，防止在外部修改状态

}

写出原生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.readyState4) {
if(xhr.status200) {
console.log(xhr.responseText);
}
}
}

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

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

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

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

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

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

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

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

** Fetch和Ajax比有什么优缺点？
参考回答：**
promise方便异步，在不想用jQuery的情况下，相比原生的ajax，也比较好写。

原生JS的ajax

参考回答：
AJAX创建异步对象XMLHttpRequest
操作XMLHttpRequest 对象

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

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

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

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

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

JSONP的缺点

JSON只支持get，因为script标签只能使用get请求；
JSONP需要后端配合返回指定格式的数据。

跨域（jsonp，ajax）

JSONP：ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

如何实现跨域

JSONP：通过动态创建script，再请求一个带参网址实现跨域通信。document.domain + iframe跨域：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
location.hash + iframe跨域：a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

window.name + iframe跨域：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。

postMessage跨域：可以跨域操作的window属性之一。

CORS：服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求，前后端都需要设置。

代理跨域：起一个代理服务器，实现数据的转发

dom是什么，你的理解？

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

关于dom的api有什么

节点创建型api，页面修改型API，节点查询型API，节点关系型api，元素属性型api，元素样式型api等