ExtJs4筆記(3)Ext.Ajax對(duì)ajax的支持

1、ExtJs4筆記（3 ）Ext.Ajax對(duì)ajax的支持回到系列目錄本篇主要介紹一下ExtJs常用的幾個(gè)對(duì)JS 語(yǔ)法的擴(kuò)展支持，包括 Ajax封裝，函數(shù)事件操作封裝，還有擴(kuò)展的常用函數(shù)等。Ajax 服務(wù)端交互式操作是提交到.NET MVC。后續(xù)服務(wù)端交互都采用這一方式實(shí)現(xiàn)。一、 ExtJs 中的 Ajax ： Ext.Ajax.request通過(guò)客戶(hù)端向服務(wù)端發(fā)送Ajax 請(qǐng)求，可以“直接”調(diào)用MVC 的 action 方法，并傳遞參數(shù)，action返回值可以是普通字符串，也可以是json對(duì)象。請(qǐng)求可以添加自定義頭信息?？聪旅胬樱?. 異步請(qǐng)求，發(fā)送自定義請(qǐng)求頭：html 頁(yè)面如下：html

2、?1Ajax 服務(wù)端請(qǐng)求 23 一共發(fā)起了0次請(qǐng)求。 4我們先通過(guò)一個(gè)按鈕單擊事件觸發(fā)ajax請(qǐng)求，服務(wù)端返回string到客戶(hù)端， 異步請(qǐng)求時(shí)， 為請(qǐng)求添加自定義頭“userHeader ”，并在服務(wù)端獲取。如下是js代碼：Js?1Ext.onReady(function () 2new Ext.Button(3renderTo: div1,4text: 后臺(tái)Ajax提交,5handler: function () 6Ext.Ajax.request(7url: Ajax_Func1,8headers: 9userHeader:userMsg10,11params: a: 10, b: 20

3、 ,12method: GET,13success: function (response, options) 14Ext.MessageBox 成功, 從服務(wù)端獲取結(jié)果 : + response.alert(15,16failure: function (response, options) 17Ext.MessageBox.alert(失敗, 請(qǐng)求超時(shí)或網(wǎng)絡(luò)故障 , 錯(cuò)誤編號(hào)： 1819);20,21id: bt122);2324);服務(wù)端 MVC 接受請(qǐng)求的 action代碼：C#?1public ContentResult Ajax_Func1(int a, int b)23strin

4、g userHeaderMsg = Convert.ToString(Request.HeadersuserHeader);4return Content(a + b).ToString() + ， userHeader ： + userHeaderMsg);5然后我們?cè)诨鸷姓{(diào)試：自定義請(qǐng)求頭已被添加。查看執(zhí)行結(jié)果：2. 異步請(qǐng)求，返回json ：如果要返回 json 到客戶(hù)端， MVC 需要使用 JsonResult的 acton ，自動(dòng)將C#對(duì)象轉(zhuǎn)換為json 格式?？蛻?hù)端代碼如下：Js?1Ext.onReady(function () 23new Ext.Button(4renderT

5、o: div1,5text: 后臺(tái) Ajax 提交方式 2 返回 JSON,6handler: function () 7Ext.Ajax.request(8url: Ajax_Func2,9params: n: 10 ,10method: POST,11callback: function (options, success, response) 12if (success) 13var responseJson =Ext.JSON.decode(response.responseText1415Ext.Msg.alert(成功,options.params.n+ 的階乘是： fon1617

6、的累加是： fon18);19 else 20Ext.Msg.confirm(失敗,2122, function (btn) 23if (btn = yes) 24Ext.Ajax.request(options);2526);272829);30););服務(wù)端代碼：C#?1public JsonResult Ajax_Func2(int n)23int n1 = 1;4int n2 = 0;5for (int i = 1; i = n; i+)67n1 *= i;8n2+= i;91011var data = new1213n1 = n1,14n2 = n215;1617return Jso

7、n(data, JsonRequestBehavior.AllowGet);18查看執(zhí)行結(jié)果 , 我們先看看火狐調(diào)試響應(yīng)的結(jié)果，可以查看返回的json 內(nèi)容：界面執(zhí)行結(jié)果：3. 異步文件上傳ExtJs 通過(guò)強(qiáng)大的內(nèi)部封裝，使 ajax 請(qǐng)求看起來(lái)可以直接提交二進(jìn)制流數(shù)據(jù)。每當(dāng)提交文件數(shù)據(jù)時(shí)，ExtJs 會(huì)自動(dòng)創(chuàng)建 iframe ，在 iframe 中提交。提交完成后又自動(dòng)移去，一切顯得天衣無(wú)縫。下面演示一個(gè)通過(guò)異步請(qǐng)求無(wú)刷新文件上傳的例子：html?1Ajax 文件上傳 234請(qǐng)選擇文本文件 :567Js?1/ 文件上傳2Ext.get(button1).on(click, function

8、() 3Ext.Ajax.request(4url: Ajax_FileUp,5isUpload: true,6form: form1,7success: function (response) 8Ext.MessageBox.alert(上傳成功，文本文件內(nèi)容： , response.responseTe910);11);C#?1public ContentResult Ajax_FileUp(HttpPostedFileBase file)23System.IO.StreamReader r = new System.IO.StreamReader(file.InputStream, Sy

9、ste4var str = r.ReadToEnd();5return Content(str);6提交后我們發(fā)現(xiàn)，上傳的文本文件內(nèi)容已經(jīng)被正確讀取。4. 異步請(qǐng)求事件當(dāng)發(fā)起 ajax 請(qǐng)求之前，可以監(jiān)聽(tīng)beforerequest事件，本例每當(dāng)發(fā)起ajax事件時(shí)，都會(huì)把計(jì)算器+1：Js?1var ajaxCount = 0;2/ 每當(dāng) Ajax 請(qǐng)求發(fā)起時(shí)觸發(fā)：3Ext.Ajax.on(beforerequest, function () Ext.get(span1).update(+ajaxCount) 這樣，每當(dāng) ajax 發(fā)起就可以被記錄, 可用作日志等。二、元素對(duì)象 Ajax 式更新：

10、 Ext.Updater, 已棄用 ExtJs 為我們提供了異步方式更新dom 元素內(nèi)容的支持。這可以用在一些異步交互性比較強(qiáng)的地方，例如 webgame 等。我們來(lái)看看具體實(shí)現(xiàn)方式。我們先在視圖中寫(xiě)這樣的html ：html?1div id=div1title=d1style=width:50px;height:50px;position:absolute;backgro223input id=b name=b value1. 單個(gè)元素的及時(shí)更新現(xiàn)在，我要通過(guò)c#在服務(wù)端計(jì)算a+b 的值，然后將結(jié)果填到div1 元素里面 :Js?1Ext.get(div1).getUpdater().upd

11、ate(2url: Ext/UpdaterFunc,3params: a: 10, b: 3 4);c#?1public ContentResult UpdaterFunc(int a,int b)23return Content(a+b= + (a + b);4頁(yè)面加載后，將自動(dòng)更新div1 。再看看另外一種寫(xiě)法：Js?1Ext.get(div1).load(2url: Ext/UpdaterFunc,3scripts: true,4params: a: 10, b: 47 ,5text: 請(qǐng)等待 .6);2. 通過(guò)提交表單更新Js?1Ext.get(div1).getUpdater().formUpdate(form1, Ext/UpdaterFunc);效果一樣，只不過(guò)提交