怎么用js與jQuery實現的兼容多瀏覽器Ajax請求

本文小編為大家詳細介紹“怎么用js與jQuery實現的兼容多瀏覽器Ajax請求”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么用js與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,所以推薦使用此方法.

讀到這里，這篇“怎么用js與jQuery實現的兼容多瀏覽器Ajax請求”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。