构建同步 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，单击页面的重新加载按钮，您会发现所有字符串都从页面中删除了。 恭喜！您已创建了第一个 Ajax 程序！ [1] [2] [3] [4] [5] 相关文章 相关软件 网友评论: 查看所有评论 我要发表评论
从 Jdeveloper 菜单和 New Gallery 中选择 File > New > New Application，打开 Oracle JDeveloper 10.1.3 并创建一个新的应用程序。在创建对话框中，键入 JDeveloper 应用程序名 "HelloAjax"，并提供其他所需信息。由于默认的 JDeveloper 项目可以满足需要，因此您不必选择应用程序模板。
创建一个新的 HTML 页面 helloAjax.hml。验证 helloAjax.html 文件位于 public_html 目录下，以便嵌入的 web 容器能运行该文件。
在源代码视图中打开 helloAjax.html 文件，将光标置于 <head></head> 元素之间，并从 JDeveloper 组件选项板 (ctrl+shift+P) 中选择 Html Common > Script。在打开的对话框中选择 helloAjax.js 文件条目。此操作在 html 文件中创建一个对 JavaScript 的引用，以确保向客户端加载 HTML 页面时 JavaScript 代码可用。
在源编辑器中打开 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 回调句柄向页面通知服务器的响应。在该此上机练习中，您将接触到上述两种情况。
将光标置于 <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 或纯文本类型。
接下来的工作是在 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 树中可以直接访问该元素。
为避免浏览器缓存静态 HTML 页面（这样做会对测试 Ajax 页面造成干扰），在 <head> 和 </head> 元素间添加以下语句行。
<meta http-equiv="pragma" content="no-cache"></meta>
<!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>
保存您的工作并运行 HTML 文件。
多次按下此按钮。显示的结果应如下所示。
注意，此页面附加了所有从服务器读取的字符串。要证明当前页面使用了 Ajax，单击页面的重新加载按钮，您会发现所有字符串都从页面中删除了。
