关于ajax同步异步~

问题：以一个例子讲述ajax异步实现与作用

ajax不是一种新的编程语言，而是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助；具有同步、异步两种请求方式。通常情况下异步请求使用更多，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

同步：事情一件一件来，只有一条线。

异步：多件事情一起做，有多条线。

一 生活化例子

• 异步过程示意图

  

• 同步过程示意图

• 

二 代码执行例子

• 异步过程示意图

• 同步过程示意图

  

 

三 ajax实现方式

1. 创建异步对象XMLHttpRequest

2. 操作XMLHttpRequest 对象

（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2）使用 onreadystatechange 设置回调函数

（3）发送请求，通过readyState 属性监听ajax请求状态

（4）判断响应报文的状态，若为200说明服务器正常运行并返回响应数据

var ajax_request= function () {
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();// 标准浏览器
                }else{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');//非标准浏览器IE6/7/8
                }
                var type = 'post';
                var myurl = 'http://yapi.demo.qunar.com/mock/34006/ajaxjson';
                var async = true;//true表示异步，false表示同步
                xhr.onreadystatechange=function(){//监听请求结果
                    if(xhr.readyState == 4)//浏览器通过readyState参数监听和服务器的交互情况
                    {
                        console.log('...')
                        if(xhr.status==200)//status参数表示http请求的状态码,用来判断请求是否成功
                        {
                            console.log(xhr)//请求完成后的回调函数
                        }else{
                                    alert(oAjax.status+" NotFound");
                        }
                    }
                }
                xhr.open(type,myurl,async);//设置请求参数
                var param = JSON.stringify({
                        "user":$("#registerCity").val()
                })
                xhr.send(param);//发送请求
​
    };

四 ajax应用场景及作用

ajax 是一项用于异步拉取数据的技术，这对需要延迟加载数据和触发式加载数据的页面有很大益处

应用场景：搜索联想词提示、视频网站中文字与海报的异步加载、地图应用等等。

（代码演示）

五 ajax优缺点

优点：

1. 无刷新更新数据。 ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得web应用更为迅捷地响应用户交互，并避免了在网络上发送冗余信息，减少用户等待时间，优化用户体验。

2. 异步与服务器通信。 ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了客户端和服务器之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

3. 基于标准被广泛支持。 ajax基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。

4. 界面与应用分离。 ajax使web中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的web应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点：

1. ajax破坏浏览器back机制。 在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。但用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在ajax应用中无法实现。

2. ajax增大网络数据的流量。 ajax会增大网络数据的流量，从而降低整个系统的性能。

3. ajax不能很好支持移动设备。 一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如在手机的浏览器上打开采用ajax技术的网站时是不支持的。