欢迎来到福编程网,本站提供各种互联网专业知识!

js与jQuery实现的兼容多浏览器Ajax请求实例

发布时间:2014-11-20 作者:佚名 来源:转载
这篇文章主要介绍了js与jQuery实现的兼容多浏览器Ajax请求,以实例形式分别讲述了采用纯js与jQuery实现的兼容多浏览器Ajax请求的方法,并对Ajax中出现的乱码问题进行了一定的分析,需要的朋友可以参考下

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,所以推荐使用此方法.

希望本文所述对大家的Ajax程序设计有所帮助。

相关推荐