山东大学web技术程教学PPT课件.ppt

第15章Ajax设计方法 2 Ajax概述Ajax工作原理Ajax实现方法介绍 概述 1 什么是Ajax AsynchronousJavaScriptandXML 以及DHTML等 的缩写 意为异步JavaScript和XML Ajax不是一种新的技术 而是多种原有技术的集合 由HTML JavaScript 技术 DHTML和DOM组成 它可以提供介于桌面应用程序和Web应用程序的中间选择 构建更为动态和响应更为灵敏的Web应用程序 Ajax是一种客户端设计方法 可以与J2EE NET PHP Ruby和CGI脚本交互 它并不关心服务器是什么 Ajax提供与服务器异步通信的能力 从而使用户从请求 响应的循环中解脱出来 刷新表单不需要刷新整个网页页面 3 2 Ajax工作原理 4 3 XMLHttpRequest 当用户填写表单时 数据发送给一些JavaScript代码而不是直接发送给服务器 相反 JavaScript代码捕获表单数据并向服务器发送请求 创建XMLHttpRequest对象varxmlHttp newXMLHttpRequest 5 4 getElementById 方法 通过getElementById 方法使用JavaScript代码捕获和设置字段值 获取 phone 字段的值赋给变量phonevarphone document getElementById phone value 将response值赋给表单中的单元格document getElementById order value response 0 document getElementById address value response 1 6 varxmlHttp false cc on if jscript version 5 try xmlHttp newActiveXObject Msxml2 XMLHTTP catch e try xmlHttp newActiveXObject Microsoft XMLHTTP catch e2 xmlHttp false end if xmlHttp 7 5 创建XMLHttpRequest对象 处理Mozilla和非Microsoft浏览器获取XMLHttpRequest 使用Microsoft浏览器获取XMLHttpRequest 8 6 发出Ajax请求 functioncallServer 从Web表单中获取city和state单元格的值varcity document getElementById city value varstate document getElementById state value 仅当两个单元格的值不为空时 继续执行下面的代码if city null city return if state null state return 建立URL escape函数是一个顶级JavaScript函数 可将属性值添加到URL中varurl scripts getZipCode php city escape city True 异步连接False 同步连接 服务器响应后触发updatePage 9 7 处理服务器响应 functionupdatePage if xmlHttp readyState 4 varresponse xmlHttp responseText document getElementById zipCode value response 0 未初始化 uninitialized 1 正在加载 loading 2 加载完毕 loaded 3 交互 interactive 4 完成 complete 从服务器进程返回的数据的字符串形式 10 8 启动一个Ajax过程 City State ZipCode 11 第15章小结 Ajax概述Ajax工作原理Ajax实现方法