恭喜！您已创建了第一个 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 cap
name="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 树通过 JavaScript 对其进行访问。文本域的确切位置是 document.form1.name。
最后更改的内容是 class 属性，该属性被添加到 <div> 元素，以便由样式表文件进行处理。 |
| 10. |
转至 helloAjax.html 文件的设计视图。在 Application Navigator 中选择 helloAjax.css 条目，然后将该条目拖放到 HTML 页面上。此操作会在运行时创建由 HTML 页面到样式表的引用。
|
|
11. |
再次打开源代码视图中的 helloAjax.html 文件，并在 <head></head> 元素对之间查找 doTheAjaxThing() 方法。 |
|
12. |
将以粗体突出显示的第一行添加到 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);
...
第一行创建一个变量参数，该参数读取输入文本域的值。为确保该域的值不为空，您可以使用 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 文件。
 |
上一页 [1] [2] [3] [4] 下一页 |
