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);
                        }
                    }
                };
            }
        })();

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