如何使用XmlHttp编写兼容多浏览器的ajax WEB页面?
如何使用XmlHttp编写兼容多浏览器的ajax WEB页面?
利用JS的的try{}catch{}功能,我们可以很简单的实现同时兼容多种浏览器的xmlhttp对象调用。
相关代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>XMLHTTPTest</title>
<script>
functionwriteHtml(strurl,element)
{
try
{
varstrxmlhttp;
try
{
strxmlhttp=newActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e)
{
strxmlhttp=newXMLHttpRequest();
}
strxmlhttp.open("GET",strurl,false);
strxmlhttp.send(null);
document.getElementById(element).innerHTML=strxmlhttp.responseText;
//alert(strxmlhttp.responseText);
}
catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<divid="div1"></div>
<script>
try{
writeHtml("http://localhost/aa.htm","div1");
}
catch(e)
{
alert(e);
}
</script>
</body>
</html>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>XMLHTTPTest</title>
<script>
functionwriteHtml(strurl,element)
{
try
{
varstrxmlhttp;
try
{
strxmlhttp=newActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e)
{
strxmlhttp=newXMLHttpRequest();
}
strxmlhttp.open("GET",strurl,false);
strxmlhttp.send(null);
document.getElementById(element).innerHTML=strxmlhttp.responseText;
//alert(strxmlhttp.responseText);
}
catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<divid="div1"></div>
<script>
try{
writeHtml("http://localhost/aa.htm","div1");
}
catch(e)
{
alert(e);
}
</script>
</body>
</html>
把以上HTML保存为a.htm并放到本地站点跟目录
图一、使用FIREFOX浏览效果(http://localhost/a.php)
图二、使用IE浏览效果