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

您可能感兴趣的文章:

  • JS Ajax请求如何防止重复提交
  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
  • 原生 JS Ajax,GET和POST 请求实例代码
  • 实例讲解使用原生JavaScript处理AJAX请求的方法
  • SpringMVC环境下实现的Ajax异步请求JSON格式数据
  • 详解JavaScript for循环中发送AJAX请求问题
  • js实现对ajax请求面向对象的封装
  • js与jQuery终止正在发送的ajax请求的方法
  • django通过ajax发起请求返回JSON格式数据的方法
  • JSONP跨域GET请求解决Ajax跨域访问问题
  • Javascript发送AJAX请求实例代码
张贴在3