资料课件讲义段建国-课件TP08

Ajax与jQuery,第八章,本章目标,理解Ajax技术掌握JSON的使用掌握jQuery的常用Ajax方法,2/51,认识Ajax,Web2.0的特点用户贡献内容内容聚合RSS更丰富的“用户体验”,自动补全,内容聚合,每个小“窗口”可以关闭、最小化和进行个性化设置,所有操作都是在不刷新窗口的情况下完成的,3/51,为什么使用Ajax,无刷新：不刷新整个页面，只刷新局部无刷新的好处只更新部分页面，有效利用带宽提供连续的用户体验提供类似C/S的交互效果，操作更方面,只是登录，没必要刷新“庞大”的页面,4/51,4/51,4/51,观看视频时，不希望页面刷新视频从头播放,只刷新局部页面，视频继续播放,自动完成功能,拖动、放大、缩小Google地图,传统Web与Ajax的差异,5/52,Ajax简介,Ajax：异步刷新技术,6/52,Ajax工作流程,Ajax：异步刷新技术,7/52,Ajax技术的核心,Ajax技术主要开发语言,封装请求或响应的数据格式,修改页面元素、改变样式，实现局部刷新,XMLHttpRequest对象,XMLHttpRequest3-1,整个Ajax技术的核心提供异步发送请求的能力常用方法,8/51,常用属性readystate:XMLHttpRequest的状态信息onreadystatechange：指定回调函数,XMLHttpRequest3-2,9/51,XMLHttpRequest3-3,常用属性status：HTTP的状态码statusText：返回当前请求的响应状态responseText：获得响应的文本内容responseXML：获得响应的XML文档对象,就绪状态是4且状态码是200，方可处理服务器数据,10/51,使用Ajax验证用户名3-1,实现无刷新用户名验证当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在如果已经存在提示“用户名已被使用”如果不存在则提示“用户名可以使用”,问题,11/51,使用Ajax验证用户名3-2,使用文本框的onBlur事件使用Ajax技术实现异步交互创建XMLHttpRequest对象通过XMLHttpRequest对象设置请求信息向服务器发送请求创建回调函数，根据响应状态动态更新页面,分析,12/51,使用Ajax验证用户名3-3,编写待验证姓名表单编写JavaScript方法验证用户名使用Ajax进行处理1.创建XMLHttpRequest对象2.设置在服务器完成响应后要运行的回调函数3.设置请求信息4.发送请求编写服务器端处理客户端请求编写回调函数处理服务器端返回数据,13/51,学员操作实现无刷新邮箱验证,需求说明实现无刷新验证注册邮箱在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在,练习,14/51,使用jQuery实现Ajax,传统方式实现Ajax的不足方法、属性、常用值较多不好记忆步骤繁琐浏览器兼容问题,jQuery常用Ajax方法$.ajax()$.get()$.post()$.getJSON()load(),问题,“$”为jQuery脚本库的变量名，即“$”=“jQuery”,15/51,$.ajax()简介2-1,语法,常用属性参数,$.ajax(settings);,16/51,常用函数参数,$.ajax()简介2-2,17/51,使用$.ajax()验证用户名2-1,实现无刷新用户名验证当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在如果已经存在则提示“用户名已被使用”如果不存在则提示“用户名可以使用”,问题,18/51,使用$.ajax()验证用户名2-2,使用$.ajax()实现异步交互,示例,$.ajax(url:url,/要提交的URL路径type:get,/发送请求的方式data:data,/要发送到服务器的数据dataType:text,/指定传输的数据格式success:function(result)/请求成功后要执行的代码,error:function()/请求失败后要执行的代码);,19/51,学员操作$.ajax()实现邮箱验证,需求说明使用$.ajax()实现无刷新邮箱验证在用户注册页面当E-mail文本框失去焦点时，判断用户是否存在,练习,20/51,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,共性问题集中讲解,21/51,常用参数,$.get()简介,语法,$.get(url,data,success(resp,status,xhr),dataType);,22/51,$.get()用法,使用$.get()实现异步交互以上代码等价于,示例,$.ajax(url:url,data:data,type:get,success:function(result)/省略代码);,$.get(url,data,function(result)/省略将服务器返回的数据显示到页面的代码);,23/51,常用参数,$.post()简介,语法,$.post(url,data,success(resp,status,xhr),dataType);,24/51,$.post()用法,使用$.post()实现异步交互以上代码等价于,示例,$.post(url,data,function(result)/省略将服务器返回的数据显示到页面的代码);,$.ajax(url:url,data:data,type:post,success:function(result)/省略代码);,25/51,常用参数,load()简介,语法,$(selector).load(url,data,function(result,status,xhr);,26/51,load()用法,使用load()实现异步交互以上代码等价于,示例,$(#nameDiv).load(url,data);,$.get(url,data,function(result)$(#nameDiv).html(result););,27/51,学员操作使用$.get()和$.post()实现邮箱验证,需求说明实现无刷新邮箱验证在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在分别使用$.get()和$.post()方法实现以上需求,练习,28/51,学员操作load()实现邮箱验证,需求说明实现无刷新邮箱验证在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在,练习,29/51,认识JSON,JSON（JavaScriptObjectNotation）一种轻量级的数据交换格式通常用于在客户端和服务器之间传递数据,id:4,name:梅西,pwd:6666,30/51,示例,为什么使用JSON,JSON出现之前的数据交互方式：XMLXML难于解析体积比较大读写不够灵活JSON优点轻量级交互语言结构简单易于解析,31/51,语法,JOSN简介2-1,示例,varperson=name:张三,age:30;,varJSON对象=key:value,key:value,;,JSON对象,32/51,语法,JOSN简介2-2,示例,varJSON数组=value,value,;,varcountryArray=中国,美国,俄罗斯;varpersonArray=name:张三,age:30,name:李四,age:40,JSON数组,33/51,定义JSON对象和数组2-1,定义JSON格式数据并在页面输出,问题,34/51,定义JSON对象和数组2-2,定义JSON格式的user对象，并在id为objectDiv的DIV元素中输出定义JSON格式的字符串数组，并在id为arrayDiv的DIV元素中输出定义JSON格式的user对象数组，并在id为objectArrayDiv的DIV元素中使用输出,35/51,分析,常用参数,$.getJSON()简介,语法,$.getJSON(url,data,success(result,status,xhr),36/51,$.getJSON()用法,使用$.getJSON()实现异步交互以上代码等价于,示例,$.getJSON(url,data,success(result)/省略将服务器返回的数据显示到页面的代码);,$.ajax(url:url,data:data,type:get,dataType:json,success:function(result)/省略代码);,37/51,学员操作$.ajax()传递JSON数据,需求说明使用$.ajax()方法实现无刷新邮箱验证在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在在服务器根据验证结果返回一段JSON格式的字符串，并在客户端解析该字符串，将结果显示到页面,练习,38/51,学员操作$.getJSON()实现邮箱验证,需求说明使用$.getJSON()方法实现无刷新邮箱验证在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在在服务器根据验证结果返回一段JSON格式的字符串，并在客户端解析该字符串，将结果显示到页面,练习,39/51,总结2-1,Ajax主要包括的技术:XMLHttpRequestJavaScriptDOM+CSSXML、JSON或HTML等使用Ajax需要以下步骤创建XMLHttpRequest对象设置回调函数初始化XMLHttpRequest组件发送请求使用Ajax正确处理服务器数据的条