Ajax概念、原理（2018.7.11后续： Promise对象实现Ajax操作例子）

一本正经的介绍

AJAX：Asynchronous JavaScript and XML （异步的 JavaScript 和 XML）
Ajax 不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。

1.同步与异步

Ajax三步骤：

• 运用HTML和CSS实现页面，表达信息；
• 运用XMLHttpRequest和web服务器进行数据的异步交换；
• 运用JavaScript操作DOM，实现动态局部刷新；XMLHttpRequest对象：后台和服务器交换数据

打个比方比如填写用户注册表单：

同步：当用户填写完信息之后，全部提交给服务器，等待服务器的回应，是一次性全部的。这就可能造成，提交后发现某处错误 需要重新返回填写表单。

异步：当用户填写完一条信息之后，这条信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，如果填写错，则页面提醒表单错误，节省了用户的时间，提高了用户的体验。

XMLhttpRequest对象来实现这一功能，也需要javascript来操作DOM实现局部的信息更新。

---

2. Ajax-XMLHttpRequest对象创建

处理兼容性，代码如下：

var request;
if(window.XMLHttpRequest){
  //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
   request = new XMLHttpRequest(); 
}else{
  // IE6, IE5 浏览器执行代码
   request = new ActiveXObject("Microsoft.XMLHTTP"); 
}

然后发现一个问题就是在日常接触中，new出一个ActiveXObject对象括号里的Msxml2.XMLHTTP，还有编辑器默认的是Microsoft.XMLHTTP

这里注意一下 new ActiveXObject(“Msxml2.XMLHTTP“); 和
new ActiveXObject(‘Microsoft.XMLHTTP‘); 的区别。

百度了下大概是：
Msxml2.XMLHTTP是高版本,受msxml3.dll+支持
Microsoft.XMLHTTP是低本,一般是msxml2.6以下版本使用

---

3 Ajax-HTTP请求

一个完整的【HTTP请求】过程有7个步骤：

1>建立TCP连接（TCP即传输控制协议）
2>Web浏览器向Web服务器发送请求命令
3>Web浏览器发送请求头信息
4>Web服务器应答
5>Web服务器发送应答头信息
6>Web服务器向浏览器发送数据
7>Web服务器关闭TCP连接

HTTP请求一般由4部分组成
1.HTTP请求的方法或动作，post或get
2.正在请求的URL
3.请求头，包含一些客户端环境信息，身份验证信息等
4.请求体(请求正文)，包含要发送的一些字符串信息,表单信息等等
//请求头和请求体之间有一个空行，表面请求头已经结束

举个例子 ~~~~

【HTTP响应】
一般由3部分组成：
①一个数字或文字组成的状态码，用来显示请求是成功还是失败
②响应头，和请求头一样包含许多有用信息，如服务器类型、日期时间、内容类型和长度等
③响应体，即响应正文//响应头和响应体之间有空行

【HTTP状态码】
1XX：信息类，表示收到Web浏览器请求，正在进一步处理中
2XX:成功，表示用户请求被正确接收
3XX:重定向，表示请求没有成功，客户必须采取进一步动作
4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在
5XX:服务器错误，表示服务器不能完成对请求的处理，如：500

————————————–这是一条分割线——————————————–

这里要说明下GET和POST的区别

get请求用户获取信息，无法修改，一般用来查询，所以不会影响数据本身，但发送的信息是可见的。所以用着发送用户名和密码提交的不安全的。

所有的变量名和值都显示在UL列表里，也是说get请求用ul li列表来传递参数，所以get请求发送的字符也有了限制。

post请求是向服务器发送一些信息，一般用来修改服务器信息，发送的信息是不可见的，相对来说安全性高一点。

总之 ，get一般用来做查询数据，post用来做发送表单数据，增添 删除 修改…

---

4 Ajax-XMLHttpRequest发送请求

XMLHttpRequest发送请求有两个方法：

open(method,url,async) //准备请求

method：规定HTTP发送请求的方式是get还是post,不区分大小写，一般来说用大写
url：请求地址(相对地址或绝对地址)
async:同步/异步(false/true)，默认是异步也就是true，可以不用填写

send(string) //发送请求

发送到服务器（该参数可以填或者不填—–get方法不填或填null，post:一般要填）

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

setRequestHeader(header,value) //向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

图中 Content-type”告诉服务器是表单格，页面表单数据向服务端传输时的编码方式 application/x-www-form-urlencoded

---

5.Ajax-XMLHttpRequest取得响应数据

监听readyState属性，请求过程
readyState属性的变化代表服务器响应的变化
0：请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到了响应主体
4：请求已完成，且响应已就绪，也就是响应完成了

建立异步请求的过程4个步骤：

var request = new XMLHttpRequest();  //创建一个XMLHttpRequest对象
request.open('GET',url,true); //调用open方法，准备请求
request.sell(); //调用sell方法，发送请求传递一些参数，get请求可忽略
request.onreadystatechange = function(){ //过程进行监听,响应请求成功时，发生事件
   if(request.readState === 400 && request.status == 2){
       request.responseText;
    }
}

---

后续：ES6 Promise对象实现异步加载

最近学习深入浅出ES6中Promise一章里提到关于Promise对象实现Ajax操作例子。补充一下

 var getJSON = function(url){
     var promise = new Promise(function(resolve,reject){
         var request = new XMLHttpRequest(); //创建一个XMLHttpRequest对象
         request.open('GET',url);  //准备请求
         request.onreadystatechange = handler; //过程进行监听,响应请求成功时，发生事件
         request.responseType = 'json'; //请求的数据类型
         request.setRequestHeader('Accept','application/json');//向请求添加 HTTP 头。
         request.send();//发送请求,get请求不填或填null

         function handler(){
            if(this.readyState !== 4){ //如果请求失败,直接中断
                return;
            }
            if(this.status === 200){  //如果状态码请求被正确接收
               resolve(this.response); //调用resolve回调函数   
            }else{ //否则抛出错误
                reject(new Error(this.statusText));
            }

         };

     });

      return promise;  //返回结果
    };

    getJSON("/posts.json").then(function(json){
         console.log('contents:' + json);
    },function(error){
         console.error('出错了', error);
    }
)

ES6Promise对象章节

如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；