欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2014年11月20日 14:19:29   投稿：shichen2014  
這篇文章主要介紹了js與jQuery實現(xiàn)的兼容多瀏覽器Ajax請求,以實例形式分別講述了采用純js與jQuery實現(xiàn)的兼容多瀏覽器Ajax請求的方法,并對Ajax中出現(xiàn)的亂碼問題進行了一定的分析,需要的朋友可以參考下

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

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

復(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變得更加容易實現(xiàn)。
JQuery中，AJAX的高層實現(xiàn)主要有$.get(),$.post()等，下面詳細介紹一下$.ajax()的使用方法
1、請求頁面AJAX.aspx
js代碼如下：

復(fù)制代碼 代碼如下:
   <script type="text/javascript">
        function Text_ajax()
        {
           $.ajax(
           {
              type:"GET",//通常會用到兩種：GET,POST。默認是：GET
              url:"ResponseText.aspx",//(默認: 當前頁地址) 發(fā)送請求的地址
              dataType:"html",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
              beforeSend:beforeSend, //發(fā)送請求
              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>發(fā)送請求…..<div>");
              
        }
        function callback(msg)
        {
              $("#showResult").append("<div>請求成功，回傳數(shù):"+msg+"<div>");        
        }
    </script>

html代碼如下：
復(fù)制代碼 代碼如下:
　 <input value="Text_ajax函數(shù)" type="button" onclick="Text_ajax()"/>
    <div id="showResult">   
</div>

響應(yīng)頁面JQueryAJAX.aspx
后臺代碼：
復(fù)制代碼 代碼如下:
　 protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("呵呵！測試成功啦！");
    }

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

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

1.修改以下代碼

復(fù)制代碼 代碼如下:
data:{id:1, type:encodeURI(encodeURI('商品'))}

2.在后臺action里要對取得的字符串進行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,如果沒有這個,是不行的,默認jQuery里的contentType是沒有的.
此外還需要補充一下jQuery里對參數(shù)已經(jīng)進行了一次encodeURIComponent的處理。

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

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

相關(guān)文章

  • js結(jié)合json實現(xiàn)ajax簡單實例

    js結(jié)合json實現(xiàn)ajax簡單實例

    這篇文章主要為大家詳細介紹了js結(jié)合json實現(xiàn)ajax簡單實例的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • 非常簡單的Ajax請求實例附源碼

    非常簡單的Ajax請求實例附源碼

    這篇文章為大家推薦了一個非常簡單的Ajax請求實例，可以在不重載頁面的情況與 Web 服務(wù)器交換數(shù)據(jù)，感興趣的小伙伴們可以參考一下
    2015-11-11
  • Ajax異步傳輸與PHP實現(xiàn)交互示例

    Ajax異步傳輸與PHP實現(xiàn)交互示例

    Ajax異步傳輸想必大家并不陌生吧，下面為大家介紹下與PHP實現(xiàn)交互的示例，大家不要錯過
    2014-01-01
  • $.ajax()方法進行網(wǎng)頁間傳值示例

    $.ajax()方法進行網(wǎng)頁間傳值示例

    這篇文章主要介紹了$.ajax()方法進行網(wǎng)頁間傳值的具體實現(xiàn),需要的朋友可以參考下
    2014-04-04
  • 十大最佳Ajax教程收集（圖文）

    十大最佳Ajax教程收集（圖文）

    Ajax通常被認為是一門單獨的語言，實際上它是很多語言的集合包括DHTML, Javascript, XML 和JSON，全稱為Asynchronous JavaScript and XML（異步JavaScript和XML)，是由Jesse James Gaiiett創(chuàng)造的名詞。
    2010-02-02
  • 用javascript實現(xiàn)頁面無刷新更新數(shù)據(jù)

    用javascript實現(xiàn)頁面無刷新更新數(shù)據(jù)

    用javascript實現(xiàn)頁面無刷新更新數(shù)據(jù)...
    2006-06-06
  • pushState實現(xiàn)Ajax無刷新頁面切換

    pushState實現(xiàn)Ajax無刷新頁面切換

    這篇文章主要介紹了pushState實現(xiàn)Ajax無刷新頁面切換的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • Ajax實現(xiàn)文件上傳功能(Spring MVC)

    Ajax實現(xiàn)文件上傳功能(Spring MVC)

    這篇文章主要為大家詳細介紹了Ajax實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • jQuery Ajax 實例詳解 ($.ajax、$.post、$.get)

    jQuery Ajax 實例詳解 ($.ajax、$.post、$.get)

    本文給大家分享jquery ajax實例文章，由于jquery在異步提交方面封裝的非常好，直接用ajax非常麻煩，jquery大大簡化了我們的操作，不用考慮瀏覽器的問題了。對jquery ajax實例相關(guān)介紹感興趣的朋友一起學(xué)習(xí)吧
    2015-11-11
  • ajax分頁查詢詳解

    ajax分頁查詢詳解

    本文主要介紹了ajax實現(xiàn)分頁查詢的步驟與方法。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03

最新評論