用Oracle JDeveloper 10.1.3构建Ajax应用程序-1

关于 Ajax

"Ajax" 表示异步 Javascript 和 XML，它是 "Web 2.0" 范型的核心。一种定义（Web 2.0 有多个定义）指出，Web 2.0 是可提高响应速率、提供丰富 UI 组件的新一代 Web 应用程序的简写，它使 Web 应用程序更贴近客户端-服务器桌面客户端的用户体验。Ajax 不是软件标准，而是对一组技术的描述，这些技术包括 JavaScript、文档对象模型 (DOM) 和浏览器 XmlHttpRequest 对象（IE 中为 XmlHttp 对象）。通过结合使用这些技术，用户可以构建基于浏览器的交互式用户界面。

借助浏览器 XmlHttpRequest 对象，Ajax 应用程序可以使用异步通信检索服务器数据。对于怎样的 Web 应用程序才算是 Ajax 应用程序目前还没有明确定义。因此，目前对待 Ajax 的最佳方式是将其视为构建下一代 Web 应用程序（这些应用程序使我们更接近最终用户在客户端-服务器桌面客户端上的体验）的编程模式。需要注意的一点是，Ajax 与 J2EE 或 Java 无关；相反，它可以与 .NET、PHP、CGI 和 Perl 一起使用。有关 Ajax 的好消息是，它用来解释规则的示例并不比 "hello world" 复杂。

这篇方法文档为您利用 Oracle JDeveloper 构建 J2EE 中的 Ajax 应用程序提供了一流的上机体验。

这些练习使用的技术包括：

• JavaScript - JavaScript 语言在浏览器客户端上执行，它是 Ajax 的核心。使用 JavaScript 在客户端执行逻辑、数学和功能操作。使用文档对象模型 (DOM) 时，可使用 JavaScript 动态处理浏览器中显示的网页。
• 文档对象模型 (DOM) - 它是 HTML 页面文档的虚拟树状表示，保存在浏览器中，可以通过 JavaScript 进行访问。可以使用 DOM 树动态处理浏览器中当前 HTML 页面上的 UI 组件。
• XmlHttpRequest - XmlHttpRequest 对象是用于访问远程服务器的浏览器端 API，几乎所有现代浏览器都可以提供这种技术。XmlHttpRequest 对象使客户端可以使用 http GET 或 POST 请求获取远程服务器数据，且无需在页面间导航。服务器访问可以设计为同步或异步方式，后者将使用 JavaScript 回调机制。
• (CSS) - CSS 用于定义服务器上组件的外观、位置和大小。使用外部 CSS 资源时，您可以使应用程序的外观独立于视图的显示 — 在使用 Ajax 的情况下，视图通常是利用 Javascript 构建的。
• HttpServlet - HttpServlet 用于模仿服务器会话来展示 Ajax 的后台数据检索。
  

用 Oracle JDeveloper 10.1.3 构建 Ajax 应用程序

遵循此处列出的详细指示，您将从静态 HTML 客户端读取服务器端文件的文本字符串开始逐步构建 "Hello Ajax"。完成此方法文档后，您将开发出一个从服务器上的 servlet 读取数据的网页，并使用 CSS 为检索的数据行建立交变的背景色。一个输入文本域允许您为显示的消息提供输入。单击此处下载完整的 Oracle JDeveloper 10.1.3 工作区。

 

 

构建同步 Ajax 页面

