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中文亂碼問題?

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

在ajax方法中加入以下參數

contentType: “application/x-www-form-urlencoded; charset=UTF-8″使用其它js架構或者xhr都是差不多,設定header中contentType即可,

這裡關鍵是charset=UTF-8,如果沒有這個,是不行的,預設jQuery裡的contentType是沒有的.

方法二在action裡不需要進行decode,所以推薦使用此方法