AJAX基础技术应用.doc

第一节:ajax基础技术应用 目标： 理解AJAX原理和执行流程； 能编写常用AJAX功能实现代码。 目 录 1.什么是AJAX 2 1.AJAX简介： 2 2.AJAX中用到的技术： 2 3.AJAX与传统web的区别 2 2.三步AJAX:验证重复用户名 3 1.业务流程说明： 3 2.AJAX第一步：创建XMLHTTPRequest对象 4 3.AJAX第二步：编写回调方法 4 4.AJAX第三步：发送异步请求 5 3.AJAX发送请求方法详解:get与Post请求： 8 4.XMLHTTPRequest对象的属性和方法详解： 9 5.AJAX五板斧 10 1.动态替换页面内容 10 2.AJAX实现无刷持续更新 11 3.联动下拉列表： 13 4.解析XML内容到table中 17 5.AutoSuggest实现 21 总结和任务： 32  1.什么是AJAX 1.AJAX简介： AJAX是实现web2.0服务中的核心技术，全称为“异步JavaScript和XML技 术”(Asynchronous JavaScript and XML)；Ajax的核心技术理念在于使用XMLHttpRequest对象发送异步请求。最初为XMLHttpRequest对象提供浏览器支持的是微软公司。实际上，Ajax不是一种技术，而是几种技术。每种技术都具有独特之处，合在一起就形成功能强大的新技术。Ajax包括：XMLHttpRequest：浏览器内置的用以进行异步数据接收Css+div:对用户而言，AJAX的价值是用户界面更加友好这当然还是依靠css+div实现； DOM模型：AJAX常见的技巧就是使用js响应dom组件事件或更新其； Xml:XML仅是一种传输数据的格式，在ajax应用中常以xml格式在c/s间交换数据； Html:这个不用说了，浏览器上展示东东归根到底是靠这玩意。 如果你在实践本节应用时，对css+div+dom技巧还不是很熟练，就做做边回头看我们前面所讲的css+div和js+dom技术的教程。 你可能很奇怪，AJAX技术中没有java的身影。即确如此，AJAX所关注的是，如何在用户端的展示，即游览器上，java的代码，除了正在淘汰中的applet,是不可能跑到游览器上的。可以这样理解：ajax是独立与后端服务器的一种技术，应用AJAX时，与后端采用何种编程语言无关,当然与你对这种语言的熟练程序有关。 3.AJAX与传统web的区别 传统web页面的服务是基于http协议的，所以它永远也改变不了“请求—响应”的模式。你必须“点”一下，它才能动一下，而且每次都必须刷新整个页面，这也意味者服务器要将所有页面上的数据传送下来，即使你的点击只是需要改变页面上一行十个字的内容。 AJAX代码运行在游览器和服务器之间，通过编程，你可以让ajax代码仅从服务器上提取需要改变的数据，也只改变页面中需要改变的某一部分：某一个div层、表格中的某一个单元格。用户不会看到页面全部被刷新了。 传统的Web交互流程如下图示例： 当用点点击“登陆”后，浏览器会将输入的数据发送给服务器，服务器处理完毕返回一张新的网页这个过程是同步的，即用户的一个操作流程必须是由“发送请求+返回响应”组成。结果就是游览器重新装载了一张新的页面。 在AJAX应用中，会成为如下情景： 当使用了ajax技术时，用户发送请求时(点击事件)将交由ajax代码处理，用户请求即完成如上图所示流程1。AJAX代码随后自己将请求发送给服务器，一但服务器返回的响应，AJAX代码即根据返回的业务更新页面上的某个部分，即在流程2中，是由AJAX处理完成，与用户操作流程无关。 接下来，我们以一个典型的示例：即时验证是否有重复用户名的AJAX应用为例，讲解AJAX编写的基本步步骤： 2.三步AJAX:验证重复用户名 1.业务流程说明： 程序界面如下图示： 当用户输入注册用户名后，焦点离开第一个输入框，即触发输入框的onBlur事件，这个事件将调用js编写的ajax代码，将用户输入发送给服务器验证，并将服务器返回的结果消息显示在输入框下面的div层上。这个流程将由三部分组成： Login.html:用户界面； CheckUserNameServlet.java:服务器上用以验证用户名的Servlet，返回一个字符串做为验证结果；Js编写的AJAX代码:请送请求，并更新页面；我们先从关键的AJAX代码编写开始： 2.AJAX第一步：创建XMLHTTPRequest对象 XMLHTTPRequest是AJAX应用中的核心API，它被js调用以向服务器发送请求，并异