11.Ajax与jQuery.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,/39,Ajax,与,jQuery,线上线下,平台预习,2,/39,本课任务,使用,jQuery,实现用户名的异步验证,使用,jQuery,实现注册邮箱的异步验证,使用,JSON,传递数据,3,/,39,本课目标,理解,Ajax,技术,掌握,jQuery,的,$.ajax(),方法,掌握,JSON,的使用,4,/,39,认识,Ajax,Web 2.0,的特点,用户贡献内容,内容聚合,RSS,更丰富的“用户体验”,自动补全,内容聚合,每个小“窗口”可,以关闭、最小化和,进行个性化设置,所有操作都是在,不刷新窗口的情况下完成的,!,5,/,39,无刷新：不刷新整个页面，只刷新局部,无刷新的好处,只更新部分页面，有效利用带宽,提供连续的用户体验,提供类似,C/S,的交互效果，,操作更方便,为什么使用,Ajax,只是登录，没必要,刷新“庞大”的页面,6,/,39,只刷新局部页面，,视频继续播放,自动完成功能,拖动、放大、缩小,Google,地图,传统,Web,与,Ajax,的差异,差异,方式,说 明,发送请求方式不同,传统,Web,浏览器发送同步请求,Ajax,技术,异步引擎对象发送请求,服务器响应不同,传统,Web,响应内容是一个完整页面,Ajax,技术,响应内容只是需要的数据,客户端处理方式不同传统,Web,需等待服务器响应完成并重新加载整个页面后用户才能进行操作,Ajax,技术,可以动态更新页面中的部分内容,不影响用户在页面进行其他操作,7,/,39,Ajax,简介,Ajax,：异步刷新技术,8,/,39,Ajax,工作流程,Ajax,技术,主要开发语言,封装请求或响应,的数据格式,修改页面元素、改变,样式、实现局部刷新,Ajax,技术的核心，,XMLHttpRequest,对象,9,/,39,XMLHttpRequest 3-1,整个,Ajax,技术的核心,提供异步发送请求的能力,常用方法,方 法,说 明,open(String method,String url,boolean async,String user,String password,),创建一个新的,HTTP,请求,send(String data),发送请求到服务器端,abort(),取消当前请求,setRequestHeader(String header,String value),设置请求的某个,HTTP,头信息,getResponseHeader(String header),获取响应的指定,HTTP,头信息,getAllResponseHeader(),获取响应的所有,HTTP,头信息,10,/,39,XMLHttpRequest 3-2,事件,onreadystatechange,：指定回调函数,常用属性,readyState,：,XMLHttpRequest,的状态信息,就绪状态码,说 明,0,XMLHttpRequest,对象未完成初始化,1,XMLHttpRequest,对象开始发送请求,2,XMLHttpRequest,对象的请求发送完成,3,XMLHttpRequest,对象开始读取响应,4,XMLHttpRequest,对象读取响应结束,11,/,39,XMLHttpRequest 3-3,常用属性（续）,status,：,HTTP,的状态码,statusText,：返回当前请求的响应状态,responseText,：以文本形式获得响应的内容,responseXML,：将,XML,格式的响应内容解析成,DOM,对象,状态码,说 明,200,服务器正确返回响应,404,请求的资源不存在,500,服务器内部错误,403,没有访问权限,就绪状态是,4,且状态码,是,200,，表示正确完成,!,12,/,39,使用,Ajax,验证用户名,2-1,实现无刷新用户名验证,当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在,如果已经存在提示“用户名已被使用”，如果不存在则提示“用户名可以使用”,问题,13,/,39,使用,Ajax,验证用户名,2-2,使用文本框的,onBlur,事件,使用,Ajax,技术实现异步交互,创建,XMLHttpRequest,对象,通过,XMLHttpRequest,对象设置请求信息,向服务器发送请求,创建回调函数，根据响应状态动态更新页面,编写服务器端处理客户端请求,分析,演示示例,1,：使用,Ajax,实现用户名验证,14,/,39,GET,请求和,POST,请求的区别,步 骤,请求方式,实 现 代 码,初始化组件,GET,xmlHttpRequest.open(,GET,url,true);,POST,xmlHttpRequest.open(,POST,url,true);,xmlHttpRequest,.setRequestHeader(Content-Type,application/x-www-formurlencoded);,发送请求,GET,xmlHttpRequest.send(,null,);,POST,xmlHttpRequest.send(,key=xxx&type=12&year=2016,);,15,/,39,课堂练习,实现无刷新邮箱验证,需求说明,实现无刷新验证注册邮箱,在用户注册页面，当,E-mail,文本框失去焦点时判断邮箱是否已被使用,完成时间：,20,分钟,练习,16,/,39,共性问题集中讲解,常见问题及解决办法,代码规范问题,调试技巧,共性问题集中讲解,17,/,39,使用,jQuery,实现,Ajax,传统方式实现,Ajax,的不足,步骤繁琐,方法、属性、常用值较多不好记忆,处理复杂结构的响应数据（如,XML,格式）比较烦琐,浏览器兼容问题,jQuery,将,Ajax,相关操作都进行了封装,!,问题,18,/,39,$.ajax(),简介,2-1,常用属性参数,$.ajax(,settings,);,参 数,类 型,说 明,url,String,发送请求的地址，默认为当前页地址,type,String,请求方式，默认为,GET,data,PlainObject,或,String,或,Array,发送到服务器的数据,dataType,String,预期服务器返回的数据类型，包括：,XML,、,HTML,、,Script,、,JSON,、,JSONPtext,timeout,Number,设置请求超时时间,global,Boolean,表示是否触发全局,Ajax,事件，默认为,true,19,/,39,$.ajax(),简介,2-2,常用函数参数,参 数,类 型,说 明,beforeSend,Function(jqXHR jqxhr,PlainObject settings),发送请求前调用的函数,success,Function(,任意类型,result,String textStatus,jqXHR jqxhr),请求成功后调用的函数,参数,result,：可选，由服务器返回的数据,error,Function(jqXHR jqxhr,String textStatus,String errorThrown),请求失败时调用的函数,complete,Function(jqXHR jqxhr,String textStatus),请求完成后（无论成功还是失败）调用的函数,20,/,39,使用,$.ajax(),发送异步请求,2-1,如何使用,$.ajax(),方法实现无刷新用户名验证？,问题,21,/,39,使用,$.ajax(),发送异步请求,2-2,$.ajax(,url :url,/,要提交的,URL,路径,type :get,/,发送请求的方式,data :data,/,要发送到服务器的数据,dataType:text,/,指定传输的数据格式,success :function(result),/,请求成功后要执行的代码,error :function()/,请求失败后要执行的代码,);,示例,演示示例,2,：使用,$.ajax(),实现用户名验证,22,/,39,课堂练习,使用,$.ajax(),实现邮箱验证,需求说明,使用,$.ajax(),实现无刷新邮箱验证,完成时间：,15,分钟,练习,23,/,39,共性问题集中讲解,常见问题及解决办法,代码规范问题,调试技巧,共性问题集中讲解,24,/,39,认识,JSON,JSON,（,JavaScript Object Notation,）,一种轻量级的数据交换格式,采用独立于语言的文本格式,通常用于在客户端和服务器之间传递数据,JSON,的优点,轻量级交互语言,结构简单,易于解析,25,/,39,定义,JSON2-1,定义,JSON,对象,var person=name:,张三,age:30,spouse:null;,var JSON,对象,=name:value,name:value,;,示例,语法,26,/,39,定义,JSON2-2,定义,JSON,数组,var JSON,数组,=,value,value,;,var countryArray=,中国,美国,俄罗斯,;,var personArray=name:,张三,age:30name:,李四,age:40 ;,语法,示例,27,/,39,读取和展示,JSON,数据,定义,JSON,格式数据并在页面输出,演示示例,3,：使用,jQuery,处理,JSON,数据,28,/,39,课堂练习,以常见页面元素展示,JSON,数据,需求说明,定义,JSON,格式的用户数组,用户信息包括,用户,ID,（,userid,）,姓名（,username,）,住址（,address,）,手机（,mobile,）,将用户信息分别展现为表格和下拉列表形式,完成时间：,20,分钟,练习,29,/,39,共性问题集中讲解,常见问题及解决办法,代码规范问题,调试技巧,共性问题集中讲解,30,/39,在,Ajax,中使用,JSON,数据格式,2-1,使用,Ajax,技术改造管理员首页,使用,Ajax,技术初始化加载全部新闻,使用,JSON,格式封装新闻信息,31,/,39,在,Ajax,中使用,JSON,数据格式,2-2,管理员登录成功直接进入管理员首页,在管理员首页通过,Ajax,技术加载新闻数据,修改,Servlet,中查询新闻列表的实现，以,JSON,数组格式输出查询结果,在管理员首页的回调函数中解析并更新页面内容,实现步骤,演示示例,4,：在,Ajax,中使用,JSON,生成管理员新闻页面,32,/,39,课堂练习,在,Ajax,中使用,JSON,生成管理员新闻页面,需求说明,使用,Ajax,技术改造管理员首页,使用,Ajax,技术初始化加载全部新闻,使用,JSON,格式封装新闻信息,练习,完成时间：,2,5,分钟,33,/,39,课堂练习,在,Ajax,中使用,JSON,生成主题管理页面,2-1,需求说明,在管理员页面点击“编辑主题”链接时，以,Ajax,方式获取主题列表，以,JSON,格式返回结果,在管理员页面点击“编辑新闻”链接时，以,Ajax,方式获取新闻列表，以,JSON,格式返回结果,练习,34,/,39,课堂练习,在,Ajax,中使用,JSON,生成主题管理页面,2-2,修改管理员页面的超链接，使用脚本注册点击事件,在超链接点击事件中通过,Ajax技术加载主题数据,修改,Servlet,中查询主题列表的实现，以,JSON,数组格式输出查询结果,在页面的回调函数中解析并更新页面内容,完成时间：,15,分钟,提示,35,/,39,共性问题集中讲解,常见问题及解决办法,代码规范问题,调试技巧,共性问题集中讲解,36,/,39,总结,异步,请求,机制与,传统请求的区别,XMLHttpRequest,对象事件、属性和方法,Ajax,请求的实现步骤,$.ajax(),封装,Ajax,请求,参数以,JSON,格式出现,JSON,一种轻量级的数据交换格式,定义和访问,37,/,39,问题及作业,集中问题,&,课后作业,38,/39,扫我有更多精彩课程呦,