管理资源吧首页>>>教程>>>编程>>>Ajax教程>>>

js与jQuery实现的兼容多浏览器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代码如下：

　　

复制代码 代码如下:
   <script type="text/javascript">

　　function Text_ajax()

　　{

　　$.ajax(

　　{

　　type:"GET",//通常会用到两种：GET,POST。默认是：GET

　　url:"ResponseText.aspx",//(默认: 当前页地址) 发送请求的地址

　　dataType:"html",//预期服务器返回的数据类型。

　　beforeSend:beforeSend, //发送请求

　　success:callback, //请求成功

　　error:error,//请求出错

　　complete:complete//请求完成

　　});

　　}

　　function error(XMLHttpRequest, textStatus, errorThrown)

　　{

　　// 通常情况下textStatus和errorThown只有其中一个有值

　　$("#showResult").append("<div>请求出错啦！</div>");

　　}

　　function complete(XMLHttpRequest, textStatus)

　　{

　　$("#showResult").append("<div>请求完成</div>");

　　}

　　function beforeSend(XMLHttpRequest)

　　{

　　$("#showResult").append("<div>发送请求…..<div>");

　　}

　　function callback(msg)

　　{

　　$("#showResult").append("<div>请求成功，回传数:"+msg+"<div>");

　　}

　　</script>

　　html代码如下：

　　

复制代码 代码如下:
　 <input value="Text_ajax函数" type="button" onclick="Text_ajax()"/>

　　<div id="showResult">

　　</div>

　　响应页面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程序设计有所帮助。

教程首页 更多教程