怎样使用AJAX进行WEB应用程序开发
来源: 时间:06-11-28 点击: 点击这里收藏本文
if(window.XMLHttpRequest)
{ request = new XMLHttpRequest();}
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP");} |
五、 发出请求
现在既然你已经创建了你的请求对象，那么你已经为向服务器发出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后，该事件处理器方法将在状态发生变化时作出响应。一旦我们完成请求，我们就开始创建这个方法。打开连接以GET或POST一个定制的URL-在此是一个content.xml，并且设置一个布尔定义-是否你想要进行异步调用。
现在到了发出请求的时间了。在这个示例中，我使用了null，因为我们使用的是GET；为了使用POST，你需要使用下面这个方法发出一个查询串：
request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null); |
六、 定制加载和错误处理消息
你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的时候了。在这个实例中，我针对所有的装载状态代码提供反馈，并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状态，readyState属性包括显示在下表中的一些值。
| 值 |
描述 |
| 0 |
未初始化，对象没有用数据进行初始化。 |
| 1 |
装载中，对象正在装载它的数据。 |
| 2 |
装载结束，对象完成了它的数据的装载。 |
| 3 |
可交互，用户能与对象交互了，尽管它还没有装载结束。 |
| 4 |
完成，对象已经完全被初始化。 |
W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:
·200:请求成功了。
·404:服务器没有找到与所请求的文件相匹配的任何东西。
最后，我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意，我在定位我们前面在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:
if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request...";}
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response...";}
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded...";}
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready...";}
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定向到另外一个页面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
} |
当状况代码为200时，这意味着请求成功。下面开始进行响应了。
七、分析响应
当你准备好分析来自请求对象的响应时，真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的，在开发期间，可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点，首先使用你创建的请求对象，定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定位到documentElement-它检索一个到XML响应的根结点的参考。
| var response = request.responseXML.documentElement; |
现在既然你有了到响应的根结点的参考，那么你可以使用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个childNode：
把此文章收藏到：
