EXTjs学习笔记（3）

VerRan

浏览: 459178 次
性别:
来自: 陕西.西安

最近访客更多访客>>

guochaohui

baqqioku

251859257

lichina

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA

EXT Ajax CSS JavaScript jQuery

Ajax 一个从06年开始在国内被关注的技术，Ajax给人带来的体验是具有颠覆性的。一个不用刷性就能展现请求、访问、处理数据的能力。一开始就被这个所吸引了，尽管有很多被人认为的潜在问题存在，但是与之带来的优点比起来显得不那么重要了。记得07年刚进公司做的一个研发项目全部都是用的是Ajax，当时并没有使用什么js框架所有的ajax访问都是自行编写的一个公共js。转眼间几年过去了js框架变得更加成熟更加具有吸引力了，现在如果重新再自己去写简直就是浪费人力物力。找到一个学习曲线短并且具有强大功能的js框架是每个系统架构设计初期都会面临的问题。电信CRM2.0项目公司用了Jquery而没有使用EXT，我想主要还是EXT有些庞大担心影响效率吧，还有就是EXT商用时时收费的这些仅仅是自己的猜测。如果让我去做抉择，毫无疑问会选择EXT。说远了，看看ext对Ajax的时限，相当简单：

下面我们时限一个通过服务器返回时间，并展示的Ajax例子：

1. 创建返回时间信息的ServerLet

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  java.io.PrintWriter writer=response.getWriter();
  writer.write(request.getParameter("name")+"服务器时间"+new java.util.Date().toLocaleString());
  writer.flush();
  writer.close();
 }

2. 编写访问并获取返回数据的js代码

Ext.onReady(function() {
			var button=new Ext.Button({
		    id: "ajaxBtn",
			text: "AjaxTest",
			width: "200",
			renderTo: Ext.getBody()
			});
	
			var ajaxTest=function (){
			Ext.Ajax.request({
						url : 'MyServlet',
						success : function(response, config) {
							Ext.MessageBox.alert('Success',response.responseText);
						},
						failure : function() {
							Ext.MessageBox.alert('Error', 'Erro');
						},
						method : 'POST',
						params : {
							name : 'VerRan'
						}
					});
			}
			Ext.get("ajaxBtn").on("click",ajaxTest);
		});

3. 编写HTML

一如既往的什么都没有只是引入必须的js和css

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/resources/css/ext-all.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/AjaxTest.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
AjaxTest
</body>
</html>

小结:

EXT 对ajax的封装相当简单易懂，并且具备成功，失败情况下的回调函数的设置，入参并且可以支持各种类型，简单类型，xml，json等。

分享到：

EXTjs学习笔记（4） | EXTjs学习笔记（2）

2011-01-20 17:16
浏览 985
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论