一个简单的Ajax开发框架

根据Ajax与XMLHttpRequest对象一文的介绍，我们可以开发一个简单的Ajax框架供以后开发应用。
首先要知道Ajax的开发流程：
1：初始化XMLHttpRequest,这一步要考虑跨浏览器的问题。
2：设置XMLHttpRequest对象的onReadyStateChange属性，指定服务器返回响应数据时要调用的回调函数，即指定响应处理函数，
3：调用XMLHttpRequest对象的open方法，创建http请求。
4：调用XMLHttpRequest对象的setResouceHeader等方法，设置必要的http请求头信息。
5：调用XMLHttpRequest对象的send方法，发送之前创建的http请求。
6：根据XMLHttpRequest对象的open方法参数，决定等待或者不等待服务器回响应数据。如果服务器返回响应数据，则将控制权交给之前设置回调函数。

了解上面的流程后，我们来一步步的解析和示范，形成一个发送和接收XMLHttpRequest请求的Ajax应用程序框架。

//定义XMLHttpRequest对象实例
var http_request = false;
//定义创建跨浏览器XMLHttpRequest方法
function createXMLHttpRequest()
{
    http_request = false;
    //开始初始化XMLHttpRequest对象
    if(window.XMLHttpRequest) { //Mozilla 浏览器
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {//设置MiME类别
            //有些版本的浏览器在处理服务器返回的未包含XML mime-type头部信息的内容时会报错，因此，要确保返回的内容包含text/xml信息。
            http_request.overrideMimeType("text/xml");
        }
    }
    else if (window.ActiveXObject) { // IE浏览器
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    if (!http_request) { // 异常，创建对象实例失败
        window.alert("不能创建XMLHttpRequest对象实例.");
        return false;
    }
}
//定义可复用的http请求发送函数
function send_request(method,url,content,callback) {//请求方式，请求目标，内容，处理函数名称
    
    //第一步：初始化XMLHttpRequest
    createXMLHttpRequest();
    
    //第二步：指定响应处理函数
    http_request.onreadystatechange = callback;//注意这里不用加括号

    //第三步：向服务器发出http请求　调用 open和send方法
    // 确定发送请求的方式和URL以及是否异步执行下段代码
    if(method.toLowerCase()=="get") {
        http_request.open(method, url, true);//第三个参数　为　是否异步
    }
    else if(method.toLowerCase()=="post") {
        http_request.open(method, url, true);
        http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这个位置不能放错
    }
    else {
        window.alert("http请求类别参数错误。");
        return false;
    }

    http_request.send(content);
    //send方法如果POST方式发出的话，可以是任何想传给服务器的内容，不过与form一样，如果要传的是文件或者POST内容给服务器，在调用open方法之后send方法之前，必须先调用XMLHttpRequest对象的setRequestHeader方法，修改http请求头信息中的MIME类别。
}
    //最后一步　就是处理服务器返回信息的方法了，由于每个页面的应用不同，所以应该将具体方法写在相应的页面中。这写一个示例：
    
    // 处理返回文本格式信息的函数　示例
function processTextResponse() {
    if (http_request.readyState == 4) { // 判断对象状态（4表示完成）
        if (http_request.status == 200) { // 200　信息已经成功返回，开始处理信息
            //这里面即是具体的处理代码
            alert("Text文档响应。");
        } else { //页面不正常
            alert("您所请求的页面有异常。");
        }
    }
}　

//我们将以上文件保存为ajax.js文件

//然后在以后的每个需要应用Ajax的页面中引入
<script language="javascript" src="ajax.js"></script>

这个Ajax应用程序开发框架现在还是一个简单的初步的框架，其目的就是通过这个框架的示范，形式一个使用Ajax的基本方法和轮廓。 关于如何使用这个框架，将在以后的文章中写出

补充：

如果使用POST方法传递。则content一般使用XML的形式。例如：

function login()
{
 
    var xml = "<root><userName>123</userName><pwd>中国</pwd></root>";
    send_request("post","/StockSacChat/ChatHander.aspx",xml,result);
}
function result()
{
     if (http_request.readyState == 4) { 
        if (http_request.status == 200) {
         
            alert(http_request.responseText);
        } else { //页面不正常
            alert("页面有异常。");
        }
    }
}

而相应的后台代码 ASP.NET中可以如下获得

private void Page_Load(object sender, System.EventArgs e)
{ 
    XmlDocument xmlDoc = new  System.Xml.XmlDocument();
    xmlDoc.Load(Request.InputStream);
    //得到root所有子节点
    XmlNodeList xnl=xmlDoc.SelectSingleNode("root").ChildNodes;
    
    Response.Write(xnl.Item(0).InnerText);//输出userName值
}