ajax基本原理及工作流程

1.Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写

Ajax 应用程序所用到的基本技术：
HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 
JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。 

DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。 文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

从上面可以看出,Ajax不是什么新的技术,而是几个老的技术通过新的方法结合起来,从而实现了新的效果!很多事物都是多元化的,可以说Ajax是一个新技术，也可以说Ajax是一个新的思路，一个新的架构

2. Ajax的基本工作原理：

Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。

3. XMLHttpRequest 对象：

open()：建立到服务器的新请求。 

send()：向服务器发送请求.

abort()：退出当前请求。 

readyState：提供当前 HTML 的就绪状态。 

responseText：服务器返回的请求响应文本。 

由于前两年的浏览器大战，使得各种浏览器获得 XMLHttpRequest 对象采用的方法有所不同。

支持多种浏览器的方式创建 XMLHttpRequest 对象

4. Ajax中的请求/响应

发出请求：Ajax 应用程序中基本相同的流程：
1. 从 Web 表单中获取需要的数据。 
2. 建立要连接的 URL。 
3. 打开到服务器的连接。 
4. 设置服务器在完成后要运行的函数。 
5. 发送请求。

5. 处理响应：

readyState可能返回的值：

0：请求未初始化（还没有调用 open()）。 

1：请求已经建立，但是还没有发送（还没有调用 send()）。 

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 

4：响应已完成；您可以获取并使用服务器的响应了。 

必须知道两点：

1.什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。 

2.服务器将把响应填充到 xmlHttp.responseText 属性中

 

6. 简单总结的Ajax的工作流程：

javascript获得要向服务器段传递的参数或变量，然后利用创建的XMLHttpRequest 对象发送给服务器段，如果服务器端接受数据并返回数据，则保存在responseText 属性中，最后通过javascript修改DOM，从而实现在客户端无刷新的修改数据。

返回的数据类型为：XML

具体流程：

对象初始化－＞发送请求－＞服务器接收－＞服务器返回－＞客户端接收－＞修改客户端页面内容

6.1对象初始化

由于各个浏览器对XMLHttpRequest对象的支持存在差异，这种差异主要体现在各个浏览器对这个对象的创建方式上。根据浏览器对XMLHttpRequest对象的支持的方式不同，可以将浏览器分为两大阵营：第一个阵营是IE5，IE6浏览器；第二个阵营是IE7以上，FireFox,Opera,Safari等浏览器。幸运的是，这两类浏览器仅仅只是在创建XMLHttpRequest对象时的方式不同，创建了XMLHttpRequest对象之后，其余代码则兼容各类浏览器。

第一阵营创建方式：

var  oHttp = new ActiveXObject(“Microsoft.XMLHttp”);

此方法创建了一个最低版本的XMLHttpRequest对象。Microsoft的XMLHttpRequest对象具有多个不同的版本，但是Microsoft建议采用下列版本之一的XMLHttpRequest对象:

MSXML2.XmlHttp.6.0

MSXML2.XmlHttp.3.0

最新版本的XMLHttpRequest对象不仅包含了对上一版本中bug的修正，还具有更好的执行性能，因此，当我们创建一个XMLHttpRequest对象时，总是希望创建最新版本的XMLHttpRequest对象。

第二阵营创建方式：

var  oHttp = new XMLHttpRequest();

XMLHttpRequest对象与版本无关，要创建XMLHttpRequest对象，只需调用XMLHttpRequest的构造函数，就可以创建当前浏览器支持的XMLHttpRequest对象。

如此，XMLHttpRequest对象的创建就变得比较复杂，因为你不知道客户端浏览器是何种版本。

鉴于此情况，我们可以创建一个方法，用于创建XMLHttpRequest对象。

