玩转AJAX之三:浅探XMLHttpRequest对象

一、认识XMLHttpRequest对象

我觉的学东西第一就是要对学的东西首先有个片段是认识，再次加深理解并掌握。因此先简单介绍该对象。XMLHttpRequest是JavaScript中的一个对象，它是用来联系服务器与客户端之间通信的桥梁。比如向服务器发出请求、接受服务器返回的数据等等。

二、怎么创建XMLHttpRequest对象

在我们对该对象有所了解后，接下来就是怎么使用了，该步骤非常简单，但要程序跑的健壮可要费点功夫。一般的简单创建一个XMLHttpRequest对象就如示例程序[3-1]中的代码。

//[示例3-1]
//创建XMLHttpRequest对象
<script language="javascript" type="text/javascript"> 
var Ajax=new XMLHttpRequest(); 
</script>

 

读者看到这，不知是否考虑上面的代码的兼容性。比如在IE浏览器能跑起来吗？等等

三、创建XMLHttpRequest对象兼容多种浏览器

如果读者是位喜欢理论与实践想结合的，想必现在可能已经把上面的代码调试了一番。
上面的代码存在不健壮性，只能在单一个浏览器成功运行，下面我们一起看看示例程序[3-2]

 

//[示例3-2]
//创建兼容性健壮的XMLHttpRequet对象
try 
{
   Ajax= new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
   try
   {
     Ajax = new ActiveXObject("Microsoft.XMLHTTP");
   }  
   catch(e1)
   {
     Ajax = new XMLHttpRequest();
   }  
}

 

这段代码就把多种浏览器的产品进行过滤创建，从而达到多浏览器兼容的效果。

四、发出请求

现在，我们通过以上的代码已经有了一个XMLHttpRequest对象，接着下来我就可以操作这对象发出请求了。使用该对象发出请求可以走以下步骤[示例3-3]：

//[示例3-3]
1、Ajax.open("Get/POST","URL","true/flase");
2、Ajax.onreadystatechange=result;
3、Ajax.send(null);

 

这就是通过XMLHttpRequest对象发出请求的步骤，其中主要说明3点。
第一步中的true/false表示是否异步发送,既然使用AJAX技术追求的是异步刷新肯定参数是true。
第二步中的result这是一个回掉方法，主要用来处理返回的消息。
第三步中的null是根据第一步中的url来改变的。是用来传递参数的。

五、处理响应

当我们通过XMLHttpRequest对象发出请求后，服务器就返回了一些信息，这些信息都在回掉方法里进行处理。[示例3-4]

//[示例3-4]
if (Ajax.readyState == 4) 
{
    alert(Ajax.responseText);
}

 

4表示这次请求完成，于是就把服务器返回的消息呈现给用户。这只是个简单的示范，在实际应用中，这个方法中的代码比现在的代码量要多的我们难以想象。

六、总结

以上小节就是本篇文章讲述的内容，其实2-5小节是整个XMLHttpRequest对象完成的流程。读者看这里如果觉的还是有点糊涂，脑袋还是有点晕忽忽不必着急，下篇详细介绍XMLHttpRequest对象的细节知识。