Ajax的异步交互步骤

同步交互

就是指发送一个请求，须要等待返回，而后才可以发送下一个请求，同步交互至关于排队，轮到下一个的状况会由于前一个而有所不一样

• 优点

1.同步交互维持了浏览器原有的前进和后退机制
2.若是后面逻辑的执行依靠前面逻辑执行的结果的话，同步交互在这方面不会出现问题
3.同步交互对搜索引擎比较友好

• 劣势

1.用户操做必须等待上次的结果返回，才能操做下一次
2.同步交互每次与服务器进行数据交换的时候，都会全部数据所有更新
3.同步交互对带宽形成的压力相比异步更大

异步交互

就是指发送一个请求，不须要等待返回，随时能够再发送下一个请求，同步交互与异步交互的区别在于同步交互须要等待结果，而异步交互不须要等待

• 优点

1.用户操做无需像同步交互必须等待结果
2.异步交互只需与服务器交换必要的数据内容，而不是将全部数据所有更新
3.异步交互对带宽形成的压力相比同步交互更小
4.经过Ajax实现异步交互互不须要任何第三方插件，只要浏览器支持JavaScript语言便可实现

• 劣势

1.异步交互破坏了浏览器原有的前进和后退机制
2.若是后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会形成问题
3.Ajax实现异步交互对搜索引擎支持较弱
4.Ajax实现异步交互会引发一些Web安全问题，例如SQL注入攻击、跨站点脚本攻击等问题

Ajax

Ajax是Asynchronous JavaScript XML缩写，Ajax自己并非一个新技术，而是一个新术语，用来描述一种使用现有技术集合的‘新’方法
当使用Ajax模型。HTML页面可以快速的将数据逐步更新显示在用户界面上，不须要重载(刷新)整个页面，使HTML页面能更快速的对用户操做进行反馈、
尽管Ajax中的‘X’表明XML，但因为JSON的许多优点，目前JSON的使用比XML更加广泛，JSON和XML都被用于在Ajax模型中封装数据

• Ajax涉及的技术领域

HTML，CSS，JavaScript，DOM，XML，XMLHttpRequest对象

• Ajax的工做原理：

1.操做HTML页面
2.调用Ajax，绑定相关的监听事件
3.请求数据
4.响应结果
5.将响应回来的结果更新到页面
6.经过页面展现更新的数据给用户

• Ajax的核心对象

实现Ajax异步交互的核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能
XMLHttpRequest对象提供了一个经过URL来获取数据的简单方式，而且不会使整个页面刷新，这让网页只更新一部分页面而不会打扰到用户
XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。现在，该对象已经被W3C组织标准化，经过该对象，能够很容易获得一个URL上的资源数据，尽管名字里有XML，但XMLHttpRequest对象能够获得全部类型的数据资源，并不局限与XML格式的数据

• 实现Ajax的执行步骤

1.建立Ajax的核心对象XMLHttpRequest对象
2.经过XMLHttpRequest对象的open()方法与服务器端创建链接
3.构建请求所需的数据内容，并经过XMLHttpRequest对象的send()方法发送给服务器端
4.经过XMLHttpRequest对象的onreadystatechange事件监听服务器端的通讯状态
5.接收并处理服务器端向客户端响应的数据结果
6.将处理结果更新到HTML页面中

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){}
    }
    xhr.open('get',url路径)；
    /*若是是get的话，那么send里面的参数为null，把要发送到服务器的数据写在url路径后面
       若是是post的话，那么send里面的参数为要发送到服务器的数据
    */
    xhr.send(null)；
}

• 关于onreadystatechange事件

在XMLHttpRequest对象的readyState属性表示客户端请求状态
0：UNSENT(未打开)：open()方法还未被调用
1：OPENED(未发送):open()方法已经被调用
2:HEADERS_RECEIVED(已获取响应头)：send()方法已经被调用，响应头和响应状态已经返回
3：LOADING(正在下载响应体)：响应体下载中；responseText中已经获取了部分数据
4:DONE(请求完成)：整个请求过程已经完毕
接收服务器端向客户端响应的数据结果，须要在整个请求过程完毕以后进行，也就是说：readyState属性的值为4时，才能够接收完整的服务器端响应数据

• 监听服务器端通讯状态

仅仅经过XMLHttpRequest对象的readyState获取请求状态不能保证正确的接收服务器端响应的数据结果，还须要经过XMLHttpRequest对象的status属性验证返回的状态码为200，说明请求成功

xhr.onreadystatechange=function(){
    //判断请求过程是否完毕
    if(httpRequest.readyState===4){
        //判断请求是否成功
        if(httpRequest.status===200){
        //接收服务器端响应的数据结果
        }
    }
}

• 处理服务器端响应数据

处理服务器端响应数据是经过XMLHttpRequest对象提供如下属性完成：
1.httpRequest.responseText属性：将服务器端响应做为文本字符串返回
2.httpRequest.responseXML属性：将响应做为一个XMLDocument对象返回，该对象可使用JavaScript DOM进行解析
目前做为客户端与服务器端之间交互的数据格式更多为JSON格式，而不是XML格式。因此XMLHttpRequest对象的responseXML属性使用率逐渐下降

• GET请求

Ajax异步交互中使用GET请求方式的话，须要注意一下几个问题：
1.将构建的请求数据添加到open()方法中的url地址中

//name=zhangsan&paw=456表示请求数据
httpRequest.open('GET','http://baidu.com?name=zhangsan&paw=456',true);

2.将发送请求数据的send()方法中参数设置为null值

httpRequest.send(null);

• POST请求

Ajax异步交互中使用POST请求方式的话，须要注意如下几个问题
1.调用send()方法以前，须要经过XMLHttpRequest对象的setRequestHeader()方法设置请求头部信息

//header:将要被赋值的请求头名称
//value:给指定的请求头部赋值
httpRequest.setRequestHeader(header,value);
/*例如：httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');*/

2.经过XMLHttpRequest对象的send()发送请求数据