08Extjs笔记 关于ajax

1.讲解了模型如何利用ajax的原理方法。

2.文档

3.ajax： 代码的执行的时候 代码不会被打断。

4.下面这个就是说，要是跳转不成功就直接进入错误的处理的函数。

5.将返回的字符串进行转换。

(function(){
	Ext.onReady(function(){
		Ext.Ajax.request({
			url : 'person.jsp',
			params:{id:'01'},
			method : 'POST',
			timeout :3000,
			success :function(response , options){
				//注意将json的对象转换为属性的方法
				alert(eval(response.responseText)[0].name);
			},
			failure  :function(response , options){
				alert(response.responseText+" "+options)
			}
		});
	})
})()

后台的返回的方式

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%	
	String id = request.getParameter("id");
	if("01".equals(id)){
		response.getWriter().write("[{id:'01',name:'uspcat.com','age':26,email:'yunfengcheng2008@126.com'}]");
	}
%>

6.接下来表单提交的方式。（没有action 没有提交，全是js的操作）

(function(){
	Ext.onReady(function(){
		Ext.get('b').on("click",function(){
			Ext.Ajax.request({
				url : 'person.jsp',
				params:{id:'01'},
				method : 'POST',
				timeout :3000,
				form:"myform",
				success :function(response , options){
					alert(eval(response.responseText)[0].name);
				},
				failure  :function(response , options){
					alert(response.responseText+" "+options)
				}
			});
		})
	})
})()

前台的页面中的form

<form id="myform">
	Name:<input type="text" name="name"><br>
	Pass:<input type="password" name="pass"><br>
	<input type="button" value="login" id="b">
</form>

下面的这个属性是说明表单是否可以上传附件

7.下面讲解

Ext.ElementLoader

例子的说明，页面从后台取回数据的操作

前台页面代码

<input type="text" name="time" id="time">
<input type="button" value="get time" id="b1">

注意我们首先得到这个对象 Ext.ElementLoader才能使用这个里面的方法，思路就是首先获得自己本身的element然后利用element的公有的getloader方法获得loader这样就能进行数据的装载了。

看代码：

Ext.onReady(function(){
	Ext.get('b1').on("click",function(){
		var time = Ext.get("time").getLoader();
		time.load({
			url:'/extjs/extjs!getTime.action',
			renderer:function(loader,response,request){
				var time = response.responseText;
				Ext.getDom("time").value = time;
			}
		});
	})
	Ext.get('b2').on("click",function(){
		var i = Ext.get('i').getLoader();
		i.startAutoRefresh(1000,{
			url:'/extjs/extjs!getI.action',
			renderer:function(loader,response,request){
				var i = response.responseText;
				Ext.getDom("i").value = i;
			}			
		});
	})
})

代码说明：代码的render这个方法就相当于request请求结束后，将回调函数success的作用。

后台利用action获取时间的操作：

其中注意extjs 这两种操作的不同的地方

一个是获得dom元素，另一个是获得element的元素。后者是一个对象，不可以更改属性对前台造成影响的。而dom元素的属性是可以进行修改的。

8.load方式的讲解：可以说用另一种同样的方式也是可以的，用ajax进行请求然后将返回的数据进行赋值，这里是一种综合的方法。

9.下面方法是可以自动进行刷新页面的某一个dom

可以定时操作。

10.可以刷新页面的某一个元素。

前台的代码：

<input type="text" name="i" id="i">
<input type="button" value="get i" id="b2">

ext代码：

Ext.onReady(function(){
	Ext.get('b2').on("click",function(){
		var i = Ext.get('i').getLoader();
		i.startAutoRefresh(1000,{
			url:'/extjs/extjs!getI.action',
			renderer:function(loader,response,request){
				var i = response.responseText;
				Ext.getDom("i").value = i;
			}			
		});
	})
})

11.在数据传递的时候，将数据传递为什么类型。

json格式往后台发送数据( 页面自动进行传送)jsonDate.js

(function(){
	Ext.onReady(function(){
			var data = "{id:'01',name:'uspcat.com','age':26,email:'yunfengcheng2008@126.com'}";
			Ext.Ajax.request({
				url : 'person.jsp',
				method : 'POST',
				timeout :3000,
				jsonData:data,
				success :function(response , options){
					alert(eval(response.responseText)[0].name);
				},
				failure  :function(response , options){
					alert(response.responseText+" "+options)
				}
			});
	})
})()

12.多级联动的思路：就是当一个文本框失去焦点的时候，就去后台取得数据，然后在下方显示。说实话，jquery做这个比较给力。

前台的代码

  <select name="city" id="city">
	<option value="beij" selected>北京市</option>
	<option value="tianj">天津市</option>
  </select>
  <select name="area" id="area">
	<option value="def" selected>-----------</option>
  </select> 

ext代码：

(function(){
	function createChild(value,name){
		var el = document.createElement("option");
		el.setAttribute("value",value);
		el.appendChild(document.createTextNode(name));
		return el;
	}
	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 DOM
					var oldObj = Ext.get("area").dom;
					//6.清除里面项
					while(oldObj.length>0){
						oldObj.options.remove(oldObj.length-1);
					}
					//7.加入新的项
					Ext.Array.each(obj,function(o){
						Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name));
					})
					//8.把从数据库拿到的数据进行前台页面缓存
				}
			});
		});
	});
})()

前台传递的数据是变量和常量的不同

将json字符串转换为对象的做法

后天传回的数据（action）

13.要是不知道一些方法的名字但是自己又想要获取数据的时候应该怎么办呢，就是打上断点首先看看这是数组还是对象，要是数组直接打上下标，用下标将数据取出就好了。要是对象就直接用 "." 将数据取出就好了。

14.这一节最后一节讲解的就是关于缓存的技术，就是在加载的时候多一些判断，要是数据是空的就进行加载，要是数据是存在的就直接引用，变量是跨浏览器的。