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代码如下：
复制代码 代码如下:  
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程序设计有所帮助。