JavaScript的两种任务执行模式--同步（synchronous）和异步（Asynchronous）
同步模式
JavaScript的执行环境是单线程的，意味着一次只能执行一个任务，如果有多个任务，就必须排队。因此只要有一个任务耗时很长，后面的任务都必须排队等待执行，这样会拖累整个程序的执行。这就是所谓的同步模式。
异步模式
每个任务有一个或者多个回调函数（callback），前一个任务结束后不是执行后一个任务，而是执行回调函数；后一个任务不等前一个任务执行结束就执行，程序的执行顺序和任务的顺序排序是不一致的、异步的。
优点：
在不需要加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
Ajax的工作原理
1、什么是Ajax
Ajax是异步JavaScript和XML，是一种用于异步显示数据的技术，可以在不重新加载整个网页的情况下，对网页的某部分进行更新
2、实现Ajax的步骤
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
2.1、XHR创建对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
2.2、XHR请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 - method：请求的类型；GET 或 POST url：文件在服务器上的位置(绝对位置或者相对位置） async：true（异步）或 false（同步） |
| send(string) | 将请求发送到服务器。 string：仅用于 POST 请求 |
示例：
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('get','demo_get.html','true');//调用open()方法并采用异步方式
xmlHttp.send(); //使用open()方法将请求发送出去
xmlHttp.onreadystatechange()=>{
if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
}
}
onreadystatechange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
一个简单 POST 请求：
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader() 来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value) 向请求添加 HTTP头 ▪ header: 规定头的名称; ▪ value: 规定头的值
提示：POST请求的特点如下：
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求
为什么使用 Async=true ？
我们的实例在 open() 的第三个参数中使用了 “true”。该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
onreadystatechange事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。
通过把该参数设置为 “false”，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。
2.3、XHR 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
同步处理
xmlHttp.open("GET","demo_get.html",false);
xmlHttp.send();
document.getElementById("target").innerHTML=xmlHttp.responseText;
直接在send()后面处理返回来的数据。
异步处理
异步处理相对比较麻烦，要在请求状态改变事件中处理。
xmlHttp.onreadystatechange=function(){//接收到服务端响应时触发
if(xmlHttp.readyState==4&&xmlHttp.status==200){
document.getElementById("target").innerHTML=xmlHttp.responseText;
}
}
2.4、XHR readyState
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
| status | 200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上(把上面两个状态码也列到下边了)，比较常见的有：
· 200: “OK”
· 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
· 403 （禁止） 服务器拒绝请求。
· 404 （未找到） 服务器找不到请求的网页。
· 408 （请求超时） 服务器等候请求时发生超时。
·500 （服务器内部错误） 服务器遇到错误，无法完成请求。
异步模式的四种方法
1、回调函数
2、事件监听
采用事件驱动模式，一个任务执行与否，取决于某个事件是否发生。
3、发布订阅
假定存在一个信号中心，某个任务完成后像信号中心发布一个信号，其他任务可以向信号中心订阅这个信号，从而知道自己什么时候可以开始执行。
4、Promises对象
给个异步任务返回一个Promises对象，该对象的then方法，允许指定回调函数。