用正确的方法创建正确的xmlhttprequest对象

最新推荐文章于 2021-03-11 20:19:52 发布

最新推荐文章于 2021-03-11 20:19:52 发布 · 620 阅读

文章标签：

本文探讨了XMLHttpRequest在不同浏览器中的实现差异，特别是针对IE6及更高版本的兼容性解决方案。文中提供了详细的JavaScript代码示例，展示了如何根据不同浏览器环境选择合适的XMLHttpRequest对象。

首先说说xmlhttprequest版本的问题,在IE7及以上,所有非IE浏览器中都支持原生的xmlhttprequest对象,只需要写 new XMLHttpRequest();就行了问题主要是IE6,IE6是通过ActiveX的方式调用的MSXML解析器,而MSXML的版本更要注意,MSXML已经发布6个大版本了从1.0到现在的6.0,一般来说版本越高越好,高版本具有更快的性能,兼容性,更少的bug等.1.0的发布日期比 Widnows95还早,2.0在Windows98和IE5里面,Windows2000是2.5,Windows2000SP4,Windows XP以上默认支持MSXML3,Windows Vista,Windows 7是MSXML6,这说的都是操作系统和浏览器自带的版本通过更新都可以安装最新版本,如果自动更新是打开的话.IE6创建xmlhttprequest 有两大方式new ActiveXObject( " Microsoft.XMLHTTP " ); 和 new ActiveXObject( " Msxml2.XMLHTTP " );第一种方式实际就是创建MSXML2.0版本的xmlhttp,第二种则是创建 3.0以上版本的xmlhttp. 我的方案是

var xmlHttp;
function createXMLHttpRequest()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{// code for all new browsers
	  xmlhttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{// code for IE5 and IE6
	    var aVersions = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
	    for(var i=0; i<aVersions.length; i++)
	    	xmlhttp = new ActiveXObject(aVersions[i]);
	}
	if (xmlhttp!=null)
	{
		return xmlhttp;
	}
	else
	{
	  alert("你的浏览器不支持 XMLHTTP.");
	}
}

function queryCity(id)
{
	xmlHttp=createXMLHttpRequest();
	type="city";
	var url="getcity.php?action=city&id="+id;
	xmlHttp.open("GET",url,true);
	xmlHttp.onreadystatechange=statechange;
	xmlHttp.send('');

}
	
function queryCountry(id){
	xmlHttp=createXMLHttpRequest();
	type="country";
	var url="getcity.php?action=area&id="+id;
	xmlHttp.open("GET",url,true);
	xmlHttp.onreadystatechange=statechange;
	xmlHttp.send('');

}
	
function statechange()
{
	if(xmlHttp.readyState==4&&xmlHttp.status==200)
	{
			if(type=="city")
			{
				showCity();
			}
			else if(type="country")
			{
				showCountry();
			}
		
	}
}

ajax有很多地方容易出错,而且不好检查

1,XMLHttpRequest,onreadystatechange,readyState,status 等等这些关键字的大小写一定要正确,在IE上大小不是太敏感,在FireFox就不行了

2,这三条语句的顺序不能错,否者IE下会出现只能执行一次的情况

	xmlHttp.open("GET",url,true);
	xmlHttp.onreadystatechange=statechange;
	xmlHttp.send('');

3,每一次请求都要重新实例化一个xmlhttp对象,否会出现只能执行一次的情况