本篇主要介绍一下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); } |
|
然后我们在火狐中调试：自定义请求头已被添加
结果
首页 1 2 3 末页
时间： 2024-10-26 01:17:07