//通过prototype给类HttpRequest添加方法
HttpRequest.prototype.createXmlHttpRequest = function(){
    if(window.XMLHttpRequest){
        var oHttp = new XMLHttpRequest();
        return oHttp;
    }else if(window.ActiveXObject){
        var versions = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];
        for(var i=0;i<versions.length;i++){
            try{
                var oHttp = new ActiveXObject(versions[i]);
                return oHttp;
            }catch(error){
                //do nothing here
            }
        }
    }
    return null;
}
HttpRequest.prototype.send = function(){
    this.request.send(null);
}

指定响应处理函数。指定当服务器返回信息时客户端的处理方式，相应的处理函数名称赋给XMLHttpRequest 对象的onreadystatechange属性。例如：

httpRequest.onreadystatechange = request_readystatechange;

6.2发送请求

发出HTTP 请求。指定响应处理函数之后，就可以向服务器发出HTTP 请求。这一步调用XMLHttpRequest 对象的open 和send 方法。

httpRequest.open('GET','http://www.example.org/some.php',true);

httpRequest.send(null);

open 的第一个参数是HTTP 请求的方法，为GET或POST。

open 的第二个参数是目标URL。open 的第三个参数如果为True:异步请求；false:同步请求。默认为True

6.3服务器接收

6.4服务器返回

返回的数据类型为：XML

6.5客户端接受

处理服务器返回的信息。首先，它要检查XMLHttpRequest 对象的readyState 值，判断请求的当前状态。

服务器返回信息后，还需要判断返回的HTTP 状态码，确定返回的页面没有错误。所有的状态码都可以在W3C 的官方网站上查到。其中，200 代表页面正常。

function HttpRequest(sUrl,fpCallback){
    this.request = this.createXmlHttpRequest();
    this.request.open("GET",sUrl,true);
    var tempRequest = this.request;
    function request_readystatechange(){
        if(tempRequest.readyState == 4){
            if(tempRequest.status == 200){
                fpCallback(tempRequest.responseText);
            }else{
                document.write("获取数据失败");
            }
        }else{
            //alert("连接失败");
        }
    }
    this.request.onreadystatechange = request_readystatechange;
}

6.6修改客户端页面内容

7.封装XMLHttpRequest类

封装一个类，用来完成XMLHttpRequest对象的创建及信息的发送，这样，异步求情将变得很简单。需要异步请求时，只需实例化一个该类的对象即可。

代码如下：

/**************************封装XMLHttpRequest类*****************************/ 
function HttpRequest(sUrl,fpCallback){
    this.request = this.createXmlHttpRequest();
    this.request.open("GET",sUrl,true);
    var tempRequest = this.request;
    function request_readystatechange(){
        if(tempRequest.readyState == 4){
            if(tempRequest.status == 200){
                fpCallback(tempRequest.responseText);
            }else{
                document.write("获取数据失败");
            }
        }else{
            //alert("连接失败");
        }
    }
    this.request.onreadystatechange = request_readystatechange;
}
//通过prototype给类HttpRequest添加方法
HttpRequest.prototype.createXmlHttpRequest = function(){
    if(window.XMLHttpRequest){
        var oHttp = new XMLHttpRequest();
        return oHttp;
    }else if(window.ActiveXObject){
        var versions = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];
        for(var i=0;i<versions.length;i++){
            try{
                var oHttp = new ActiveXObject(versions[i]);
                return oHttp;
            }catch(error){
                //do nothing here
            }
        }
    }
    return null;
}
HttpRequest.prototype.send = function(){
    this.request.send(null);
}
/**************************封装XMLHttpRequest类*****************************/ 

// 例如：
function checkUsername(sRequestText){
    // 客户端处理代码.. 修改客户端页面内容
    // 注：sRequestText是一个XML类型的数据
}
var username=document.registerForm.username.value;//获取用户名
//异步请求
var url = "http://localhost/zhida/ajaxUsername.php?username="+username;
    //创建一个HttpRequest对象，传递一个URL和一个方法名
var ajaxRequest = new HttpRequest(url,checkUsername);
ajaxRequest.send();

8.返回的是请求页面上输出的内容，并以XML文档的形式存储。