ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
原文地址为: ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
本篇主要介绍一下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); }
然后我们在火狐中调试:自定义请求头已被添加。
查看执行结果:
2.异步请求,返回json:
如果要返回json到客户端,MVC需要使用JsonResult的acton,自动将C#对象转换为json格式。客户端代码如下:
[Js]
Ext.onReady(function () {
new Ext.Button({ renderTo: "div1", text: "后台Ajax提交方式2返回JSON", handler: function () { Ext.Ajax.request({ url: 'Ajax_Func2', params: { n: 10 }, method: 'POST', callback: function (options, success, response) { if (success) { var responseJson = Ext.JSON.decode(response.responseText);
Ext.Msg.alert("成功", options.params.n + "的阶乘是:<font color='red'>" + responseJson.n1 + "</font><br />" + options.params.n + "的累加是:<font color='red'>" + responseJson.n2 + "</font>"); } else { Ext.Msg.confirm('失败', '请求超时或网络故障,错误编号:[' + response.status + ']是否要重新发送?', function (btn) { if (btn == 'yes') { Ext.Ajax.request(options); } }); } } }); } });
});
服务端代码:
[C#]
public JsonResult Ajax_Func2(int n){ int n1 = 1; int n2 = 0; for (int i = 1; i <= n; i++) { n1 *= i; n2 += i; }
var data = new { n1 = n1, n2 = n2 };
return Json(data, JsonRequestBehavior.AllowGet);}
查看执行结果,我们先看看火狐调试响应的结果,可以查看返回的json内容:
界面执行结果:
3.异步文件上传
ExtJs通过强大的内部封装,使ajax请求看起来可以直接提交二进制流数据。每当提交文件数据时,ExtJs会自动创建iframe,在iframe中提交。提交完成后又自动移去,一切显得天衣无缝。下面演示一个通过异步请求无刷新文件上传的例子:
[html]
<h1>Ajax文件上传</h1><div class="content" id="div2"><form id="form1">请选择文本文件:<input type="file" name="file" /><input type="button" id="button1" value="上传" /></form></div>
[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); }
提交后我们发现,上传的文本文件内容已经被正确读取。
4.异步请求事件
当发起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]
<div id="div1" title="d1" style="width:50px; height:50px; position:absolute; background-color:Green; top:100px">1</div> <div id="div2">2</div> <form id="form1"><input id="a" name="a" value="20" /><input id="b" name="b" value="50" /></form>
1.单个元素的及时更新
现在,我要通过c#在服务端计算a+b的值,然后将结果填到div1元素里面:
[Js]
Ext.get("div1").getUpdater().update({ url: "Ext/UpdaterFunc", params: { a: 10, b: 3 }});
[c#]
public ContentResult UpdaterFunc(int a,int b) { return Content("a+b=" + (a + b)); }
页面加载后,将自动更新div1。再看看另外一种写法:
[Js]
Ext.get("div1").load({ url: "Ext/UpdaterFunc", scripts: true, params: { a: 10, b: 47 }, text: "请等待..." });
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,用于需要适时核对服务端和客户端状态的情形。
出处: [Lipan] ( http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
转载请注明本文地址: ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
ExtJs4 笔记(3) Ext.Ajax 对ajax的支持相关推荐
- 前端笔记知识点整合之服务器Ajax(上)服务器PHP数据交互HTTP
前端笔记知识点整合之服务器&Ajax(上)服务器&PHP&数据交互&HTTP 一.服务器 1.1 什么是服务器,做什么的? 服务器,就是放在机房中的电脑,和我们的电脑的 ...
- 一、AJAX学习笔记——原生AJAX (ajax简介、XML简介、ajax优缺点、ajax的使用)
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
- jq实现ajax访问服务器,jQuery实战读书笔记(第八章 使用 Ajax 与服务器通信)
1. 加载内容到元素中 1.1 使用 jQuery 加载内容 load(url, parameters, callback) url - 服务器端资源的URL parameters - 作为请求参数传 ...
- 怎么中断一个ajax请求,ajax、fetch、axios如何中断请求?
先来说一说"中断请求"的实际场景,当页面有多个tab页签时,每次切换页签都会去请求数据,频繁的切换就会去请求很多次,比如A页签切换到B页签,A页签请求完全是不必要的,这时候可以在切 ...
- ajax入门实例代码,AJAX、AJAX实例及AJAX源代码
AJAX.AJAX实例及AJAX源代码 作者:佚名 来源:CNZZ 2008-1-4 AJAX介绍 AJAX 关键词: JavaScript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WE ...
- 六十八、完成Vue项目推荐和周末游组件,并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- $.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
- Easy.Ajax 部分源代码, 支持文件上传功能, 兼容所有主流浏览器
下面是Easy.Ajax类的初稿,如须发表,在代码上还要修改以达到最简,但API是不会变了, Easy.Ajax = (function (WINDOW) { ajax = { proxyPool: ...
- [js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ?
[js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ? ajax只支持http/https协议, 可以通过自定义http头来间接支持自定义协议 个人 ...
最新文章
- 用函数计算工龄_还在加班熬夜求年龄,算工龄,学会这招让你分分钟钟搞定这些!...
- [leetcode]83.删除排序链表中的重复元素
- Bash脚本教程之启动环境
- C++STL中的priority——queue
- 程序员带实习生事后却遭遇白眼狼,吐槽:真TM心累
- QT打包后音频不响应的问题
- 产品经理基本功之PRD
- 千里达v1000时速_《美骑评测》第10期 千里达V1000山地车 评测
- ES5实现组合继承的原理
- ResultSet.TYPE_SCROLL_SENSITIVE到底发生了什么?
- 计算机怎么看显卡内存容量,显存容量是什么,详细教您查看显卡容量大小方法...
- 【JZOJ】【卡特兰数】【高精】WZK打雪仗
- 煤矿矿长相当于什么级别?
- optionally enclosed by
- usnews美国大学计算机排名2021,2021年USNEWS美国大学计算机
- HackPwn:TCL智能洗衣机破解细节分析
- css怎么设置页面缩放最小宽度
- redux与flux
- 编写一个简单的javaweb网上商城项目
- 编码与DNA存储——DNA码的构造
热门文章
- Media change : please insert the disk labeled
- java metrics.counter_Java-Metrics指标度量工具
- 2017android新技术总结
- Android系统10 RK3399 init进程启动(三十八) 属性Selinux实战编程
- UITabBarController背景图片和适配
- JavaWeb——Servlet详解
- easyui分页的使用方法
- 美漂码工挣多少才能生活舒适?美国十大IT城市生活水平大调查
- [附源码]Python计算机毕业设计房屋中介管理信息系统Django(程序+LW)
- 腾讯天堂最新服务器,天堂官方网站-腾讯游戏