ppt-AJAX技术入门主讲：张伟.ppt

千里之行始于足下 AJAX技术入门主讲:张伟 流行的AJAX技术体验 Google Map 流行的AJAX技术体验 Google Map AJAX的一个简单的示例，登录验证 AJAX的一个简单的示例，登录验证 AJAX的一个简单的示例，登录验证 AJAX的一个简单的示例，登录验证 AJAX的一个简单的示例，登录验证 XMLHttpRequest对象的常用方法 XMLHttpRequest对象的常用属性 网站前台相关的资源推荐 网站前台相关的资源推荐 网站前台相关的资源推荐 * | * 北大青鸟重庆足下培训中心 ? Copyright Zuxia 2007 北大青鸟重庆足下培训中心 ? Copyright Zuxia 2007 课程概要 1、什么是AJAX 2、传统B/S模式应用的问题 3、在B/S模式开发中应用AJAX的优势 4、流行的AJAX技术体验 5、AJAX的一个简单的示例，登录验证 6、网站前台相关的资源推荐 什么是AJAX AJAX是Asynchronous(异步) javascript and XML的缩写。 AJAX并不是一种全新的技术，而是一些现有技术的集成使用。 HTML和CSS 基于W3C标准的表示技术。 DOM 文档对象模型 Document Object Model(文档对象模型)，用于动态改变文档结构的技术。 XML和XSLT 标准的跨平台数据交换技术 什么是AJAX XMLHttpRequest 集成于客户端浏览器之中的异步请求对象，它是AJAX的核心。 Javascript 一种客户端脚本技术，它将以上所有技术结合使用，是AJAX技术中的粘和剂 在AJAX出现以前，Javascript的应用仅限于进行一些客户端表单验证，以及网页特效等等。随着AJAX的诞生，Javascript成为了一种主流的编程语言，得到了进一步的研究。 传统B/S模式应用的问题 传统的B/S模式应用情景，客户端请求服务器，必须得到服务器响应之后才能再次进行请求。 传统B/S模式应用的问题 此种模式的缺点如下： 用户体验不友好：当用户在浏览器中进行操作，请求服务器之后，浏览器就会处于空白状态，用户必须等到响应页面重新显示出来才能继续操作。 浪费网络带宽：如上一点所述，当一个包含很多图片和FLASH的页面必须更新上面一小部分内容时，就必须要完全刷新，这样对服务器的负载会增大。 在B/S模式开发中应用AJAX的优势 应用AJAX之后的B/S模式程序情景： 在B/S模式开发中应用AJAX的优势 如上图所见。客户端与服务器之间多了一层 Ajax engine，此层负责将客户端的请求发送到服务器，而服务器的响应也是先由Ajax engine接收到，再更新到客户端浏览器上。 这样客户端就可以不用刷新整个页面，而是通过Ajax引擎向服务器发出请求，再由服务器响应后直接更新到页面中，并且客户端可以连续发出多个请求，而不必等到服务器响应之后才能再次请求，这就是我们所说的“异步”。 当页面上的文本框失去焦点时，通过Javascript请求服务器，验证用户名是否存在。 创建XMLHttpRequest对象 1、Netscape Mozilla 和非 Microsoft 浏览器 xmlhttp = new XMLHttpRequest(); 2、使用 Microsoft 浏览器 xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); 设置当服务器响应时接收处理的Javascript函数 //当与服务器通信状态改变时调用的函数 xmlhttp.onreadystatechange = setUNameErrorMessage; 使用XMLHttpRequest对象发起请求。 //打开一个GET方式的请求，用URL重写传递参数给Servlet xmlhttp.open(get,/myweb/loginvalidateservlet?txtUName=+uName); //发起请求。 xmlhttp.send(null); 在接收服务器响应的函数中进行对响应的处理。 //交互完成 if(xmlhttp.readyState==4) { //Http状态码 200。表示服务器已成功处理请求 if(xmlhttp.status==200) { //得到服务器响应的文本 var respTxt = xmlhttp.responseText; } } 中国互动出版社：/ 中国CSDN：/ Javascript论坛：/ mb)m(l0Kg3cx(oPgTyFL-%yUdpR