ExtJs4中Ext.Ajax的Ajax封裝包測試筆記(1/3)

本篇主要介紹一下ExtJs常用的幾個對JS文法的擴充支援，包括Ajax封裝，函數事件操作封裝，還有擴充的常用函數等。Ajax服務端互動式操作是提交到.NET MVC。後續服務端互動都採用這一方式實現。

一、ExtJs中的Ajax：Ext.Ajax.request
通過用戶端向服務端發送Ajax請求，可以“直接”調用MVC的action方法，並傳遞參數，action傳回值可以是一般字元串，也可以是json對象。請求可以添加自訂頭資訊。看下面例子：

1.非同步請求，發送自訂要求標頭：
html頁面如下：

[html]

代碼如下	複製代碼
<h1>Ajax服務端請求</h1> <div class="content" id="div1"> <div>一共發起了<span id="span1" style="color:Red">0</span>次請求。</div> </div>

我們先通過一個按鈕單擊事件觸發ajax請求，服務端返回string到用戶端，非同步請求時，為請求添加自訂頭“userHeader”，並在服務端擷取。如下是js代碼：

代碼如下

複製代碼

[Js] Ext.onReady(function () {     new Ext.Button({         renderTo: "div1",         text: "後台Ajax提交",         handler: function () {             Ext.Ajax.request({                 url: 'Ajax_Func1',                 headers: {                     'userHeader': 'userMsg'                 },                 params: { a: 10, b: 20 },                 method: 'GET',                 success: function (response, options) {                     Ext.MessageBox.alert('成功', '從服務端擷取結果: ' + response.responseText);                 },                 failure: function (response, options) {                     Ext.MessageBox.alert('失敗', '請求逾時或網路故障,錯誤編號：' + response.status);                 }             });         },         id: "bt1"     }); });

服務端MVC接受請求的action代碼：

代碼如下	複製代碼
[C#]         public ContentResult Ajax_Func1(int a, int b)         {             string userHeaderMsg = Convert.ToString(Request.Headers["userHeader"]);             return Content((a + b).ToString() + "，userHeader：" + userHeaderMsg);         }

然後我們在Firefox中調試：自訂要求標頭已被添加

結果

首頁 1 2 3 末頁