关于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);

                         }

                     }

                 };

             }

         })();

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

巴特西

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

最新文章

热门文章