拾掇的简单通用的Ajax
日期：2014-05-16 浏览次数：20623 次
整理的简单通用的Ajax
自己研究了下网上的代码，再研究下了几个框架，如dojo，jquery等等的内容，自己整合了自己需要的代码片段，反正留着实用，不管是asp,php,net等等，web开发都可以用到！兼容浏览器！
这里说点ajax的兼容性：
/*=====================================================
ajax建议的使用方式：
由于各个浏览器的实现方式不一样，
针对open的第三个参数而言，
如果载入的文本(服务器返回的数据)是js脚本，并如果想在主程序执行时动态载入该js文件
对于ie而言，无论设置是false还是true,都是阻塞式，即要等到载入完获取的文本，才会继续执行主脚本后面的语句
对于Chrome而言，就现在看，是实现最符合我们逻辑，false，会发生阻塞式，而true，则会等到主脚本执行完再执行
对于FF而已，无论设置是false还是true，都是异步非阻塞式，且设置false时，可能会不能调用回调函数，写法要注意
==================================
所以要统一效果，只能等到主脚本执行完之后，再按需载入js脚本
=====================================================*/
最简单的运用：
自己研究了下网上的代码，再研究下了几个框架，如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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
