Ajax（Asynchronous JavaScript ）and xml

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方法，允许指定回调函数。