AJAX基础技术应用

《AJAX基础技术应用》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第一节:ajax基础技术应用目标：1.理解AJAX原理和执行流程；2.能编写常用AJAX功能实现代码。H录1・什么是AJAX21.AJAX简介:22.AJAX中用到的技术：23.AJAX与传统web的区别22.三步AJAX:验证重复用户名31•业务流程说明：32.AJAX第一步：创建XMLHTTPRequest对象43.AJAX第二步：编写回调方法44.AJAX第三步：发送异步请求53.AJAX发送请求方法详解:get与Post请求：84.XMLHTTPRequest对象的属性和方法详解：95.AJAX五板斧101•动态替换页面内容102.AJAX

2、实现无刷持续更新123•联动下拉列表：144.解析XML内容到table中185.AutoSuggest实现22总结和任务：331・什么是AJAX1.AJAX简介：AJAX是实现web2.0服务中的核心技术，全称为“异步JavaScript和XML技术”(AsynchronousJavaScriptandXML)；Ajax的核心技术理念在于使川XMLHttpRequest对彖发送异步请求。最初为XMLHttpRequest对象提供浏览器支持的是微软公司。AJAX技术的出现，可以说是挽救了传统的B/S结构，并赋web应用新的空命。如果要我用简单的一句

3、话讲AJAX是什么：我就会说是在b/s结构上给予用户c/s的界面观感。2.AJAX中用到的技术：实际上，Ajax不是一种技术，而是几种技术。每种技术都具有独特Z处，合在一起就形成功能强大的新技术。Ajax包括：JavaScript:实现客户端的数据发送和界面更新，是ajax实现的编程语言；XMLHttpRequest：浏览器内置的用以进行异步数据发送和接收的対象，是AJAX核心対象；Css+div:对用户而言，AJAX的价值是用户界iflj更加友好这当然还是依靠css+div实现；D0M模型：AJAX常见的技巧就是使用js响应dom组件事件或更新其

4、；Xml:XML仅是一种传输数据的格式，在ajax应用中常以xml格式在c/s间交换数据；Html:这个不用说了，浏览器上展示东东归根到底是靠这玩意。如杲你在实践本节应用时，对css+div+dom技巧还不是很熟练，就做做边回头看我们前而所讲的css+div和js+dom技术的教程。你可能很奇怪,AJAX技术中没有java的身影。即确如此,AJAX所关注的是,如何在用户端的展示，即游览器上，壮眩的代码，除了止在淘汰中的applet,是不可能跑到游览器上的。可以这样理解：ajax是独立与后端服务器的一种技术，应用AJAX时，与后端采用何种编程语言无关

5、，当然与你对这种语言的熟练程序有关。3.AJAX与传统web的区别传统web页而的服务是基于http协议的，所以它永远也改变不了“请求一响应”的模式。你必须“点”一下，它才能动一下，而口每次都必须刷新整个页面，这也意味者服务器要将所有页面上的数据传送下来，即使你的点击只是需要改变页面上一行十个字的内容。AJAX代码运行在游览器和服务器之I'可，通过编程，你可以让ajax代码仅从服务器上提取需要改变的数据，也只改变页而中需要改变的某一部分：某一个div层、表格中的某一个单元格。用八不会看到页而全部被刷新了。当用点点击“登陆”后，浏览器会将输入的数据发

6、送给服务器，服务器处理完毕返回一张新的网页一-这个过程是同步的，即用户的一个操作流程必须是由“发送请求+返回响应”组成。结果就是游览器重新装载了一张新的页而。在AJAX应用中，会成为如下情景：浏览器：密码:帐号:Pagel***Errorpwd1登陆AJAX代码服务器：CheckLoginServlet{当使用了ajax技术吋，用户发送请求吋（点击事件）将交由ajax代码处理，用户请求即完成一-如上图所示流程1。AJAX代码随后白己将请求发送给服务器，一•但服务器返冋的响应，AJAX代码即根据返冋的业务更新贝而上的某个部分，即在流程2中，是由AJA

7、X处理完成，与用户操作流程无关。接下来，我们以一个典型的示例：即时验证是否有重复用户名的AJAX应用为例，讲解AJAX编写的基本步步骤：2.三步AJAX:验证重复用户名1.业务流程说明:程序界面如下图示:於AJAX检测重复用户名蓝杰信MSMetJava.cm一TindovsIntern▼

8、

9、^-

10、http：//localhost：8088/netjavaAJAX/login.html环囲AJAX检测重复用户名蓝杰信息@NetJava.cn注册用户名：

11、netjava要注册的用户名皿tjava己存在!注册密码：

12、注册

13、当用户输入注册用户名后，焦点离开

14、第一个输入框，即触发输入框的onBlur事件，这个事件将调用js编写的ajax代码，将用八输入发送给服务器验证，并将服务器