Ajax（Asynchronous JavaScript ）and xml

JavaScript的两种任务执行模式--同步（synchronous）和异步（Asynchronous）

同步模式

JavaScript的执行环境是单线程的，意味着一次只能执行一个任务，若是有多个任务，就必须排队。所以只要有一个任务耗时很长，后面的任务都必须排队等待执行，这样会拖累整个程序的执行。这就是所谓的同步模式。

异步模式

每一个任务有一个或者多个回调函数（callback），前一个任务结束后不是执行后一个任务，而是执行回调函数；后一个任务不等前一个任务执行结束就执行，程序的执行顺序和任务的顺序排序是不一致的、异步的。
优势：
在不须要加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容。

Ajax的工做原理

一、什么是Ajax

Ajax是异步JavaScript和XML，是一种用于异步显示数据的技术，能够在不从新加载整个网页的状况下，对网页的某部分进行更新

二、实现Ajax的步骤

(1) 建立XMLHttpRequest对象,也就是建立一个异步调用对象

(2) 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

2.一、XHR建立对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。
建立 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

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.三、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.四、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 （服务器内部错误） 服务器遇到错误，没法完成请求。

异步模式的四种方法

一、回调函数

二、事件监听

采用事件驱动模式，一个任务执行与否，取决于某个事件是否发生。

三、发布订阅

假定存在一个信号中心，某个任务完成后像信号中心发布一个信号，其余任务能够向信号中心订阅这个信号，从而知道本身何时能够开始执行。

四、Promises对象

给个异步任务返回一个Promises对象，该对象的then方法，容许指定回调函数。