整理的简单通用的Ajax

最新推荐文章于 2024-05-06 00:09:35 发布

最新推荐文章于 2024-05-06 00:09:35 发布 · 158 阅读

文章标签：

#Ajax #脚本 #Dojo #IE #Chrome

Javascript 专栏收录该内容

5 篇文章

订阅专栏

自己研究了下网上的代码，再研究下了几个框架，如dojo，jquery等等的内容，自己整合了自己需要的代码片段，反正留着实用，不管是asp,php,net等等，web开发都可以用到！兼容浏览器！


jsManager={};
jsManager.ajax={};
//这里参考dojo，创建一个通用的XmlRequest对象
jsManager.ajax._XHR = function() {
	var xmlhttp;
	try { // Mozilla / Safari / IE7
		xmlhttp = new XMLHttpRequest();
	} catch(e) { // IE
		var XMLHTTP_IDS = new Array(
			'MSXML2.XMLHTTP.5.0',
			'MSXML2.XMLHTTP.4.0',
			'MSXML2.XMLHTTP.3.0',
			'MSXML2.XMLHTTP',
			'Microsoft.XMLHTTP'
		);
		var success = false;
		for (var i = 0; i < XMLHTTP_IDS.length && !success; i++) {
			if (!success) {
				try {
					xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
					success = true;
					break;
				} catch(e) {}
			}
		}
		if (!success) {
			throw new Error('Unable to create XMLHttpRequest.');
		}
	}
	return xmlhttp;
}
jsManager.ajax.ContentType={
	//设置这个，它让服务器知道现在发送的是文本
	"default":"application/x-www-form-urlencoded",	
	"xml":"text/xml"
};
jsManager.ajax.OperWay={
	"get":"0",	
	"post":"1"
};
//url传参数，要注意编码方式
//url 要访问的服务器网址
//fn 服务器返回数据的处理函数
//OperWay 提交数据的方式 默认为0-表示get,1-表示post
//sendStr post提交数据的字符串
//textType post提交数据的文本类型,默认为文本
jsManager.ajax.AccessUrl=function (url,fn,OperWay,sendStr,textType) {	
	var oXmlHttp = new jsManager.ajax._XHR();
	var operJsFs= function() {
		if (oXmlHttp.readyState == 4) {
			if (oXmlHttp.status == 200 || oXmlHttp.statuis == 304) {
				var response = oXmlHttp.responseText;
				if(fn){
					fn(response);
				}
			}
		}
	}
	oXmlHttp.onreadystatechange = operJsFs;
	//给url加上时间签，防止缓存
	var the_Url=url.split("/");
	if(the_Url[the_Url.length-1].indexOf("?")>-1){
		url+="&"+new Date().getTime()
	}else{
		url+="?"+new Date().getTime()
	}

	if (OperWay) {
		var theConType=this.ContentType["default"];
		if (this.ContentType[textType]) {
			theConType=this.ContentType[textType];
		}
		oXmlHttp.open('POST', url, true);
		xmlHttp.setRequestHeader("Content-Type", theConType);
		oXmlHttp.send(sendStr);
	}else{
		oXmlHttp.open('GET', url, true);
		oXmlHttp.send(null);
	}
}
//==下面是扩展运用==========================================
//将返回的文本，如果调用了fn函数，则该文本将作为该函数的参数,如果没有fn,仅是传送数据到服务器处理，而无返回任何信息
//仅仅访问一个url,如果Get方式,要传参数请使用?...&....等url形式
jsManager.ajax.CallBack = function(url,fn) {
	this.AccessUrl(url,fn);
}
//发送xml数据到服务器,由此可以推出发送其他类型的文件类型的数据
//ajax上传文件可以下面推知
jsManager.ajax.sendXML = function(xmlStr,url,fn) {
	this.AccessUrl(url,fn,this.OperWay["post"],xmlStr,this.ContentType["xml"]);
}
//发送json数据到服务器
jsManager.ajax.sendJson = function(jsonStr,url,fn) {
	this.AccessUrl(url,fn,this.OperWay["post"],jsonStr);
}

这里说点ajax的兼容性：
/*=====================================================
ajax建议的使用方式：
由于各个浏览器的实现方式不一样，
针对open的第三个参数而言，
如果载入的文本(服务器返回的数据)是js脚本，并如果想在主程序执行时动态载入该js文件
对于ie而言，无论设置是false还是true,都是阻塞式，即要等到载入完获取的文本，才会继续执行主脚本后面的语句
对于Chrome而言，就现在看，是实现最符合我们逻辑，false，会发生阻塞式，而true，则会等到主脚本执行完再执行
对于FF而已，无论设置是false还是true，都是异步非阻塞式，且设置false时，可能会不能调用回调函数，写法要注意
==================================
所以要统一效果，只能等到主脚本执行完之后，再按需载入js脚本
=====================================================*/

最简单的运用：


<html>
<body>
<script src="<包含上述代码的文件名>.js">
</script>
<script>
function getWebContent(str){
	document.body.innerHTML=str;
}
jsManager.ajax.AccessUrl("http://news.163.com",getWebContent);
</script>
</body>
</html>