《传智播客ajax》由会员分享，可在线阅读，更多相关《传智播客ajax（26页珍藏版）》请在金锄头文库上搜索。
1、高级软件人才实作培训专家 !北京传智播客教育 Ajax实战讲师：满一航高级软件人才实作培训专家 !北京传智播客教育 内容大纲lAjax定义及应用场合lXMLHttpRequest对象详解l3种响应格式lAjax技术基础之DOM编程lAjax技术基础之jQueryl实例：配合服务器端验证用户名存在l实例：实现省市县数据3级联动l实例：实现单一页面增删改查l实例：仿google自动完成功能l进一步简化AjaxDWR框架使用高级软件人才实作培训专家 ! Ajax技术的定义北京传智播客教育 l原始含义lA - Asynchronousl指请求是异步的，它不必等到响应返回才能执行其他操作，响应返回会触
2、发js事件，事件发生后处理响应，异步的特性由XMLHttpRequest对象提 供lj - javascriptl实现Ajax应用所使用的语言，其实反过来说Ajax是javascript的一个延伸或 组成部分都不为过lAjax主要通过DOM这个API来动态生成页面内容la - andlX - XMLlAjax技术诞生初期，服务器返回响应时的常用格式，但以逐步为JSON格 式所取代l可以看出，Ajax是以上多门技术的共同使用，实际应用中，还会结合大量的HTML与 CSS代码高级软件人才实作培训专家 !Ajax的应用场合北京传智播客教育 lAjax 的目的用于改善用户体验l它能够在请求发送时，不影
3、响页面其他部分的代码执行，因此可以做 到局部更新页面l在此基础上，原来 不使用Ajax时，很多都要跳转到其他页面的操作， 都可以使用Ajax技术加以改进，使之在同一个页面上完成。l一些常见的例子有：l检查用户名是否存在l将页面分为多个组成部分，分别加载 lGoogle SuggestlGoogle地图高级软件人才实作培训专家 !北京传智播客教育 浏览器的普通交互方式高级软件人才实作培训专家 !北京传智播客教育 Ajax的交互方式高级软件人才实作培训专家 ! XHR对象APIl构造 W3c浏览器 var xhr = new XMLHttpRequest(); 老版本IE浏览器(6.0以下) va
4、r xhr = new ActiveXObject(microsoft.xmlhttp);l属性 xhr.readyState xhr.status xhr.responseText xhr.responseXMLl方法 xhr.open(请求方式,地址,异步?); xhr.send(请求体内容); xhr.setRequestHeader(请求头属性名,请求头属性值);l事件 xhr.onreadystatechange 北京传智播客教育 高级软件人才实作培训专家 ! 实例：配合服务器端验证用户名存在北京传智播客教育 高级软件人才实作培训专家 ! 提高l书写更通用的xhr对象访问服务器方法北
5、京传智播客教育 高级软件人才实作培训专家 ! XHR返回响应的常用格式lHTML片段lXMLlJSONl响应如果是XML和JSON，那么优点是响应仅仅返回 的数据本身，而没有限定数据的表现形式，具体是用 表格？还是列表？还是下拉框来表示数据完全靠JS代 码(DOM)控制l响应如果是HTML片段，那么优点是比较符合传统习 惯，缺点是返回的数据格式已经固定，不够灵活北京传智播客教育 高级软件人才实作培训专家 ! 实例l现在要求使用Ajax显示所有员工信息 使用HTML格式的结果 使用XML格式的结果 使用DOM API解析xhr.responseXML 使用DOM API动态生成表格 使用JSON
6、格式的结果 JSON数据的产生 手工生成 使用第三方库- JSONLib 使用eval() 解析xhr.responseText 使用DOM API动态生成表格北京传智播客教育 高级软件人才实作培训专家 ! 比DOM更方便的库jQueryljQuery是使用另外一条API操作HTML元素(包括增删 改查)，它底层仍然是DOM，但使用起来方便了很多 ，尤其是jQuery充分考虑了浏览器的兼容性问题，使 得程序员可以专注于业务代码ljQuery的口号是write less, do more.l使用完成一个功能通常分为两步： 找到页面元素表示为jQuery对象 为所有找到的jQuery对象执行具体操
7、作，例如添加事件，或 是修改属性等等北京传智播客教育 高级软件人才实作培训专家 ! jQuery的选择器l使用jQuery选择器能够让我们快速查找到 jQuery对象，选择器的语法大部分与CSS选择 器语法一样，降低了学习成本l常见选择器 元素选择器 ID选择器 class选择器 子孙级选择器 直接子元素 位置(:first :last :eq(0-n) :even :odd)北京传智播客教育 高级软件人才实作培训专家 ! 常见选择器(续)l子元素选择(:first-child :last-child :nth-child(1-n)l可见性(:visible :hidden)l属性选择器l表单
8、元素(:button :checkbox :checked)北京传智播客教育 高级软件人才实作培训专家 ! jQuery对象ljQuery对象不等同于DOM 对象，它包含了 DOM对象 他提供了额外的属性和方法(主要是方法) jQuery的方法支持链式调用 选择器即使查找到一个jQuery对象，也是将结果看做一个集 合 调用一个jQuery对象集合的方法，会影响集合内所有jQuery 对象 eq()，get(), each()北京传智播客教育 高级软件人才实作培训专家 ! jQuery方法分类l动画相关 show(), hide(), toggle() slideDown(), slideUp
9、(), slideToggle() fadeIn(), fadeOut(), fadeTo()l样式 css(), addClass(), removeClass(), toggleClass() width(), height(), offset()l属性与内容 attr(), val(), html(), text(), data()北京传智播客教育 高级软件人才实作培训专家 ! jQuery方法分类l事件相关方法 click(), change(), blur(), mouseover() bind(), live() 事件对象 preventDefault(); stopPropaga
10、tion(); pageX pageY北京传智播客教育 高级软件人才实作培训专家 ! jQuery方法分类l元素创建l建立父子关系 append(), appendTo() prepend(), prependTo() before(), insertBefore(), after(), insertAfter()l元素删除，子元素删除 remove(), empty()北京传智播客教育 高级软件人才实作培训专家 ! jQuery方法分类l元素间导航 找父元素，找祖先元素 parent(), parents() 找子元素，找子孙元素 children(), find() 找兄弟元素 next(
11、), nextAll(), prev(), prevAll()lAjax方法 $.ajax $.get $.post .load()北京传智播客教育 高级软件人才实作培训专家 ! jQuery插件l如何扩展jQuery 添加全局方法 添加jQuery对象方法北京传智播客教育 高级软件人才实作培训专家 ! jQuery官方插件jQueryUIldialogltabsldatepickerlaccordionlautocomplete北京传智播客教育 高级软件人才实作培训专家 ! 阶段练习l服务器端某目录有多个图片，每个图片有 简单描述l现在要求客户端通过Ajax读取这些图片， 一次显示一幅，每隔
12、3秒钟切换另一张l鼠标移动到某张图片上，弹出一个描述窗 口，显示该图片的描述北京传智播客教育 高级软件人才实作培训专家 ! DWR扩展l什么是DWR direct web(HTTP) remoting (远程调用) 它的目标是通过js对象与java对象间建立一种 映射关系，底层通过Ajax来达到js对象 来 调用 Java对象里的对应方法 特点： 隐藏了发送XHR请求的细节， 并自动完成js对象 json字符串 javabean 的转换北京传智播客教育 高级软件人才实作培训专家 ! 使用步骤1.添加jar包2.配置web.xml3.配置dwr.xml 建立js对象与java对象的对应关系4.Html页面导入由dwr生成的js文件5.调用该js文件提供js对象的方法 该方法对应服务器端java对象的同名方法 java方法调用返回值，被转换为json字符串作为响应返回 客户端通过回调函数接收该json字符串北京传智播客教育 高级软件人才实作培训专家 ! DWR工作流程北京传智播客教育 高级软件人才实作培训专家 ! DWR使用注意事项l方法重载l自定义bean转换l过滤要转换的属性l访问sessionl批处理北京传智播客教育
