jsp程序设计入门-沈泽刚、秦玉平-主编的java-web-第二版-第10章-Ajax技术基础.pptVIP

第10章

AJAX技术根底;;本章内容;AJAX技术概述;AJAX技术概述;10.1Web2.0与AJAX技术概述;10.1.1什么是AJAX;10.1.1什么是AJAX;10.1.2AJAX相关技术简介;10.1.2AJAX相关技术简介;1.XHTML与CSS;2.JavaScript脚本语言;3.DOM;4.XML与XSLT;4.XML与XSLT;4.XML与XSLT;4.XML与XSLT;5.XMLHttpRequest;本章内容;10.2XMLHttpRequest对象;10.2.1创立XMLHttpRequest对象;10.2.1创立XMLHttpRequest对象;10.2.2XMLHttpRequest的属性;10.2.3XMLHttpRequest的方法;10.2.3XMLHttpRequest的方法;下面是一个简单的HTML页面。其中有一个按钮，当单击该按钮时将向效劳器发送一个异步请求。效劳器将发回一个简单的静态文本文件作为响应。在处理这个响应时，会在警告窗口中显示该文本文件的内容。

程序10.2simpleRequest.html;10.2.5AJAX的交互模式;一个客户事件触发一个AJAX事件。客户事件从简单的onchange事件到某个特定的用户动作，很多这样的事件都能触发AJAX事件。例如：

inputtype=buttonvalue=开始异步请求

onclick=startRequest();/

这里，当用户单击按钮时，将触发onclick事件，程序调用startRequest()函数。

;在startRequest()函数中通过调用createXMLHttpRequest()函数创立了XMLHttpRequest对象，代码如下：

functioncreateXMLHttpRequest(){

if(window.ActiveXObject){

xmlHttp=newActiveXObject(Microsoft.XMLHTTP);

}

elseif(window.XMLHttpRequest){

xmlHttp=newXMLHttpRequest();

}

};在向效劳器发出请求之前，应该通过XMLHttpRequest对象的onreadystatechange属性设置回调函数。当XMLHttpRequest对象的内部状态改变时就会调用回调函数，因此回调函数是处理响应的地方。

functionstartRequest(){

createXMLHttpRequest();

xmlHttp.onreadystatechange=handleStateChange;

xmlHttp.open(GET,simpleResponse.xml,true);

xmlHttp.send(null);};4.效劳器处理请求并返回响应;4.效劳器处理请求并返回响应;5.通过回调函数处理结果;5.通过回调函数处理结果;6.更新HTMLDOM对象;10.2.6使用innerHTML属性创立动态内容;10.2.6使用innerHTML属性创立动态内容;10.3DOM和JavaScript;DOM的含义是文档对象模型。在W3C主页上对DOM的定义为：文档对象模型是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档??以进一步处理，处理的结果可以放回到所提供的页面中。;10.3.2DOM与JavaScript;10.3.2DOM与JavaScript;10.3.2DOM与JavaScript;10.3.2DOM与JavaScript;10.3.3使用DOM动态编辑页面类;10.3.3使用DOM动态编辑页面类;10.3.4发送请求参数;10.3.4发送请求参数;10.3.4发送请求参数;10.4AJAX的常用应用;10.4AJAX的常用应用;10.4.1表单数据验证;10.4.1表单数据验证;10.4.1表单数据验证;10.4.2动态加载列表框;10.4.3创立工具提示;10.4.3创立工具提示;10.4.4动态更新Web页面;10.4.4动态更新Web页面;10.4.4动态更新Web页面;10.5小结;10.5小结