Ext中Ajax
Ext.Ajax是Ext.data.Connection的一个子类，提供了用简单方式进行Ajax请求
1.主要方法：
abort:终止一个没有完成的Ajax请求
isLoading:判断制定的Ajax请求是不是正在进行
paresStatus:返回请求响应的代码
request:发送服务请求---->重点
2.Ext.ElementLoader
方便我们重新构建页面
load方法
再看看后台的person.jsp
分析一下：【这个request】方法相当的重要，看懂列子
还有个作为后台提供数据的person.jsp
在后台时需要交互，页面提交到后天需要交互的，也就是.action中的处理：
1.主要方法：
abort:终止一个没有完成的Ajax请求
isLoading:判断制定的Ajax请求是不是正在进行
paresStatus:返回请求响应的代码
request:发送服务请求---->重点
2.Ext.ElementLoader
方便我们重新构建页面
load方法
startAutoRefresh方法
1）首先看一下官方的API介绍：
我们首先看看Request方法：
request.js
request方法：
(function(){
Ext.onReady(function(){
Ext.Ajax.request({
url:'person.jsp',
params:{id:'01'},
method:'POST',
timeout:3000,
success:function(response,options){
//alert("success");
alert(eval(response.responseText)[0].id);
//alert(response);
},
failure:function(response,options){
alert("fail");
alert(response.responseText+" "+options);
}
})
})
})();
再看看后台的person.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
//response.getWriter().write("[['wangfangchen',26]]");
//System.out.println(request.getParameter("id"));
//response.getWriter().write("[{name:'uspcat.com',age:26},{name:'wfc',age:26}]");
//response.getWriter().write("[{name:'uspcat.com',age:26,email:'[email protected]'}]");
//,{name:'wf',age:2}
String id=request.getParameter("id");
System.out.println(id);
if("01".equals(id)){
response.getWriter().write("[{id:01,name:'uspcat.com',age:18,school:'huanggangshifan',email:'[email protected]'}]");
}
%>
分析一下：【这个request】方法相当的重要，看懂列子
params:{id:'01'}, 这个id是传递到后台的参数，可以根据参数在后台做一些判断处理业务逻辑
alert(eval(response.responseText)[0].id);这行代码中我们想要得到从后台传递过来的数据，用.属性，这么方便的得到数据的前提是：将后台的数据转化为Ext可识别的对象数组。
[{id:01,name:'uspcat.com',age:18,school:'huanggangshifan',email:'[email protected]'}]注意：就是那个【】符号。
2）下面再看看一个form属性：
form:将显示层和控制层彻底分开。
ajaxform.js
(function(){
Ext.onReady(function(){
Ext.get('b').on("click",function(){
Ext.Ajax.request({
url:'person.jsp',
params:{id:'01'},
method:'POST',
form:'myform',
timeout:3000,
success:function(response,options){
//alert("success");
alert(eval(response.responseText)[0].id);
//alert(response);
},
failure:function(response,options){
alert("fail");
alert(response.responseText+" "+options);
}
})
})
})
})();
一个用来请求的jsp页面
<strong><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 导入Ext JS必需的CSS样式单 -->
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!-- 导入Ext JS必需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<!-- 导入Ext JS国际化所需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
</script>
<script type="text/javascript" src="ajaxform.js">
</script>
<script type="text/javascript">
</script>
</head>
<body>
<form id="myform">
Name:<input type="text" name="name"/><br/>
Passs:<input type="password" name="pass"/><br/>
<input type="button" value="login" id="b"/>
</form>
</body>
</html></strong>
还有个作为后台提供数据的person.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
//response.getWriter().write("[['wangfangchen',26]]");
//System.out.println(request.getParameter("id"));
//response.getWriter().write("[{name:'uspcat.com',age:26},{name:'wfc',age:26}]");
//response.getWriter().write("[{name:'uspcat.com',age:26,email:'[email protected]'}]");
//,{name:'wf',age:2}
String id=request.getParameter("id");
System.out.println(id);
if("01".equals(id)){
response.getWriter().write("[{id:01,name:'uspcat.com',age:18,school:'huanggangshifan',email:'[email protected]'}]");
}
%>
这个例子，实例是相当值得研究的：
你会发现发送请求界面的jsp页面甚至没有提交按钮，这是怎么实现的呢？
在发送请求界面的jsp中有一个
<strong> <form id="myform"></strong>
<strong> </strong>在我们的.js文件中只需要设置一个参数：
form:'myform',
那么当你点击发送请求界面的login按钮，那么就自动实现了与后台的交互。
3）下面看一个关于Ext中联动的问题：
【1】首先看一个比较好玩的例子：
(function(){
Ext.onReady(function(){
//1.得到city这个dom对象
var cityObj=Ext.get("city");
//2.我们这个city这个注册一个change
cityObj.on("change",function(e,select){
//3.得到改变后的数值
var ids=select.options[select.selectedIndex].value;
//4.ajax请求，把后台数据拿过来
Ext.Ajax.request({
url:'person.jsp',
params:{ids:ids},
method:'post',
timeout:4000,
success:function(response,opts){
var obj=eval(response.responseText)
//5.得到地区的那个对象的area
var oldObj=Ext.get("area").dom
//6.清除里面的项
while(oldObj.length>0){
oldObj.options.remove(oldObj.leng=-1);
}
//7.加入新项
}
})
})
})
})();
实现的需求时当点击一行中的项时，另一行中的数据自动清除
【2】正真的联动需求：
(function(){
function createChild(value,name){
var e1=domcument.createElement("options");
e1.setAttribute("value",value);
e1.appendChild(cocument.createTextNode(name));
return e1;
}
var data={}; //加一个缓存
Ext.onReady(function(){
//1.得到city这个dom对象
var cityObj=Ext.get("city");
//2.我们这个city这个注册一个change
cityObj.on("change",function(e,select){
//3.得到改变后的数值
var ids=select.options[select.selectedIndex].value;
//3.1他先去前台的缓存变量中查数据，当没有的时候再去后台拿数据
if(data["city"]){
//直接操作
}else{
//做 ajax
}
//4.ajax请求，把后台数据拿过来
Ext.Ajax.request({
url:'/extjs/extjs!menu.action',
params:{ids:ids},
method:'post',
timeout:4000,
success:function(response,opts){
var obj=eval(response.responseText)
//5.得到地区的那个对象的area
var oldObj=Ext.get("area").dom
//6.清除里面的项
while(oldObj.length>0){
oldObj.options.remove(oldObj.leng=-1);
}
//7.加入新项
Ext.Array.each(obj,function(o){
Ext.get('area').dom.appendChild(o.valueOf(),o.name);
})
//8.把从数据库中拿到的数据进行前台缓存
}
})
})
})
})();
在后台时需要交互，页面提交到后天需要交互的，也就是.action中的处理：
作为服务，赋值给对应的menu.
我们看看这个请求页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 导入Ext JS必需的CSS样式单 -->
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!-- 导入Ext JS必需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<!-- 导入Ext JS国际化所需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
</script>
<script type="text/javascript" src="menu.js">
</script>
<script type="text/javascript">
</script>
</head>
<body>
<select name="city" id="city">
<option value="beijing" selected>北京</option>
<option value="tianji">天津市</option>
</select>
<select name="area" id="area">
<option value="def" selected>----</option>
</select>
</body>
</html>