ajax的概念及作用
在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。
Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。
Ajax是指一种异步交互的技术，可以实现页面的局部更新。Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 前端通过与服务器进行少量数据交换，Ajax可以使网页实现异步更新
单线程
JavaScript 语言和执行环境是单线程。即同一时间，只能处理一个任务。
具体来说，所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个。所有的任务都需要排队。
同步任务和异步任务
如果当前正在执行的任务执行完成前，它就会阻塞其他正在排队的任务。为了解决这个问题，JS 在设计之初，将任务分成了两类：同步任务、异步任务。
-
同步任务：在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行下一个任务。
-
异步任务：不进入主线程、而是进入任务队列（Event Queue）的任务，该任务不会阻塞后面的任务执行。只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
为什么要使用AJAX
- 更自然、流畅的用户体验，对用户的操作即时响应
- 在不中断用户操作的情况下与Web服务器进行通信
- 更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果
- 通过局部更新页面降低网络流量，提高网络的使用效率
前端使用异步编程的场景
什么时候需要等待，就什么时候用异步。常见的异步场景如下：
- 1、事件监听（比如说，按钮绑定点击事件之后，用户爱点不点。我们不可能卡在按钮那里，什么都不做。所以，应该用异步）
- 2、回调函数：
- 2.1、定时器：setTimeout（定时炸弹）、setInterval（循环执行）
- 2.2、ajax请求。
- 2.3、Node.js 中的一些方法回调。
- 3、ES6 中的 Promise、Generator、async/await
现在的大部分软件项目，都是前后端分离的。后端生成接口，前端请求接口。前端发送 ajax 请求，向后端请求数据，然后等待一段时间后，才能拿到数据。这个请求过程就是异步任务。
事件循环机制（重要）
同步代码和异步代码最终都要通过主线程进行编译处理
同步代码都存储在:执行栈
异步代码都存储在:任务队列
异步任务又分为宏任务和微任务
宏任务大概包括：script（整块代码）、setTimeout、setInterval、I/O、UI交互事件、setImmediate（node环境）
微任务大概包括：new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、 process.nextTick（node环境）
当执行异步代码时，有微则先微，无微则宏。
执行顺序如下：
-
同步任务：进入主线程后，立即执行。
-
异步任务：会先进入 Event Table；等时间到了之后，再进入 Event Queue，然后排队（为什么要排队？因为同一时间，JS 只能执行一个任务）。比如说，
setTimeout(()=> {}, 1000)这种定时器任务，需要等一秒之后再进入 Event Queue。 -
当主线程的任务执行完毕之后，此时主线程处于空闲状态，于是会去读取 Event Queue 中的任务队列，如果有任务，则进入到主线程去执行。
多次异步调用的顺序
- 多次异步调用的结果，顺序可能不同步。
- 异步调用的结果如果存在依赖，则需要通过回调函数进行嵌套。
发送 Ajax 请求的五个步骤：
（1）创建异步对象，即 XMLHttpRequest 对象。
（2）使用 open 方法设置请求参数。open(method, url, async)。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。
（3）发送请求：send()。
（4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）服务端响应，获取返回的数据。
XMLHttpRequest 对象详解
发送请求
发送请求的方法：
open(method, url, async);
参数解释：
-
method：请求的类型；GET 或 POST
-
url：文件在服务器上的位置
-
async：true（异步）或 false（同步）
另外还有个方法：（仅用于 POST 请求）
send(string);
POST 请求时注意
如果想让 像 form 表单提交数据那样使用 POST 请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：
xmlhttp.open('POST', 'ajax_test.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send('name=smyhvae&age=27');
onreadystatechange 事件
注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。
readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
-
0: 请求未初始化
-
1: 服务器连接已建立
-
2: 请求已接收
-
3: 请求处理中
-
4: 请求已完成，且响应已就绪
status：
-
200: "OK"。
-
404: 未找到页面。
在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为 200 时，表示响应已就绪。
服务器响应的内容
-
responseText：获得字符串形式的响应数据。
-
responseXML：获得 XML 形式的响应数据。
如果响应的是普通字符串，就使用 responseText；如果响应的是 XML，使用 responseXML。
手写 Ajax
get 请求：
//【发送ajax请求需要五步】
//（1）创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
//（2）设置请求的参数。包括：请求的方法、请求的url。
xmlhttp.open('get', '02-ajax.php');
//（3）发送请求
xmlhttp.send();
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
xmlhttp.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//（5）服务端相应：如果能够进入这个判断，说明数据请求成功了
console.log('数据返回成功：' + JSON.stringify(xmlhttp.responseText));
// 伪代码：按业务需要，将接口返回的内容显示在页面上
// document.querySelector('h1').innerHTML = xmlhttp.responseText;
}
};
post 请求：
//（1）异步对象
var xmlhttp = new XMLHttpRequest();
//（2）设置请求参数。包括：请求的方法、请求的url。
xmlhttp.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//（3）发送请求
xmlhttp.send('name=fox&age=18');
//（4）注册事件
xmlhttp.onreadystatechange = function () {
//（5）服务端相应
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
封装 Ajax 请求（重要）
上面的代码，执行顺序很好理解，但在实战开发中，是不会这么写的。假如你的页面中，需要调十次接口，那岂不是要手写十遍 Ajax 请求？这样会导致大量的重复代码。
所以，我们需要把重复代码封装成一个公共函数，然后通过回调函数处理成功和失败的逻辑。
封装 Ajax 请求的代码如下：(get 请求为例)
// 封装 Ajax为公共函数：传入回调函数 success 和 fail
function myAjax(url, success, fail) {
// 1、创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
// 兼容IE5、IE6浏览器。不写也没关系
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2、发送请求
xmlhttp.open('GET', url, true);
xmlhttp.send();
// 3、服务端响应
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var obj = JSON.parse(xmlhttp.responseText);
console.log('数据返回成功：' + obj);
success && success(xmlhttp.responseText);
} else {
// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。
fail && fail(new Error('接口请求失败'));
}
};
}
// 单次调用 ajax
myAjax('a.json', (res) => {
console.log(res);
});
// 多次调用 ajax。接口请求顺序：a --> b --> c
myAjax('a.json', (res) => {
console.log(res);
myAjax('b.json', (res) => {
console.log(res);
myAjax('c.json', (res) => {
console.log(res);
});
});
});
学会了封装 get 请求之后，封装 post请求也是类似的写法。
Ajax 请求：get 请求举例
（1）index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id="btnAjax" />
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 这里直接使用上面封装的 myAjax() 方法即可
myAjax('02-ajax.php', (res) => {
console.log(res);
console.log('数据返回成功');
// 显示在页面上
document.querySelector('h1').innerHTML = res;
// alert(xhr.responseText);
});
};
</script>
</body>
</html>
（2）02-ajax.php：
<?php
echo 'smyhvae';
?>
效果如下：
Ajax 多个接口的嵌套请求
我们在做异步任务的时候，经常会涉及到多个接口的嵌套请求。比如说，接口 1 请求完成后，需要根据接口 1 的数据请求接口 2；接口 2 请求完成后，需要根据接口 3 的数据请求接口 3，以此类推。
需求描述：
-
请求接口 1，根据用户名获取用户 id
-
请求接口 2，根据用户 id 获取用户的年龄、性别等信息。
代码实现思路：
myAjax('http://localhost:8888/php/user.php?name=千古', (userInfo) => {
// 根据第一个接口返回的 userInfo.id，继续请求第二个接口
myAjax(`http://localhost:8888/php/info.php?id=${userInfo['id']}`, (res) => {
console.log(response);
});
});
我们在实战开发中，经常会涉及到接口请求之间的依赖：需要上一个接口请求返回的数据，来发送本次请求。这种场景经常遇到，需要记住。
但这种层层嵌套的代码，会导致回调地域的问题，也不利于维护。我们在后续的 ES6 章节中，会讲解 Promise，它是一种更优雅的异步任务解决方案。
标签：异步,xmlhttp,请求,32,任务,接口,Ajax From： https://www.cnblogs.com/qianfanqf/p/16982774.html