快捷導(dǎo)航

js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求實(shí)例

更新時(shí)間：2014年11月20日 14:19:29 投稿：shichen2014

這篇文章主要介紹了js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求,以實(shí)例形式分別講述了采用純js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求的方法,并對(duì)Ajax中出現(xiàn)的亂碼問(wèn)題進(jìn)行了一定的分析,需要的朋友可以參考下

ajax我們經(jīng)常會(huì)用到的，但網(wǎng)上找到的大部份ajax兼容性都不強(qiáng)，下面自己改了一個(gè)不錯(cuò)的兼容性很強(qiáng)的ajax函數(shù)，同時(shí)后面介紹的jquery ajax 兼容性也很強(qiáng)。

一、純js實(shí)現(xiàn)的Ajax實(shí)例：

復(fù)制代碼代碼如下:

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概述

出現(xiàn)JQuery后，使AJAX變得更加容易實(shí)現(xiàn)。
JQuery中，AJAX的高層實(shí)現(xiàn)主要有$.get(),$.post()等，下面詳細(xì)介紹一下$.ajax()的使用方法
1、請(qǐng)求頁(yè)面AJAX.aspx
js代碼如下：

復(fù)制代碼代碼如下:

   <script type="text/javascript">

        function Text_ajax()

        {

           $.ajax(

           {

              type:"GET",//通常會(huì)用到兩種：GET,POST。默認(rèn)是：GET

              url:"ResponseText.aspx",//(默認(rèn): 當(dāng)前頁(yè)地址) 發(fā)送請(qǐng)求的地址

              dataType:"html",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型。

              beforeSend:beforeSend, //發(fā)送請(qǐng)求

              success:callback, //請(qǐng)求成功

              error:error,//請(qǐng)求出錯(cuò) 

              complete:complete//請(qǐng)求完成

           });

        }

        function error(XMLHttpRequest, textStatus, errorThrown)

        {

              // 通常情況下textStatus和errorThown只有其中一個(gè)有值 

              $("#showResult").append("<div>請(qǐng)求出錯(cuò)啦！</div>");

        }

        function complete(XMLHttpRequest, textStatus)

        {  

              $("#showResult").append("<div>請(qǐng)求完成</div>");

        }

        function beforeSend(XMLHttpRequest)

        {

              $("#showResult").append("<div>發(fā)送請(qǐng)求…..<div>");

        }

        function callback(msg)

        {

              $("#showResult").append("<div>請(qǐng)求成功，回傳數(shù):"+msg+"<div>");         

        }

    </script>

html代碼如下：

復(fù)制代碼代碼如下:

　 <input value="Text_ajax函數(shù)" type="button" onclick="Text_ajax()"/>

    <div id="showResult">    

</div>

響應(yīng)頁(yè)面JQueryAJAX.aspx
后臺(tái)代碼：

復(fù)制代碼代碼如下:

　 protected void Page_Load(object sender, EventArgs e)

    {

        Response.Write("呵呵！測(cè)試成功啦！");

    }

三、關(guān)于jQuery Ajax中文亂碼問(wèn)題

方法一:提交前采用encodeURI兩次編碼,記住一定是兩次

1.修改以下代碼

復(fù)制代碼代碼如下:

data:{id:1, type:encodeURI(encodeURI('商品'))}

2.在后臺(tái)action里要對(duì)取得的字符串進(jìn)行decode

復(fù)制代碼代碼如下:

String type = request.getParameter("type");

type = URLDecoder.decode(type, "UTF-8");

方法二:ajax配置contentType屬性,加上charset=UTF-8

在ajax方法中加入以下參數(shù)

復(fù)制代碼代碼如下:

contentType: "application/x-www-form-urlencoded; charset=UTF-8″

使用其它js框架或者xhr都是差不多,設(shè)置header中contentType即可,

這里關(guān)鍵是charset=UTF-8,如果沒(méi)有這個(gè),是不行的,默認(rèn)jQuery里的contentType是沒(méi)有的.
此外還需要補(bǔ)充一下jQuery里對(duì)參數(shù)已經(jīng)進(jìn)行了一次encodeURIComponent的處理。

相比較而言，方法二在action里不需要進(jìn)行decode,所以推薦使用此方法.

希望本文所述對(duì)大家的Ajax程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: