第17章 发送请求并处理响应.pptVIP

第17章 发送请求并处理响应 向服务器发送请求并处理服务器的响应是AJAX的最基本的工作流程。本章就来介绍述如何使用AJAX实现向服务器发送请求并处理服务器返回的响应。其中发送方式主要有：把参数作为XML发送与用JSON发送两种。而处理服务器响应则主要使用DOM对象来处理返回的结果，并使用该对象把返回结果解析为XML，以及在页面中动态创建或编辑页面内容等。通过本章内容的学习，读者对于如何使用AJAX会有一个更高深刻的认识。 17.1 动态在页面中创建内容 在页面中动态创建内容是AJAX处理服务端响应并动态显示给用户的一个重要形式。要实现这一形式需要使用到页面元素的innerHTML属性。该属性属于IE中的对象（通常为层、或者其他标记成对出现的元素）的一个非常有用的属性。该属性表示的是在开始标记与结束标记之间的内容。如以下代码所示。 div这里是内容/div 则此div（层）的innerHTML属性就是“这里是内容”这个字符串。 17.2 将服务器返回内容解析为XML 如果服务器返回内容比较少，这时把返回内容以普通文本处理完全能够满足需要。如：返回网站的访问数时。而如果服务器返回内容很多，而且具有某种固定的格式，这时将这些内容解析为XML就相当有必要。这样可以便于统一对其进行控制及分类。本节就来介绍如何将服务器返回内容解析为XML。 17.2.1 解析XML的实现机制 XMLHTTPRequest对象的responseText属性通常只用于返回内容少且简单的情况。而对于返回有复杂内容：如将数据库中的记录内容返回时，使用responseXML属性则是更好的选择。 通过16章对XMLHTTPRequest对象的responseXML属性的介绍可以知道，该属性将把服务器响应解析为XML内容。而通过把返回的XML内容当作W3C DOM的XML文档则可以使用DOM的方法与属性对服务器返回的XML进行浏览、有哪些信誉好的足球投注网站等操作。 DOM（文档对象模型）是与平台和语言无关的一种接口，它允许程序和脚本动态的访问和更新文档的内容、结构甚至是样式，并且允许把处理的结果返回到所指定的页面中。 这里要讲一下DOM与JavaScript的区别。DOM是面向HTML、XML文档的API（应用编程接口），其为文档提供了结构化的表示，并定义了如何通过脚本（如：JavaScript）来访问文档结构。而JavaScript则是用于访问和处理DOM的脚本语言。没果没有DOM，JavaScript就不会有Web页面构成元素的概念。Web页面中的元素如：表单、超链接、图像、层等都是DOM的一部分，这就为JavaScript访问这些元素的属性和方法提供了可能性。 17.2.2 DOM对象的属性与方法 下面以列表的形式来介绍下DOM元素的属性，使用这些元素可以访问页面元素，其属性如表所示。 17.2.3 使用DOM的实例 上一节为读者介绍了DOM对象的方法与属性，而这些内容都相当抽象。本节就通过一个实例来实际应用下DOM的方法，以感受使用JavaScript来访问DOM的快捷与方便。具体代码所下所示。 17.2.4 将返回内容解析为XML实例 17.2.3小节的例子中更多的使用的是DOM的方法。下面再通过一个实例，来解析服务器返回XML文件。该实例将对服务器返回的XML文档进行遍历并输出结果，其中将会综合使用DOM的属性与方法。下面先来创建XML文件的内容，该XML文件包含HTML内容。其代码如下所示。 17.3 用DOM动态编辑页面内容 动态编辑页面内容，是当前较为流行的一种网站应用方式。它通常有这样的表现形式：页面中显示用户的相关信息，直接单击该信息，就会出现编辑框，允许用户对这些内容进行修改。用户修改之后，单击“确定”按钮，新修改的内容就直接显示在原来的位置上。本节就来介绍如何使用DOM来实现这样的功能。 17.3.1 动态编辑页面内容的实现原理 如今，在一些大型网站上都会提供动态编辑页面内容的功能。这种方法与传统的方法相比优势非常明显，传统方法的做法是，先进入一页面对内容进行修改，然后再跳转到另一个页面处理提交。最后再次返回到信息显示页面。要完全实现这一过程最少需要进行三次刷新，每次刷新都会使用趁嬷匦录釉亍 而动态编辑页面内容的方法则只在当前页面中进行所有操作。那么这种神奇的效果是如何实现的？这种方法说到底就是使用了AJAX，采用DOM对象来动态编辑页面内容。本节就来介绍下如何使用DOM来动态编辑页面内容。 17.3.2 动态编辑页面内容所用的DOM的属性与方法 要想实现动态编辑页面内容，需要使用到DOM的一些属性与方法。这些属性与方法如表所示 17.3.3 动态更新Select框的option选项 以下代码主要使用了DOM对象的appendChild(