ajax简述.docx

1、ajax简述用 Ajax 验证表单作者：Deepak Vohra 学习如何使用 Ajax 构建基于表单的动态 Web 应用程序。 2006 年 5 月发表 异步 JavaScript 和 XML (Ajax) 是一种组合了 JavaScript、文档对象模型 (DOM) 和 XMLHttpRequest 技术的 Web 开发技术，用于在客户端和服务器之间提供动态交互。 例如，假设用户填写一份表单以将数据添加到数据库表。如果不使用 Ajax，则在提交表单之前将不检查该表单中的数据有效性。有了 Ajax，可以在使用服务器应用程序中的业务逻辑向表单域中添加数据时对添加到表单的数据进行动态验证。因此，

2、如果表单中的数据有效，则不必将完整的表单发送给服务器进行检查。 在本文中，您将学习如何在 Oracle JDeveloper 10g (10.1.3) 中使用 Ajax 创建一个 Web 应用程序。但首先，我们将介绍一些背景知识。 XMLHttpRequest 概述作为 J2EE 开发人员，您可能对 DOM 和 JavaScript 比较熟悉，而对 XMLHttpRequest 则并不一定很熟悉。在 Ajax 中，XMLHttpRequest 对象用于在 Web 应用程序与基础服务器和业务服务之间提供异步通信。使用 XMLHttpRequest 对象，客户端可以检索 XML 数据并将其直接提交

3、给 Web 服务器，而不必重新加载该页。XML 数据使用 DOM 和可扩展样式表转换 (XSLT) 在客户端上转换为可呈现的 HTML。 XMLHttpRequest 最初以 ActiveX 组件的形式由 Microsoft 推出，现在已受到大多数现代浏览器的支持。但在 2006 年 4 月之前，XMLHttpRequest 在浏览器之间以不同的方式实现。例如，Internet Explorer 6 将 XMLHttpRequest 实施为 ActiveX 对象。XMLHttpRequest 对象的实例在 IE 6 中通过以下代码创建： var req = new ActiveXObject(

4、Microsoft.XMLHTTP); 而在 Internet Explorer 7 中，XMLHttpRequest 以窗口对象属性的形式提供。在 IE7 和更高版本中，XMLHttpRequest 对象的实例通过以下代码创建： var req = new XMLHttpRequest(); 2006 年 4 月，推出了 XMLHttpRequest 对象的 W3C 工作草稿。随着 XMLHttpRequest 对象成为正式的 W3C 标准，XMLHttpRequest 对象的实施将很有可能得到更进一步的标准化。XMLHttpRequest 包含各种可以提供 HTTP 客户端功能的属性和方法

5、。表 1 中介绍了 XMLHttpRequest 属性。 表 1：XMLHttpRequest 属性 属性 说明 onreadystatechange 设置异步请求的事件处理程序 readyState 检索请求的当前状态。readyState 的不同值包括： 0 已创建但未初始化 XMLHttpRequest 对象。未调用 open() 方法。 1 已创建并初始化对象，但尚未调用 send() 方法。 2 已调用 send() 方法，但状态和标题不可用。 3 已检索到某些数据，但由于响应标题和状态并不完全可用，因此调用 responseXML 将生成空值。调用 responseText 生成部

6、分数据。 4 已收到所有数据。 responseText 从服务器中检索文本响应。 responseXML 从服务器中检索 XML DOM 对象形式的响应。 responseBody 检索响应主体。responseBody 属性是在 IE7 和更高版本的窗口对象中定义的，而非在 W3C XMLHttpRequest 规范中定义。 status 检索请求的 HTTP 状态代码。状态代码的示例包括 404（表示“Not Found”）和 200（表示“OK”）。 statusText 检索 HTTP 状态的文本。 表 2 中介绍了 XMLHttpRequest 对象方法。 表 2：XMLHttpR

7、equest 方法 方法 说明 Abort()取消当前的 HTTP 请求。 getAllResponseHeaders()返回所有响应标题。如果 readyState 的值不是 3 和 4，则返回空值。 getResponseHeader(string header)返回指定的响应标题。如果 readyState 的值不是 3 和 4，则返回空值。 open(string method, string url, boolean asynch, string username, string password)打开 HTTP 请求，但不发送该请求。调用 open() 方法会将 readyStat

