Ajax的异步交互步骤

2019年9月14日 203次阅读 来源: 庄国琳

同步交互

就是指发送一个请求，需要等待返回，然后才能够发送下一个请求，同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同

  • 优势

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()发送请求数据

    原文作者：庄国琳
    原文地址: https://segmentfault.com/a/1190000016402201
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