js与jQuery实现的兼容多浏览器Ajax请求实例
ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jqueryajax兼容性也很强。
一、纯js实现的Ajax实例:
varajax=function(){}; ajax.prototype={ request:function(method,url,callback,postVars){ varxhr=this.createXhrObject(); xhr.onreadystatechange=function(){ if(xhr.readyState!==4)return; (xhr.status===200)? callback.success(xhr.responseText,xhr.responseXML): callback.failure(xhr,status); }; if(method!=="POST"){ url+="?"+JSONStringify(postVars); postVars=null; } xhr.open(method,url,true); xhr.send(postVars); }, createXhrObject:function(){ varmethods=[ function(){returnnewXMLHttpRequest();}, function(){returnnewActiveXObject("Msxml2.XMLHTTP");}, function(){returnnewActiveXObject("Microsoft.XMLHTTP");} ], i=0, len=methods.length; for(;i<len;i++){ try{ methods[i]; }catch(e){ continue; } this.createXhrObject=methods[i]; returnmethods[i]; } thrownewError("ajaxcreatedfailure"); }, JSONStringify:function(obj){ returnJSON.stringify(obj).replace(/"|{|}/g,"") .replace(/b:b/g,"=") .replace(/b,b/g,"&"); } };
二、jQuery$.ajax概述
出现JQuery后,使AJAX变得更加容易实现。
JQuery中,AJAX的高层实现主要有$.get(),$.post()等,下面详细介绍一下$.ajax()的使用方法
1、请求页面AJAX.aspx
js代码如下:
<scripttype="text/javascript"> functionText_ajax() { $.ajax( { type:"GET",//通常会用到两种:GET,POST。默认是:GET url:"ResponseText.aspx",//(默认:当前页地址)发送请求的地址 dataType:"html",//预期服务器返回的数据类型。 beforeSend:beforeSend,//发送请求 success:callback,//请求成功 error:error,//请求出错 complete:complete//请求完成 }); } functionerror(XMLHttpRequest,textStatus,errorThrown) { //通常情况下textStatus和errorThown只有其中一个有值 $("#showResult").append("<div>请求出错啦!</div>"); } functioncomplete(XMLHttpRequest,textStatus) { $("#showResult").append("<div>请求完成</div>"); } functionbeforeSend(XMLHttpRequest) { $("#showResult").append("<div>发送请求…..<div>"); } functioncallback(msg) { $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>"); } </script>
html代码如下:
<inputvalue="Text_ajax函数"type="button"onclick="Text_ajax()"/> <divid="showResult"> </div>
响应页面JQueryAJAX.aspx
后台代码:
protectedvoidPage_Load(objectsender,EventArgse) { Response.Write("呵呵!测试成功啦!"); }
三、关于jQueryAjax中文乱码问题
方法一:提交前采用encodeURI两次编码,记住一定是两次
1.修改以下代码
data:{id:1,type:encodeURI(encodeURI('商品'))}
2.在后台action里要对取得的字符串进行decode
Stringtype=request.getParameter("type"); type=URLDecoder.decode(type,"UTF-8");
方法二:ajax配置contentType属性,加上charset=UTF-8
在ajax方法中加入以下参数
contentType:"application/x-www-form-urlencoded;charset=UTF-8″使用其它js框架或者xhr都是差不多,设置header中contentType即可,
这里关键是charset=UTF-8,如果没有这个,是不行的,默认jQuery里的contentType是没有的.
此外还需要补充一下jQuery里对参数已经进行了一次encodeURIComponent的处理。
相比较而言,方法二在action里不需要进行decode,所以推荐使用此方法.
希望本文所述对大家的Ajax程序设计有所帮助。