原生js ajax超时处理,原生js里的ajax

在说ajax之前需要先了解两个概念，那就是js语言中的同步和异步

1:同步是什么 (Synchronous)

在一个任务进行时，不能开启其他的任务

同步访问：浏览器在想服务器发送请求的时候，只能等待服务器的响应，不能够做其他的事

使用场景：

1：地址栏输入url,访问页面

2：a标签的跳转

3：from表单的提交

2:异步的概念 (Asynchronous)

在一个任务进行时，可以进行其他的任务

异步访问：浏览器在想服务器发送请求的时候，用户还能在页面上做其他操作

使用场景：

1：用户名注册的验证

2：百度的搜索建议

3：股票软件

3什么是AJAX

Asynchronous javascript and xml (异步的js和xml)

注：xml是一种数据承载方式，如今被json取代

原理：使用js提供的异步对象XMLHttpRequest异步的向服务器发送请求

并且接受服务器响应回来的数据

4使用ajax

ajax从发送数据到接受数据一共分为4个步骤

(1)：创建异步对象

var xhr=new XMLHttpRequest();

console.log(xhr);//会打印出xml对象

(2)：打开连接创建请求

xhr.open('get','http://127.0.0.1:8080/login',true);

open()里边第一个参数为请求方法(必须为字符串)，第二个为服务器ip地址(也必须为字符串)

第三个布尔值表示是否使用异步(true为是/false则为否)

(3)：发送请求

xhr.send();

send()里为请求参数，post方法为fromdata

get方法则没有可以不写，或者填入null

(4)：绑定监听接受响应数据

第4步相较前3步会复杂一点，也是原生ajax的难点

再说ajax第4步之前，要先了解几个xml对象属性(第一步会在控制台打印出来)

(1 xhr.readyState属性(表示xhr对象的请求状态，一共5个状态)

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中(通常现在可以从响应中获取内容头)。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了

(2 onreadystatechange属性

请求状态改变的事件触发器

(3 responseText属性

服务器响应的文本内容

(4 status属性

服务器返回的http状态码 200为成功(状态码内容较多，请自行查阅相关文档)

以下就是第4步的内容

request.onreadystatechange = function () { // 状态发生变化时，函数被回调

if (request.readyState === 4) { // 成功完成

// 判断响应结果:

if (request.status === 200) {//状态码为200时

// 成功，通过responseText拿到响应的文本:

return success(request.responseText);

} else {

// 失败，根据响应码判断失败原因:

return fail(request.status);

}

} else {

// HTTP请求还在继续...

}

}

虽然现在基本没有人用原生AJAX发送请求了，但vue2.0之后如axios也是基于xml对象进行的封装所以还是有必要进行了解其原理