JQuery Chapter6 Ajax part 1

 
JQuery Chapter 6 AJax part1
<!--
Goal:To use AJax as our job with JQuery
-->
现在前面的话:AJax的作用主要是用于网页的局部刷新技术,这对于现在的网页数据传输
有着至关重要的意义,所以这个就非学不可啦,哈哈~也是我们必须要掌握的一门技巧!
学习AJax(在JQuery的帮助下)的第一部分,我们主要讲一下三种方法:load(),$.get(),$.post();

一.load()方法;
	这个方法就是把页面装载在你想要的对象中,装载的内容很多,可以是txt,html,jsp,xml.....
	方法的用法:$("对象").load(url,"可选参数type","可选方法:回调方法(load完毕后执行的方法)");
	url:就是您需要装载的文件/页面的路径!
	比如说我要把一个名为beLoaded.html的页面装载在另一个页面中的div中,div的Id=showMe,并且在装载完毕后提示用户
	eg:
	$(function(){
		$("#showMe").load("beLoaded.html",function(){
			alert("Load Completed");
		});
	});
	
二.$.get()/$.post()方法
	这两个方法呢就相当于表单提交中的get和post,这里主要讲解post方法!
	$.post(url,{需要传递的参数},function(data){});注意:$.get()方法的参数与$.post()相同
	参数讲解:
	url:需要连接的页面,也就是取到数据的目标页面(也可以是多种类型的)
	
	传递的参数:这里的参数的传递都是用Json写法来进行传递的,使用键值对储存的,
	如:{stuNo:"1001",stuName:"Lovingshu",stuAddr:"ChongQing"},经过这样传递后,如果连接的目标页面
	是servlet的话,那么在那边就可以通过request.getParemeter("参数名")来取得值,这个非常有用;
	
	function(data){},其中这个data(可以自己命名)就是从目标页面取出来的数据,我们需要对data进行各种处理,以达到我们的目标!
	
三.XML数据的传输
	在这里我们模拟一个数据,当做是从数据库中查询出来的数据;
	<!--------------------写在servlet中的数据----------------------->
	doPost(HttpServletRequest request,HttpServletResponse response){
		//首先设置编码格式为xml,这个可不能忘记了!
		response.setContentType("text/xml;charset=utf-8");
		//设置响应的编码,避免出现乱码
		response.setCharacterEncoding("utf-8");
		//创建一个StringBuffer,并设置默认值为xml文件的头部文件注意两个"?"与其他字符没有间隙,不然要报错,还有记住是encoding不是pageEncoding
		StringBuffer strBuf=new StringBuf("<?xml version='1.0' encoding='utf-8'?>");
		//追加字符串
		strBuf.append("<StudentInfo>");
			for(int i=1;i<=10;i++){
				//写入XML文件的基本信息
				strBuf.append("<student>");
					//这里老师也没有讲清楚如果我这里是把stuNo设成student中的属性而不是子节点,那么在那边怎样取值呢?find应该不行了吧
					strBuf.append("<stuNo>1000"+i+"</stuNo>");
					strBuf.append("<stuName>马甲"+i+"号</stuName>");
					strBuf.append("<stuSex>"+(i%2==0?"男":"女")+"</stuSex>");
				strBuf.append("</student>");
			}
		//可别忘记XML的语法是成对出现哦
		strBuf.append("</StudentInfo>");
		//写完后最好是发布到服务器然后在访问以下这个servlet,看看写出来的XML文档是否正确
		//最后要记住写出XML文档
		PrintWriter out=response.getWriter();
		out.print(strBuf);
		out.close();
	};
	
	<!-----------------写在JQuery中的数据--------------------->
	//假设我们在文档加载时就执行我们的功能
	$(function(){
		$.post("前面我们写的servlet的路径","没有参数我们可以不写",function(data){
			//现在这个data就是我们的xml文档了,通过find方法我们可以查询到子节点,这里我们用循环输出(不要忘记把data转为JQuery对象哦)
			//通过find方法找到子节点,通过each方法遍历子节点
			$(data).find("student").each(function(i,stu){
				//记住这里依然通过find方法找到目标取到里面的文本
				var stuNo=stu.find("stuNo").text();
				var stuName=stu.find("stuName").text();
				var stuSex=stu.find("stuSex").text();
				//可以将得到的内容进行各种操作
				$("ul").append("<li>学号:"+stuNo+" 姓名:"+stuName+" 性别:"+stuSex+"</li>");
			});
		},"xml");//--注意最后我们可不能忘记了写上XML哦,不写默认为text
	});
	
四.倍受青睐的Json
	前面我们已经见过了xml格式的数据的传输,但是xml对于我们来说还不是最好的,
	我们更加喜欢一种Json格式的传输!
	前面我们已经提到过这种格式了,这种格式有什么好处呢?~给大家举个例子:
	<!--JS中的代码-->
	function testJson(){
		var contents={stuName:"Mr Liu",stuGender:"Male",stuAddr:"ChongQing"};
		//报出stuName
		alert(contents.stuName);
		//报出stuGender
		alert(contents.stuGender);
		....
		
		//这里是关键:当存在多组数据时(注意格式的写法)
		var info=[{stuName:"Mr Liu",stuGender:"Male"},{stuName:"Mr Wang",stuGender:"female"},.....];
		//通过循环我们可以取到里面的值
		for(var i=0;<info.length;i++){
			alert(info[i].stuName);
			alert(info[i].stuGender);
			....
		}
	}
	
	通过上面的例子我们已经对Json格式的数据有了一定的了解,这里我们就以Json格式的数据来进行测试
	<!-------------写在servlet中的代码------------------->
	doPost(HttpServletRequest request,HttpServletResponse response){
		//创建StringBuffer对象
		StringBuffer strBuf=new StringBuffer("[");
		//同上我们就模拟从数据库中取出十条数据来进行测试
		for(int i=1;i<=10;i++){
			//写入{}中的数据,不要忘记最后还有一个,号
			strBuf.append("{stuNo:'100"+i+"',stuName:'马甲"+i+"号'},");
		}
		//记着要有头有尾
		strBuf.append("]");
		PrintWriter out=response.getWriter();
		out.print(strBuf);
		out.close();
	}
	
	<!---------------写在JQuery中的代码------------------->
	$(function(){
		//在加载玩DOM模型后就运行该方法
		$.post("刚才我们写的那个servlet的路径","{可选参数}",function(data){
			//记住了~这里很重要,我们获取过来的data是个字符串对象,还不是Json对象,只是一个长得和json一样的字符串
			//所以我们要在这个把这个字符串转为JS中的Json对象,用到我们以前的用过的方法:eval("字符串");
			//eval()方法就是把给定的字符串当做公式来运行,如:var str="3+2-5"; eval(str)的结果就是0
			var ourJson=$(eval(data));
			//在这我们就可以对这个Json对象进行操作了!
			ourJson.each(function(i,items){
				//由于我们在那边组合的时候在末尾多了一个",",所以这里不能等于最后一个,长度减一是因为长度下标从1开始的
				if(i!=ourJosn.length-1){
					var stuNo=items.stuNo;
					var stuName=items.stuName;
					var .......
					//这样我们也把数据取出来了~想怎样操作就怎样操作~哈哈~
				}
			});
		});
	});
	
五.期待JQuery Chapter6 Ajax part2

<!--
Author:Lovingshu's Forever
Date:2011-10-17 20:23
remark:JQuery is really wonderful!!
-->
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