Ext中Ajax

最新推荐文章于 2021-08-05 23:45:27 发布

野火少年

最新推荐文章于 2021-08-05 23:45:27 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： Ext中Ajax

本文链接：https://blog.youkuaiyun.com/ItJavawfc/article/details/39119959

Ext.Ajax是Ext.data.Connection的一个子类，提供了用简单方式进行Ajax请求
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:'wfc@126.com'}]");
//,{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:'wfc.@163.com'}]");

}
%>

分析一下：【这个request】方法相当的重要，看懂列子

params:{id:'01'}, 这个id是传递到后台的参数，可以根据参数在后台做一些判断处理业务逻辑

alert(eval(response.responseText)[0].id);这行代码中我们想要得到从后台传递过来的数据，用.属性，这么方便的得到数据的前提是：将后台的数据转化为Ext可识别的对象数组。

[{id:01,name:'uspcat.com',age:18,school:'huanggangshifan',email:'wfc.@163.com'}]

注意：就是那个【】符号。

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:'wfc@126.com'}]");
//,{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:'wfc.@163.com'}]");

}
%>

这个例子，实例是相当值得研究的：
你会发现发送请求界面的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>