jsp程序设计入门沈泽刚、秦玉平主编的javaweb第二版第10章Ajax技术基础讲解.ppt

在向服务器发出请求之前，应该通过XMLHttpRequest对象的onreadystatechange属性设置回调函数。当XMLHttpRequest对象的内部状态改变时就会调用回调函数，因此回调函数是处理响应的地方。 function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(GET, simpleResponse.xml, true); xmlHttp.send(null);} 3. 向服务器发出请求 4. 服务器处理请求并返回响应 如果请求的是静态资源，服务器将返回该资源。如果请求的是动态资源，服务器将执行动态资源，这可能需要访问数据库甚至是另一个系统，然后向用户返回响应。 XMLHttpRequest对象提供了两个访问服务器响应的属性。一个是responseText，它将响应提供为一个字符串。另一个属性是responseXML，它将响应提供为一个XML对象。 4. 服务器处理请求并返回响应 由于XMLHttpRequest对象只能处理text/html类型的结果，所以如果请求的是动态资源（如Servlet），需要将Content-Type响应头设置为text/xml，另外，为了避免浏览器在本地缓存结果，需要将Cache-Control响应头设置为no-cache，如下所示： response.setHeader(Cache-Control,no-cache); 5. 通过回调函数处理结果 通过回调函数可以对响应结果进行处理。在回调函数中首先应该检查XMLHttpRequest对象的readyState属性和status属性的值。当readyState属性值为4、status属性的值为200时表示响应完成，这时才能使用XMLHttpRequest对象的responseText或responseXML检索请求结果。例如，下面是程序10.2中的回调函数： 5. 通过回调函数处理结果 function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert(The server replied with: + xmlHttp.responseText); } } } 6. 更新HTML DOM对象 客户使用新的数据更新HTML DOM页面表示元素。JavaScript脚本可以使用DOM API获得HTML的每个元素的引用。 一般方法是使用document.getElementById(“userIdMessage”)，这里，userIdMessage是HTML文档一个元素的id属性值。 有了元素的引用，JavaScript就可以修改元素的属性、修改元素的style属性或者添加、删除、修改子元素。修改元素内容的一个常用方法是设置元素的innerHTML属性值。 10.2.6 使用innerHTML属性创建动态内容 结合HTML元素的innerHTML属性，XMLHttpRequest对象的responseText属性就会变得更有用。innerHTML属性是一个非标准的属性，最早在IE中实现，后来也为其他许多流行的浏览器所采用。innerHTML属性是一个简单的字符串，表示一组开始标记和结束标记之间的内容。 下面的例子使用XMLHttpRequest对象的responseText属性和HTML元素的innerHTML属性实现生成HTML内容。 程序10.3 innerHTML.html 10.2.6 使用innerHTML属性创建动态内容 程序中通过document对象的getElementById()返回id为results块的对象，然后将该元素的innerHTML属性的值设置为XMLHttpRequest对象的responseText的值。 下面的XML文件innerHTML.xml是客户要请求和返回的文件： 程序10.4 innerHTML.xml 10.3 DOM和JavaScript 10.3.1 什么是DOM 10.3.2 DOM与JavaScript 10.3.3 使用DOM动态编辑页面 10.3.4 发送请求参数 DOM的含义是文档对象模型。在W3C主页上对DOM的定义为：文档对象模型是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理，处理的结果可以放回到所提供的页面中。 10.3.1 什