这篇文章主要介绍js与jQuery如何实现的兼容多浏览器Ajax请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联网络公司拥有十年的成都网站开发建设经验,1000+客户的共同信赖。提供网站设计制作、网站设计、网站开发、网站定制、卖友情链接、建网站、网站搭建、响应式网站、网页设计师打造企业风格,提供周到的售前咨询和贴心的售后服务
ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jquery ajax 兼容性也很强。
一、纯js实现的Ajax实例:
var ajax = function() {}; ajax.prototype = { request: function(method, url, callback, postVars) { var xhr = 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() { var methods = [ function() { return new XMLHttpRequest(); }, function() { return new ActiveXObject("Msxml2.XMLHTTP"); }, function() { return new ActiveXObject("Microsoft.XMLHTTP"); } ], i = 0, len = methods.length; for (; i < len; i++) { try { methods[i]; } catch(e) { continue; } this.createXhrObject = methods[i]; return methods[i]; } throw new Error("ajax created failure"); }, JSONStringify: function(obj) { return JSON.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代码如下:
html代码如下:
响应页面JQueryAJAX.aspx
后台代码:
protected void Page_Load(object sender, EventArgs e) { Response.Write("呵呵!测试成功啦!"); }
三、关于jQuery Ajax中文乱码问题
方法一:提交前采用encodeURI两次编码,记住一定是两次
1.修改以下代码
data:{id:1, type:encodeURI(encodeURI('商品'))}
2.在后台action里要对取得的字符串进行decode
String type = 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,所以推荐使用此方法.
以上是“js与jQuery如何实现的兼容多浏览器Ajax请求”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
名称栏目:js与jQuery如何实现的兼容多浏览器Ajax请求
网页网址:http://lswzjz.com/article/jijjpe.html