About ajax synchronous asynchronous ~

Question: take an example about ajax asynchronous implementation and effect

ajax is not a new programming language, but an asynchronous data request web development technologies, to improve the user experience and performance page helpful; a synchronous, request or asynchronous mode. More generally use asynchronous request, without the need to refresh the page, Ajax asynchronous request by the case load background data, and presented on the page.

Synchronization : things one by one, the only one line.

Asynchronous : do it with more than one thing, a number of lines.

A living example of

• Schematic diagram of asynchronous

  

   

• The synchronization process schematic

• 

   

   

Examples of second code execution

• Schematic diagram of asynchronous

 

 

• The synchronization process schematic

  

   

   

 

Three ajax implementation

1. Create an asynchronous XMLHttpRequest Object

2. Operating XMLHttpRequest object

(1) Parameter setting request (request mode, the relative path to the page request, whether asynchronous)

(2) is provided using a callback function onreadystatechange

(3) transmission request, status request listening readyState property ajax

(4) determining the status response message, if it is running and that the server 200 returns the response data

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技术的网站时是不支持的。