8、e 属性设置为 1。responseText、responseXML、status 和 statusText 属性设置为其初始值。需要在 open() 方法中指定 HTTP 方法和服务器 URL（相对 URL 或绝对 URL）。asynch 的布尔值指定 HTTP 请求是否是异步的；不需要指定布尔值参数，并且默认值为 true。用户名和密码是针对服务器端验证指定的，并且可选。 send(data)向服务器发送 HTTP 请求并接收响应。使用 send() 方法发送的数据可以是字符串、无符号字节数组或 XML DOM 对象。使用 send() 方法发送的数据是可选的，并且可能为空。根据 open

9、() 方法中的 asynch 参数值，send() 方法为同步或异步。如果为同步，则在检索整个响应之前该方法将不返回。如果为异步，则该方法将立即返回。调用 send() 方法之后，readyState 属性将设置为 2。当请求完成加载时，readyState 属性将设置为 4。 setRequestHeader(string headerName, string headerValue)设置请求的 HTTP 标题 准备安装首先，您将需要下载和安装 JDeveloper 10.1.3。然后，依次单击 FileNewGeneral Application 创建一个 JDeveloper 应用程序和

10、项目。在该项目中，依次单击 FileNewWeb TierJSPJSP 添加一个 JSP 文件 input.jsp 以创建 Ajax Web 应用程序。在 JSP File 框架中，指定文件名并单击 Next。在 Error Page Options 框架中，选择默认设置并单击 Next。在 Tag libraries 框架中，选择默认设置并单击 Next。在 HTML Options 框架中，选择默认设置并单击 Next。JSP 提供了 Ajax 应用程序的客户端。同样，添加 JSP catalog.jsp 和 error.jsp，以根据 Web 应用程序是否生成错误重新定向客户端应用程序。

11、对于服务器端处理，依次单击 FileNewWeb Tier ServletsHTTP Servlet 添加一个 HTTP Servlet。 图 1：创建 Servlet在 Mapping Information 框架中，指定 Servlet 名称为 FormValidationServlet，指定一个 servlet 映射 URL（例如，validateForm），然后单击 Next。 图 2：指定 Servlet 映射 在 Servlet Parameters 框架中，指定任何 servlet 参数（如果需要），然后单击 Finish。图 3 中显示了生成的 Ajax 应用程序结构。 图 3

12、：Ajax 应用程序目录结构然后，依次单击 ToolsProject PropertiesLibrariesAdd Library 向 Ajax 项目中添加一些库。添加 JSP Runtime、Servlet Runtime 和 Oracle JDBC 库。 图 4：添加项目库本文中的 Ajax 应用程序将检索并更新 Oracle 数据库 10g 快捷版（Oracle 的免费开发人员版）表中的数据。下载并安装 Oracle 数据库 XE（包括示例模式），然后创建一个数据库实例。使用下面的 SQL 脚本创建一个数据库表 Catalog。 CREATE TABLE OE.Catalog(Catal

13、ogId VARCHAR(25) PRIMARY KEY, Journal VARCHAR(25),Publisher Varchar(25), Edition VARCHAR(25), Title Varchar(45), AuthorVarchar(25);INSERT INTO OE.Catalog VALUES(catalog1, Oracle Magazine, Oracle Publishing, Nov-Dec 2004, Database Resource Manager, Kimberly Floss);INSERT INTO OE.Catalog VALUES(catalo

14、g2, Oracle Magazine, Oracle Publishing, Nov-Dec 2004, From ADF UIX to JSF, Jonas Jacobi);INSERT INTO OE.Catalog VALUES(catalog3, Oracle Magazine, Oracle Publishing, March-April 2005, Starting with Oracle ADF , Steve Muench);然后，在 Connections-Navigator 中定义一个与 Oracle 数据库之间的 JDBC 连接。要创建 JDBC 连接，右键单击 Con

15、nections-Navigator 中的 Database 节点，然后选择 New Database Connection。这将启动 Create Database Connection 向导。在 Type 框架中，指定连接名并选择默认 Connection Type Oracle (JDBC)。单击 Next。在 Authentication 框架中，指定 Username 和 Password，然后单击 Next。在 Connection 框架中，选择瘦驱动程序，将 Host Name 指定为 localhost，将 JDBC Port 指定为 1521。指定 SID 并单击 Next。在 Test 框架中，单击 Test Connection 按钮。随即将建立 JDBC 连接，并将连接节点添加到 Connections-Navigator。 Connections-Navigator 中的 DBConnection1 以数据源形式提供，且资源名称为 jdbc/DBConnection1DS。向 web.xml 配置文件中添加一个 元素。 jdbc/DBConnection1DS/res-ref