Ajax使用 XMLHttpRequest 异步加载文档的例子

 

上一节我们了解到可以使用 IFrame、XMLDocument、XMLHttpRequest 来达到异步加载数据的目的，并且主要讲述了XMLHttpRequest异步加载的部分工作原理：首先我们通过getXMLHttpRequest()函数创建了XMLHttpRequest对象，接着使用它来向服务器发送请求，并且我们通过使用回调函数来监视并捕获当前请求的状态。

好了，现在我们来开始本小节的正题，完整地使用 XMLHttpRequest 来加载文档。其实呢，上面的代码，基本已经完成了这个任务，重要的就是我们把我们得到的数据(已存储在变量data中)，输出到应用层。这一部分是学习 Ajax非常重要的一节，因为 Ajax就是 异步javascript + XML，所以，异步地来加载文档是非常基础、并且非常重要的。

下面我们来看代码部分。既然我们最重要的已经完成，现在的关键就是data输出到界面，所以，我们来手写这一点，并在后面再付上完整的代码：

首先要创建一HTML的DOM元素：<div id="console"></div>

获得新建DOM元素：var console=document.getElementById("console");

新建一TextNode元素存储data： var txt=document.createTextNode(data); //这里的data就是我们的数据存储变量

将txt添加到console节点上：console.appendChild(txt);

到这里我们就已经完成了所有的任务。

下面是异步加载 data.txt 文档的完整代码，data.txt中请不要使用中文书写，后面我们会讲到原因及其相关内容 ：

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > data.txt中请不要用中文字符 </ title >
     < script type = " text/javascript " >
     var  READY_STATE_UNINITIALIZED = 0 ;
     var  READY_STATE_LOADING = 1 ;
     var  READY_STATE_LOADED = 2 ;
     var  READY_STATE_INTERACTIVE = 3 ;
     var  READY_STATE_COMPLETE = 4 ;
     var  req;
     var  console = null ;
    
     function  sendRequest(url,params,HttpMethod)
     ... {
        if(!HttpMethod)
        ...{
            HttpMethod="GET"; //加载文档要用GET;数据提交用POST
        }
        req=getXMLHttpRequest();
        if(req)
        ...{
            req.onreadystatechange=onReadyStateChange;
            req.open(HttpMethod,url,true);
            req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            req.send(params);
        }
    }
    
     function  getXMLHttpRequest()
     ... {
        var xRequest=null;
        if(window.XMLHttpRequest)
        ...{
            xRequest=new XMLHttpRequest();
        }
        else if(typeof ActiveXObject != "undefined")
             ...{
                xRequest=new ActiveXObject("Microsoft.XMLHTTP");            
             }
        return xRequest;
    }    
     function  onReadyStateChange()
     ... {
        var ready=req.readyState;
        var data=null;
        if(ready==READY_STATE_COMPLETE)
        ...{
            data=req.responseText;
        }
        else
        ...{
            data="Loading...+["+ready+"]";
        }
        toConsole(data);
    }
     function  toConsole(data)
     ... {
        if(console != null)
        ...{
            var newline=document.createElement("div");
            var txt=document.createTextNode(data);
            newline.appendChild(txt);
            console.appendChild(newline);
        }
    }
    window.onload = function ()
     ... {
        console=document.getElementById("console");
        sendRequest("data.txt");
    }     
     </ script >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div id = " console " >
    
     </ div >
     </ form >
</ body >
</ html >

 

我们来看下输出的结果：
=================================================================
Loading...+[1]
Loading...+[1]
Loading...+[2]
Loading...+[3]
Here is some Text from the server [data.txt].
=================================================================

输出的每一行代表对回调函数的一次单独的调用，它在数据加载状态被调用了两次，每次都加载了一块数据，然后又在交互状态被调用了一次，这个时刻，在处理异步请求的同时，控制权返回了用户界面；接着加载结束的时候被调用了一次，最后，在完成的状态被调用了一次，将响应中的文本显示在屏幕上。

这个例子中我们是利用了XMLHttpRequest对象的responseText属性，以文本字符串的形式获得响应中的数据，对于简单的数据来说，这是很有用的，但是如果我们需要从服务器得到更大的结构化的数据集，就可以使用responseXML属性。如果已经将响应的MIME类型正确设置为text/xml，这个属性会返回一个DOM文档，我们可以使用 DOM的属性和函数，比如getElementById() 和 childNodes 来对它进行处理。

下面有一些参考资料，请参考：

CSS  :  www.csszengarden.com
             www.meyerweb.com/eric/css/
             www.blooberry.com
早期使用 IFrame 的Ajax异步解决方案相关请参考：
            http://developer.apple.com/internet/webcontent/iframe.html
如果你还不太熟悉JavaScript的交互式用法，请参考：
            www.w3schools.com/js/js_examples_3.asp

 

Ajax的基础我们已经学完了，欢迎来我的页面做客，我会尽快完成后面的内容的！谢谢大家的来访！