关于 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 文件，将光标置于 <head></head> 元素之间，并从 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. |
将光标置于 <head>...</head> 元素之间，从组件选项板中选择 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+='</'+'br>'+requestObject.responseText;
}
}
else{
alert ("Request failed");
}
}
函数 doTheAjaxThing 从 HTML 页面上的输入按钮调用，并从服务器端的文本文件获得 "hello Ajax" 字符串。在 Script 对话框中按下 OK 后，函数添加到 HTML 页面标题上，且包含在 <script>...</script> 元素对中。从文件引用的 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 函数的输入按钮和显示结果的 <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/javascript"></script>
<script type="text/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 文件。
|
| 17. |
多次按下此按钮。显示的结果应如下所示。
注意，此页面附加了所有从服务器读取的字符串。要证明当前页面使用了 Ajax，单击页面的重新加载按钮，您会发现所有字符串都从页面中删除了。 |
[1] [2] [3] [4] 下一页 |
