本人菜鸟一枚,最近在开发网站时用到了ajax开发。其中有一个是实现网页图片的无刷新换页。具体来说,就是点击”下一页“或”上一页“,客户端执行javascript代码,从服务器获取图片的src以及相关信息。在此过程中,由于对javascript中XMLHttpRequest的理解的不深入,走了很多弯路。下面总结一下,一来作为整理,二来与大家讨论交流下。
我觉得最主要的是要注意浏览器之间的差异。浏览器主要分为两类:ie和非ie(Mozilla Firefox、Maxthon等),在对XMLHttpRequest的支持上,两类浏览器还是有些不同的。
在进行上述的传输时,有两种方法:一是xml字符串,二是xml文档。下面分情况讨论下:
xml字符串传输
在这种情况下,服务器端发送的是xml的字符串。此时的思路是:客户端接收此字符串;然后加载为XML文本对象;最后解析获得数据。在客户端解析时使用如下代码:
//xmlHttp为一个XMLHttpRequest对象
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var text = xmlHttp.responseText;
var xmlDoc;
try
{
//非ie内核浏览器
var parser = new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
//ie浏览器
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
//解析并处理 xmlDoc
}
}
}
这时,ASP.NET服务器端的返回处理可以用如下的代码:
Response.Write(responseStr);
Response.End();
xml文档传输
在用xml文档传输时,客户端的处理相对容易一些,直接使用XMLHttpResquest的responseXML属性就可以了。代码如下
//xmlHttp为一个XMLHttpRequest对象
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var xmlDoc = xmlHttp.responseXML;
//解析并处理 xmlDoc
}
}
}
这时,ASP.NET的服务器端的代码:
Response.ContentType = "text/xml";
Response.Write(responseStr);
Response.End();
以上在得到了XML文档对象xmlDoc之后,我用简单的一句注释就略掉了。其实,这里面有很多需要注意的问题,比如最最重要的浏览器的差异问题。我就是在这上面耗费了大量的时间,花了几天的时间找了一个bug,真是苦逼啊。下面我就说说我怎么被坑爹的。
我的服务端传过来的xml字符串中有一个叫"PicPath"节点。然后我想获得的是节点间的内容,那么怎么办呢?看看下面的方法:
xmlDoc.getElementsByTagName("PicPath")[0].text;
这时我从图书馆的一本书上得到的信息,当时在本机测试成功后,想都没想就传到了虚拟空间上。可是浏览是却出现了问题,几天的排查下来,竟然发现上面的代码只有在IE浏览器中使用,我在傲游3,火狐中测试,均不能通过。那么有没有一种比较通用的方式呢?答案是肯定的。请看如下的方式:
xmlDoc.getElementsByTagName("PicPath")[0].childNodes[0].nodeValue;
这样,就可以在两种浏览器中获得节点数据了。
这只是浏览器差异的一个表现,在实际过程中,要注意浏览器差异的地方也不少(真希望只有一种浏览器)。
写毕 # 洗洗睡。