关于 Ajax
"Ajax" 表示异步 html" class="wordstyle">Javascript 和 XML，它是 "Web 2.0" 范型的核心。一种定义（Web 2.0 有多个定义）指出，Web 2.0 是可提高响应速率、提供丰富 UI 组件的新一代 Web 应用程序的简写，它使 Web 应用程序更贴近客户端-服务器桌面客户端的用户体验。Ajax 不是软件标准，而是对一组技术的描述，这些技术包括 html" class="wordstyle">JavaScript、文档对象模型 (DOM) 和浏览器 XmlHttpRequest 对象（IE 中为 XmlHttp 对象）。通过结合使用这些技术，用户可以构建基于浏览器的交互式用户界面。
借助浏览器 XmlHttpRequest 对象，Ajax 应用程序可以使用异步通信检索服务器数据。对于怎样的 Web 应用程序才算是 Ajax 应用程序目前还没有明确定义。因此，目前对待 Ajax 的最佳方式是将其视为构建下一代 Web 应用程序（这些应用程序使我们更接近最终用户在客户端-服务器桌面客户端上的体验）的编程模式。需要注意的一点是，Ajax 与 J2EE 或 Java 无关；相反，它可以与 .NET、html" class="wordstyle">PHP、CGI 和 Perl 一起使用。有关 Ajax 的好消息是，它用来解释规则的示例并不比 "hello world" 复杂。
这篇方法文档为您利用 Oracle JDeveloper 构建 J2EE 中的 Ajax 应用程序提供了一流的上机体验。
这些练习使用的技术包括：
- html" class="wordstyle">JavaScript - html" class="wordstyle">JavaScript 语言在浏览器客户端上执行，它是 Ajax 的核心。使用 html" class="wordstyle">JavaScript 在客户端执行逻辑、数学和功能操作。使用文档对象模型 (DOM) 时，可使用 html" class="wordstyle">JavaScript 动态处理浏览器中显示的网页。
- 文档对象模型 (DOM) - 它是 HTML 页面文档的虚拟树状表示，保存在浏览器内存中，可以通过 html" class="wordstyle">JavaScript 进行访问。可以使用 DOM 树动态处理浏览器中当前 HTML 页面上的 UI 组件。
- XmlHttpRequest - XmlHttpRequest 对象是用于访问远程服务器的浏览器端 API，几乎所有现代浏览器都可以提供这种技术。XmlHttpRequest 对象使客户端可以使用 http GET 或 POST 请求获取远程服务器数据，且无需在页面间导航。服务器访问可以设计为同步或异步方式，后者将使用 html" class="wordstyle">JavaScript 回调机制。
- 样式表 (CSS) - CSS 用于定义服务器上组件的外观、位置和大小。使用外部 CSS 资源时，您可以使应用程序的外观独立于视图的显示 — 在使用 Ajax 的情况下，视图通常是利用 html" class="wordstyle">Javascript 构建的。
- HttpServlet - HttpServlet 用于模仿服务器会话来展示 Ajax 的后台数据检索。
用 Oracle JDeveloper 10.1.3 构建 Ajax 应用程序
遵循此处列出的详细指示，您将从静态 HTML 客户端读取服务器端文件的文本字符串开始逐步构建 "Hello Ajax"。完成此方法文档后，您将开发出一个从服务器上的 servlet 读取数据的网页，并使用 CSS 样式表为检索的数据行建立交变的背景色。一个输入文本域允许您为显示的消息提供输入。单击此处下载完整的 Oracle JDeveloper 10.1.3 工作区。
javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> 构建同步 Ajax 页面
1. | 从 Jdeveloper 菜单和 New Gallery 中选择 File > New > New Application，打开 Oracle JDeveloper 10.1.3 并创建一个新的应用程序。在创建对话框中，键入 JDeveloper 应用程序名 "HelloAjax"，并提供其他所需信息。由于默认的 JDeveloper 项目可以满足需要，因此您不必选择应用程序模板。  javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> |
2. | 为默认的 JDeveloper 项目命名，如 "Ajaxprj"。
|
3. | 从 Ajaxprj 节点的上下文菜单中选择 New，打开 JDeveloper New Gallery。
|
4. | 创建一个新的 HTML 页面 helloAjax.hml。验证 helloAjax.html 文件位于 public_html 目录下，以便嵌入的 web 容器能运行该文件。  javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
|
5. | 创建一个文本文件 helloAjax.txt。要创建该文本文件，在 JDeveloper New Gallery 中选择 General > Simple Files 条目。
|
6. | 创建一个 html" class="wordstyle">JavaScript 文件 helloAjax.js。html" class="wordstyle">JavaScript 文件可通过选择 Web Tier > HTML 条目进行创建。同时，确保上述两个文件位于 JDeveloper "Ajaxprj" 项目的 public_html 目录下。
|
7. | 在源代码视图中打开 helloAjax.html 文件，将光标置于 <head></head> 元素之间，并从 JDeveloper 组件选项板 (ctrl+shift+P) 中选择 Html Common > Script。在打开的对话框中选择 helloAjax.js 文件条目。此操作在 html 文件中创建一个对 html" class="wordstyle">JavaScript 的引用，以确保向客户端加载 HTML 页面时 html" class="wordstyle">JavaScript 代码可用。  javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
|
8. | 在源编辑器中打开 helloAjax.js 文件，将以下 html" class="wordstyle">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 versionvar 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;}html" class="wordstyle">JavaScript 是可重复使用的代码，它初始化 XmlHttprequest 对象并为调用程序返回句柄。XmlHttpRequestObject 变量是作为 createXmlHttpRequest 函数的句柄创建的。html" class="wordstyle">JavaScript 在一定程度上允许面向对象的编程，而将变量用作对函数的引用避免了命名冲突（在此情况下，html" class="wordstyle">JavaScript 文件中包含多个同名的函数）。 createXmlHttpRequest 函数的 XmlHttpRequestObject 变量用于保存 XmlHttpRequest 对象引用。查看代码，您将发现我们在寻找 XmlHttpRequest 对象和 XmlHttp 对象。虽然 Internet Explorer 和其他浏览器都支持 XmlHttprequest 对象，但该对象在 Internet Explorer 中的命名与其他浏览器有所不同。如果第一个条件 typeof XMLHttpRequest != "undefined" 能够满足，则客户端浏览器是 Mozilla、Safaris 或任何支持异步 html" class="wordstyle">JavaScript 请求和响应的非 IE 浏览器。如果条件 window.ActiveXObject 为真，则客户端浏览器为 IE。Microsoft 的浏览器还会区分 XmlHttp 版本支持，因此开发人员最好使用最新的支持。for() 循环测试浏览器对特定 XmlHttp 版本（从最新版本到最旧版本）的支持，并从 XmlHttpRequest 对象引用中引用最新的版本支持。 使用 XmlHttpRequest 对象引用时，您可以使用 html" class="wordstyle">JavaScript 从 HTML 页面发出服务器调用。根据发布请求的方式是同步的还是异步的，浏览器会等待服务器响应或使用 html" class="wordstyle">JavaScript 回调句柄向页面通知服务器的响应。在该此上机练习中，您将接触到上述两种情况。
|
9. | 保存您的工作。 |
10. | 在 JDeveloper 中打开 helloAjax.txt 文件并输入文本消息 hello Ajax，然后保存文件。
|
| 11. | 首要工作已经完成，现在您可以集中构建 HTML 页面了，该页面是真正的 Ajax 客户端。在源代码视图编辑器中打开 helloAjax.html 文件。
|
| 12. | 将光标置于 <head>...</head> 元素之间，从组件选项板中选择 Html Common > Script 条目。此时，您无需引用外部 html" class="wordstyle">JavaScript 文件，而只需直接在对话框的 Content 文本区域输入 html" class="wordstyle">JavaScript 代码。以下 html" class="wordstyle">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 foundif(div_handle){div_handle.innerHTML+='</'+'br>'+requestObject.responseText; } }else{alert ("Request failed"); }} 函数 doTheAjaxThing 从 HTML 页面上的输入按钮调用，并从服务器端的文本文件获得 "hello Ajax" 字符串。在 Script 对话框中按下 OK 后，函数添加到 HTML 页面标题上，且包含在 <script>...</script> 元素对中。从文件引用的 html" class="wordstyle">JavaScript 代码与直接向页面添加的 html" class="wordstyle">JavaScript 的不同之处在于，前者可以在许多其他 HTML 页面中重复使用，这就是它为什么只应包含通用代码的原因。 上述脚本使用 helloAjax.js 文件中的 xmlHttpRequestHandler 引用创建一个 requestObject 变量，该变量包含 XmlHttpRequest 对象的句柄。注意，你无需考虑页面在 IE 还是 Mozilla 中运行。对浏览器类型的选择由可重用的 html" class="wordstyle">JavaScript 文件进行。在 requestObject 句柄上，调用 open() 并传递三个自变量。第一个自变量指定了访问，该访问可以是任何允许的服务器访问，如 GET、POST 或 HEAD。第二个自变量引用需要读取的 URI 源。本示例中的资源是一个文本文件，而后面示例中的资源是 HttpServlet。注意，html" class="wordstyle">JavaScript 安全（也称为 html" class="wordstyle">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 的用法示例，请参见“html">AJAX 非宣传性简介”。需要动态确定响应类型的应用程序可以执行以下语句： var contentType = requestObject.getResponseHeader("content-type");可能返回的内容类型为 'text/xml' 或 'text/plain'，指示内容是 XML 或纯文本类型。
|
| 13. | 接下来的工作是在 HTML 页面上创建调用 >doTheAjaxThing 函数的输入按钮和显示结果的 <DIV> 元素。在 helloAjax.html 文件的代码编辑器视图中，在 <body>...</body> 元素之间复制以下 HTML 源代码。 <input type="button" value="Press Me" onclick="doTheAjaxThing();"/>
<div id="message">
</div> 添加到输入按钮的 onclick 事件在单击鼠标时调用 doTheAjaxThing 方法。<DIV> 元素有一个 id 属性，该属性用于为元素赋予唯一的名称，以便在 DOM 树中可以直接访问该元素。
|
14. | 为避免浏览器缓存静态 HTML 页面（这样做会对测试 Ajax 页面造成干扰），在 <head> 和 </head> 元素间添加以下语句行。 <meta http-equiv="pragma" content="no-cache"></meta> 注意，可以在 <head> 元素之间设置多个 <meta ...> 元素。此语句告知浏览器不要缓存该页面及其内容。
|
| 15. | 现在，该 HTML 文件应如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta><title>Hello Ajax from file</title><script src="helloAjax.js" type="text/html" class="wordstyle">javascript"></script><script type="text/html" class="wordstyle">javascript">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+='<br></'+'br>'+requestObject.responseText; } } else{alert ("Request failed"); } }</script></head><body><input type="button" value="Press Me" onclick="doTheAjaxThing();"<DIV id="message"></DIV></body></html> |
| 16. | 保存您的工作并运行 HTML 文件。  javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> |
| 17. | 多次按下此按钮。显示的结果应如下所示。  javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> 注意，此页面附加了所有从服务器读取的字符串。要证明当前页面使用了 Ajax，单击页面的重新加载按钮，您会发现所有字符串都从页面中删除了。 |
恭喜！您已创建了第一个 Ajax 程序！
增强 Ajax 应用程序
以下练习构建在上一个示例的基础上，并用 Http Servlet 替换了 helloAjax.txt 文件。由于 servlet 可以包含逻辑，能够基于预先的定义修改响应格式，因此 servlet 比文件更具动态性，您可以使用 CSS 样式表为返回的数据行设置交变颜色，并显示页面用户键入的文本。
1. | 使用 Ajaxprj 项目上的 New 选项打开 JDeveloper New Gallery。选择 Web Tier > HTML 树条目中的 CSS File 选项。将文件命名为 helloAjax.css，然后确保该文件位于 public_html 目录下。
|
2. | 删除 JDeveloper 默认生成的样式表代码。
|
3. | 将以下代码复制或键入到样式表文件中，然后保存该文件。 div.message b.red{background-color:gray;color:RED;font-family:Arial, Helvetica, sans-serif;}
div.message b.green{background-color:yellow;color:GREEN;font-family:Arial, Helvetica, sans-serif;}div.message b.red 标记显示所有 <b> 元素时使用灰色背景颜色和红色字体颜色。<b> 元素有一个类属性 "red"，并作为子元素嵌入具有一个 message 类属性的 HTML <DIV> 元素中。<DIV> 和 <b> HTML 元素作为返回给异步 Ajax 请求的服务器请求的一部分动态创建。
|
4. | 要创建 Http Servlet，从 JDeveloper 上下文菜单中选择 New，然后选择 Web Tier > Servlets 条目。从可选项中选择 HTTP Servlet。将 servlet 类命名为 HelloAjax，保留所有其他域和对话框的默认值。此操作将创建一个 Http Servlet 并将其映射为 web.xml 部署描述符中的 /helloajax 名。 |
5. | 将两个例程域 private int counter = 0;private String name=""; 添加到 servlet 中，且正好位于 private static final String CONTENT_TYPE = "text/html; charset=windows-1252"; 域中。
|
6. | 更改 servlet doGet 方法的代码，使其如下所示 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{++counter;name = request.getParameter("name") != null?(String)request.getParameter("name"):null;//init capname="From "+name;response.setContentType(CONTENT_TYPE);PrintWriter out = response.getWriter();if(counter % 2 == 0) {out.println("<b class='green'>Hello Ajax "+name+" </b><br"); }else {out.println("<b class='red'>Hello Ajax "+name+" </b><br"); }out.close();}Servlet 期待包含用户输入的请求参数 "name"，并将该参数添加到 Hello Ajax 消息中。每个偶数行都用 CSS 类引用 ‘green’ 显示，每个非偶数行都用 CSS 类引用 ‘red’ 显示。由于 XmlHttpRequest 输出显示在 <DIV></DIV> 元素对之间，因此为输出设置颜色的样式表将 <b> 元素表现为 div b.green 或 div b.red。稍后，您会为 HTML DIV 元素添加 class="message" 属性，因此产生的 CSS 引用为 div.message b.red 和 div.message b.green，这些是您先前在 helloAjax.css 文件中定义的 CSS 名称。
|
7. | 保存您的工作。 .
|
8. | 在 JDeveloper 代码视图编辑器中打开 helloAjax.html 文件。
|
9. | 将 HTML <body> 的内容从 <body><input type="button" value="Press Me" onclick="doTheAjaxThing();"<div id="message"></div></body> 更改为 <body><form name="form1" action="">
<input type="button" value="Press Me" onclick="doTheAjaxThing();"/>
<input type="text"id="name" name="name"/>
</form>
<div id="message" class="message"></div>
</body> 现在，该 HTML 文件中包含一个额外的文本域，可供用户键入输出字符串。名称输入域的 id 属性为 "name"，用户可以使用浏览器的 DOM 树通过 html" class="wordstyle">JavaScript 对其进行访问。文本域的确切位置是 document.form1.name。 最后更改的内容是 class 属性，该属性被添加到 <div> 元素，以便由样式表文件进行处理。 |
| 10. | 转至 helloAjax.html 文件的设计视图。在 Application Navigator 中选择 helloAjax.css 条目，然后将该条目拖放到 HTML 页面上。此操作会在运行时创建由 HTML 页面到样式表的引用。
|
11. | 再次打开源代码视图中的 helloAjax.html 文件，并在 <head></head> 元素对之间查找 doTheAjaxThing() 方法。 |
12. | 将以粗体突出显示的第一行添加到 html" class="wordstyle">JavaScript 函数中，然后使用突出显示的第二个代码行替换当前的 requestObject.open() 方法。 function doTheAjaxThing(){var requestObject;var PAGE_SUCCESS = 200;var param="name="+(document.form1.name.value.length >0 ?document.form1.name.value:"nobody");requestObject = xmlHttpRequestHandler.createXmlHttpRequest();requestObject.open("Get","helloajax?"+param,false);requestObject.send(null); ...第一行创建一个变量参数，该参数读取输入文本域的值。为确保该域的值不为空，您可以使用 html" class="wordstyle">JavaScript 测试输入字符串的长度。如果域值确实为空，则使用 "nobody"。 requestObject.open 方法调用目前引用 helloajax（服务器端 HTTP Servlet 的 web.xml 名称），而不是 helloajax.txt 文件。由于该请求为 GET 请求，因此 name 请求参数使用问号 '?' 添加到 servlet 引用中。如您所见，从 XmlHttpRequest 的观点来看，由调用服务器上的静态文件转变为调用 servlet 所需进行的更改很少。 |
13. | 您还可以将标题中的 HTML <tile> 元素更改为 <title>Hello Ajax from servlet</title> |
14. | 保存您的工作，然后运行 helloAjax.html 文件。  javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> |
您将发现，第一次运行应用程序时有轻微的延迟现象。这是由 servlet 所需的初始启动时间造成的。该延迟会给用户造成不好的印象，因此在下一部分中，您将把同步 XmlHttpRequest 调用更改为异步调用
减小字体
增大字体