1.	从 Jdeveloper 菜单和 New Gallery 中选择 File > New > New Application，打开 Oracle JDeveloper 10.1.3 并创建一个新的应用程序。在创建对话框中，键入 JDeveloper 应用程序名 "HelloAjax"，并提供其他所需信息。由于默认的 JDeveloper 项目可以满足需要，因此您不必选择应用程序模板。
2.	为默认的 JDeveloper 项目命名，如 "Ajaxprj"。
3.	从 Ajaxprj 节点的上下文菜单中选择 New，打开 JDeveloper New Gallery。
4.	创建一个新的 HTML 页面 helloAjax.hml。验证 helloAjax.html 文件位于 public_html 目录下，以便嵌入的 web 容器能运行该文件。
5.	创建一个文本文件 helloAjax.txt。要创建该文本文件，在 JDeveloper New Gallery 中选择 General > Simple Files 条目。
6.	创建一个 JavaScript 文件 helloAjax.js。JavaScript 文件可通过选择 Web Tier > HTML 条目进行创建。同时，确保上述两个文件位于 JDeveloper "Ajaxprj" 项目的 public_html 目录下。
7.	在源代码视图中打开 helloAjax.html 文件，将光标置于 元素之间，并从 JDeveloper 组件选项板 (ctrl+shift+P) 中选择 Html Common > Script。在打开的对话框中选择 helloAjax.js 文件条目。此操作在 html 文件中创建一个对 JavaScript 的引用，以确保向客户端加载 HTML 页面时 JavaScript 代码可用。
8.	在源编辑器中打开 helloAjax.js 文件，将以下 JavaScript 代码复制到文件中。 var xmlHttpRequestHandler = new Object(); xmlHttpRequestHandler.createXmlHttpRequest = function(){ var XmlHttpRequestObject; if (typeof XMLHttpRequest != "undefined"){ XmlHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject){ // look up the highest possible MSXML version var tryPossibleVersions=["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"]; for (i=0; i< tryPossibleVersions.length; i++){ try{ XmlHttpRequestObject = new ActiveXObject(tryPossibleVersions[i]); break; } catch (xmlHttpRequestObjectError){ //ignore } } } return XmlHttpRequestObject; } JavaScript 是可重复使用的代码，它初始化 XmlHttprequest 对象并为调用程序返回句柄。XmlHttpRequestObject 变量是作为 createXmlHttpRequest 函数的句柄创建的。JavaScript 在一定程度上允许面向对象的编程，而将变量用作对函数的引用避免了命名冲突（在此情况下，JavaScript 文件中包含多个同名的函数）。 createXmlHttpRequest 函数的 XmlHttpRequestObject 变量用于保存 XmlHttpRequest 对象引用。查看代码，您将发现我们在寻找 XmlHttpRequest 对象和 XmlHttp 对象。虽然 Internet Explorer 和其他浏览器都支持 XmlHttprequest 对象，但该对象在 Internet Explorer 中的命名与其他浏览器有所不同。如果第一个条件 typeof XMLHttpRequest != "undefined" 能够满足，则客户端浏览器是 Mozilla、Safaris 或任何支持异步 JavaScript 请求和响应的非 IE 浏览器。如果条件 window.ActiveXObject 为真，则客户端浏览器为 IE。Microsoft 的浏览器还会区分 XmlHttp 版本支持，因此开发人员最好使用最新的支持。for() 循环测试浏览器对特定 XmlHttp 版本（从最新版本到最旧版本）的支持，并从 XmlHttpRequest 对象引用中引用最新的版本支持。 使用 XmlHttpRequest 对象引用时，您可以使用 JavaScript 从 HTML 页面发出服务器调用。根据发布请求的方式是同步的还是异步的，浏览器会等待服务器响应或使用 JavaScript 回调句柄向页面通知服务器的响应。在该此上机练习中，您将接触到上述两种情况。
9.	保存您的工作。
10.	在 JDeveloper 中打开 helloAjax.txt 文件并输入文本消息 hello Ajax，然后保存文件。
11.	首要工作已经完成，现在您可以集中构建 HTML 页面了，该页面是真正的 Ajax 客户端。在源代码视图编辑器中打开 helloAjax.html 文件。
12.	将光标置于 ... 元素之间，从组件选项板中选择 Html Common > Script 条目。此时，您无需引用外部 JavaScript 文件，而只需直接在对话框的 Content 文本区域输入 JavaScript 代码。以下 JavaScript 代码引用了 helloAjax.js 脚本中创建的 xmlHttpRequestHandler，将静态的 HTML 文件转换成动态的 Ajax 客户端。 function doTheAjaxThing(){ var PAGE_SUCCESS = 200; var requestObject = xmlHttpRequestHandler.createXmlHttpRequest(); requestObject.open("Get","helloAjax.txt",false); requestObject.send(null); if (requestObject.status==PAGE_SUCCESS){ var div_handle = document.getElementById("message"); //check if DIV element is found if(div_handle){ div_handle.innerHTML+=''+requestObject.responseText; } } else{ alert ("Request failed"); } } 函数 doTheAjaxThing 从 HTML 页面上的输入按钮调用，并从服务器端的文本文件获得 "hello Ajax" 字符串。在 Script 对话框中按下 OK 后，函数添加到 HTML 页面标题上，且包含在 元素对中。从文件引用的 JavaScript 代码与直接向页面添加的 JavaScript 的不同之处在于，前者可以在许多其他 HTML 页面中重复使用，这就是它为什么只应包含通用代码的原因。 上述脚本使用 helloAjax.js 文件中的 xmlHttpRequestHandler 引用创建一个 requestObject 变量，该变量包含 XmlHttpRequest 对象的句柄。注意，你无需考虑页面在 IE 还是 Mozilla 中运行。对浏览器类型的选择由可重用的 JavaScript 文件进行。在 requestObject 句柄上，调用 open() 并传递三个自变量。第一个自变量指定了访问，该访问可以是任何允许的服务器访问，如 GET、POST 或 HEAD。第二个自变量引用需要读取的 URI 源。本示例中的资源是一个文本文件，而后面示例中的资源是 HttpServlet。注意，JavaScript 安全（也称为 JavaScript 沙箱）只允许访问从中下载代码的服务器。第三个自变量是布尔类型，它定义了调用是同步（假）还是异步（真）。使用同步请求时，浏览器等待服务器响应。当从服务器获取大量数据时，您不希望在实际使用的应用程序中看到这种情况。稍后，您在本次上机练习中将使用异步服务器访问。 XmlHttp Request 对象上的 requestObject.send(null)> 方法调用向服务器发送请求。如果这是 POST 请求，则 null 自变量将由要求服务器处理的请求参数列表代替。 由于此示例使用了同步服务器调用，因此浏览器在继续工作之前会等待服务器的响应。由服务器发送、表示请求成功的 http 代码是 200。在调用 requestObject.responseText 从 requestObject 中读取服务器响应之前，检查成功状态使用 requestObject.status==PAGE_SUCCESS。这是 XmlHttpRequest 对象提供的方法。其他代码引用页面上的 DIV HTML 元素，该元素可通过 DOM 树访问并用于显示服务器响应。 注意：requestObject.responseText 用于访问来自服务器的纯文本响应。要获得 XML 格式的数据，使用 XMLHttpRequest 对象的 responseXML 方法。有关 responseXML 的用法示例，请参见“AJAX 非宣传性简介”。需要动态确定响应类型的应用程序可以执行以下语句： var contentType = requestObject.getResponseHeader("content-type"); 可能返回的内容类型为 'text/xml' 或 'text/plain'，指示内容是 XML 或纯文本类型。
13.	接下来的工作是在 HTML 页面上创建调用 >doTheAjaxThing 函数的输入按钮和显示结果的 元素。在 helloAjax.html 文件的代码编辑器视图中，在 ... 元素之间复制以下 HTML 源代码。 onclick="doTheAjaxThing();"/> id="message"> 添加到输入按钮的 onclick 事件在单击时调用 doTheAjaxThing 方法。 元素有一个 id 属性，该属性用于为元素赋予唯一的名称，以便在 DOM 树中可以直接访问该元素。
14.	为避免浏览器缓存静态 HTML 页面（这样做会对测试 Ajax 页面造成干扰），在 和 元素间添加以下语句行。 注意，可以在 元素之间设置多个 元素。此语句告知浏览器不要缓存该页面及其内容。
15.	现在，该 HTML 文件应如下所示：
16.	保存您的工作并运行 HTML 文件。
17.	多次按下此按钮。显示的结果应如下所示。     注意，此页面附加了所有从服务器读取的字符串。要证明当前页面使用了 Ajax，单击页面的重新加载按钮，您会发现所有字符串都从页面中删除了。