最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ExtJs4中Ext.Ajax的Ajax封装包测试笔记
时间:2011-12-09 编辑:简简单单 来源:一聚教程网
本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展的常用函数等。Ajax服务端交互式操作是提交到.NET MVC。后续服务端交互都采用这一方式实现。
一、ExtJs中的Ajax:Ext.Ajax.request
通过客户端向服务端发送Ajax请求,可以“直接”调用MVC的action方法,并传递参数,action返回值可以是普通字符串,也可以是json对象。请求可以添加自定义头信息。看下面例子:
1.异步请求,发送自定义请求头:
html页面如下:
[html]
代码如下 | 复制代码 |
Ajax服务端请求一共发起了0次请求。 |
我们先通过一个按钮单击事件触发ajax请求,服务端返回string到客户端,异步请求时,为请求添加自定义头“userHeader”,并在服务端获取。如下是js代码:
代码如下 | 复制代码 |
[Js] });
|
服务端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); } |
然后我们在火狐中调试:自定义请求头已被添加
结果
如果要返回json到客户端,MVC需要使用JsonResult的acton,自动将C#对象转换为json格式。客户端代码如下:
代码如下 | 复制代码 |
[Js] new Ext.Button({ Ext.Msg.alert("成功", options.params.n + "的阶乘是:" + responseJson.n1 + " }); |
服务端代码:
代码如下 | 复制代码 |
[C#] var data = new return Json(data, JsonRequestBehavior.AllowGet); |
界面执行结果:
3.异步文件上传
ExtJs通过强大的内部封装,使ajax请求看起来可以直接提交二进制流数据。每当提交文件数据时,ExtJs会自动创建iframe,在iframe中提交。提交完成后又自动移去,一切显得天衣无缝。下面演示一个通过异步请求无刷新文件上传的例子:
[html]
代码如下 | 复制代码 |
Ajax文件上传[Js] //文件上传 Ext.get("button1").on("click", function () { Ext.Ajax.request({ url: "Ajax_FileUp", isUpload: true, form: "form1", success: function (response) { Ext.MessageBox.alert("上传成功,文本文件内容:", response.responseText); } }); }); [C#] public ContentResult Ajax_FileUp(HttpPostedFileBase file) { System.IO.StreamReader r = new System.IO.StreamReader(file.InputStream, System.Text.UTF8Encoding.Default); var str = r.ReadToEnd(); return Content(str); } |
提交后我们发现,上传的文本文件内容已经被正确读取。
当发起ajax请求之前,可以监听beforerequest事件,本例每当发起ajax事件时,都会把计算器+1:
[Js]
var ajaxCount = 0;
//每当Ajax请求发起时触发:
Ext.Ajax.on('beforerequest', function () { Ext.get("span1").update(++ajaxCount) }, this);
这样,每当ajax发起就可以被记录,可用作日志等。
二、元素对象Ajax式更新:Ext.Updater,[已弃用]
ExtJs为我们提供了异步方式更新dom元素内容的支持。这可以用在一些异步交互性比较强的地方,例如webgame等。我们来看看具体实现方式。
我们先在视图中写这样的html:
代码如下 | 复制代码 |
[html] 1 2 |
1.单个元素的及时更新
现在,我要通过c#在服务端计算a+b的值,然后将结果填到div1元素里面:
代码如下 | 复制代码 |
[Js] [c#] |
页面加载后,将自动更新div1。再看看另外一种写法:
代码如下 | 复制代码 |
[Js] |
2.通过提交表单更新
代码如下 | 复制代码 |
[Js] Ext.get("div1").getUpdater().formUpdate("form1", "Ext/UpdaterFunc"); |
效果一样,只不过提交的参数来源于表单,参数名为对应的name值。
3.周期性更新
[Js]
代码如下 | 复制代码 |
//周期性更新 var up = new Ext.Updater("div1"); up.startAutoRefresh(5, "Ext/UpdaterFunc", { a: 10, b: 47 }); |
这段代码运行后将每隔5秒钟更新一次div1,用于需要适时核对服务端和客户端状态的情形。
相关文章
- 利用SinonJS测试 AJAX 请求例子 08-16
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31