关于AJAX 的交互模型、交互流程及代码示范

AJAX是Asynchronous Javascript And XML（异步JavaScript + XML）。

用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

同步是脚本会停留并等待服务器发送回复然后再继续；异步是脚本允许页面继续其进程并处理可能的回复。同步就是整个页面都刷新，而异步是只刷新用了Ajax技术的部分。

 

AJAX的交互模型：

是Ajax在Browser端引入一个执行引擎，它一边应付user的请求，一边把某些必须交给服务器处理的东西背地里传送给服务器，同时背地里把服务器的结果准备好（接受服务器端的数据），展现给客户的技术模式。这样增强了用户的操作性。

 

AJAX的交互流程：

1、启动，获取XMlHttpRequest对象，这时需要兼容浏览器

2、open，打开url通道，并设置异步传输 

　      open（method，URL，async），method有get或post，URL是请求资源的地址，async表示是否异步请求

         setRequestHeader（header，value）向请求添加http头部

3、send，发送数据到服务器

         send（string），method为post

4、服务器接受数据并处理，处理完成后返回结果

         返回responseText，responseXML形式的数据。一般是responseText

5、客户端接收服务器端返回

        这个阶段有onreadystatechange，readyState，status三个属性

　　  当readyState属性改变时，就会调用onreadystatechange函数

        readyState存有XMLHttpRequest的状态0-4

          0：请求未初始化

          1：服务器连接已建立

          2：请求已接收

          3：请求已处理

          4：请求已完成，且响应已就绪

        status：200ok，404未找到页面

只有当readyState == 4 && status == 200时，表示请求成功

   

 代码示范：

 (function () {
             var btn = document.getElementById('test');
             btn.onclick = function () {
                 ajax('0821-a.txt', function (str) {
                     alert(str);
                 });
             };
             function ajax(url, success, fail) {
                 var xhr = null;
                 if(window.XMLHttpRequest) {
                     xhr = new XMLHttpRequest();
                 }else {
                     xhr = new ActiveXObject('Microsoft.XMLHTTP');
                 }
                 xhr.open('get', url, true);
                 xhr.send(null);
                 xhr.onreadystatechange = function () {
                     if(xhr.readyState == 4) {
                         if(xhr.status == 200) {
                             success(xhr.responseText);
                         }else {
                             fail && fail(xhr.status);
                         }
                     }
                 };
             }
         })();

喜欢就点赞吧<(￣︶￣)>