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