ExtJs4笔记(3)Ext.Ajax对ajax的支持

1、ExtJs4笔记（3 ）Ext.Ajax对ajax的支持回到系列目录本篇主要介绍一下ExtJs常用的几个对JS 语法的扩展支持，包括 Ajax封装，函数事件操作封装，还有扩展的常用函数等。Ajax 服务端交互式操作是提交到.NET MVC。后续服务端交互都采用这一方式实现。一、 ExtJs 中的 Ajax ： Ext.Ajax.request通过客户端向服务端发送Ajax 请求，可以“直接”调用MVC 的 action 方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。请求可以添加自定义头信息。看下面例子：1. 异步请求，发送自定义请求头：html 页面如下：html

2、?1Ajax 服务端请求 23 一共发起了0次请求。 4我们先通过一个按钮单击事件触发ajax请求，服务端返回string到客户端， 异步请求时， 为请求添加自定义头“userHeader ”，并在服务端获取。如下是js代码：Js?1Ext.onReady(function () 2new Ext.Button(3renderTo: div1,4text: 后台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 成功, 从服务端获取结果 : + response.alert(15,16failure: function (response, options) 17Ext.MessageBox.alert(失败, 请求超时或网络故障 , 错误编号： 1819);20,21id: bt122);2324);服务端 MVC 接受请求的 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然后我们在火狐中调试：自定义请求头已被添加。查看执行结果：2. 异步请求，返回json ：如果要返回 json 到客户端， MVC 需要使用 JsonResult的 acton ，自动将C#对象转换为json 格式。客户端代码如下：Js?1Ext.onReady(function () 23new Ext.Button(4renderT

5、o: div1,5text: 后台 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););服务端代码：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查看执行结果 , 我们先看看火狐调试响应的结果，可以查看返回的json 内容：界面执行结果：3. 异步文件上传ExtJs 通过强大的内部封装，使 ajax 请求看起来可以直接提交二进制流数据。每当提交文件数据时，ExtJs 会自动创建 iframe ，在 iframe 中提交。提交完成后又自动移去，一切显得天衣无缝。下面演示一个通过异步请求无刷新文件上传的例子：html?1Ajax 文件上传 234请选择文本文件 :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(上传成功，文本文件内容： , 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提交后我们发现，上传的文本文件内容已经被正确读取。4. 异步请求事件当发起 ajax 请求之前，可以监听beforerequest事件，本例每当发起ajax事件时，都会把计算器+1：Js?1var ajaxCount = 0;2/ 每当 Ajax 请求发起时触发：3Ext.Ajax.on(beforerequest, function () Ext.get(span1).update(+ajaxCount) 这样，每当 ajax 发起就可以被记录, 可用作日志等。二、元素对象 Ajax 式更新：

10、 Ext.Updater, 已弃用 ExtJs 为我们提供了异步方式更新dom 元素内容的支持。这可以用在一些异步交互性比较强的地方，例如 webgame 等。我们来看看具体实现方式。我们先在视图中写这样的html ：html?1div id=div1title=d1style=width:50px;height:50px;position:absolute;backgro223input id=b name=b value1. 单个元素的及时更新现在，我要通过c#在服务端计算a+b 的值，然后将结果填到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页面加载后，将自动更新div1 。再看看另外一种写法：Js?1Ext.get(div1).load(2url: Ext/UpdaterFunc,3scripts: true,4params: a: 10, b: 47 ,5text: 请等待 .6);2. 通过提交表单更新Js?1Ext.get(div1).getUpdater().formUpdate(form1, Ext/UpdaterFunc);效果一样，只不过提交