恭喜！您已创建了第一个 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 标记显示所有 元素时使用灰色背景颜色和红色字体颜色。 元素有一个类属性 "red"，并作为子元素嵌入具有一个 message 类属性的 HTML 元素中。
和 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("Hello Ajax "+name+"
}
else
{
out.println("Servlet 期待包含用户输入的请求参数 "name"，并将该参数添加到 Hello Ajax 消息中。每个偶数行都用 CSS 类引用 ‘green’ 显示，每个非偶数行都用 CSS 类引用 ‘red’ 显示。由于 XmlHttpRequest 输出显示在
元素对之间，因此为输出设置颜色的样式表将 元素表现为 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
的内容从
更改为
现在，该 HTML 文件中包含一个额外的文本域，可供用户键入输出字符串。名称输入域的 id 属性为 "name"，用户可以使用浏览器的 DOM 树通过 JavaScript 对其进行访问。文本域的确切位置是 document.form1.name 。
最后更改的内容是 class 属性，该属性被添加到 元素，以便由样式表文件进行处理。
10. 转至 helloAjax.html 文件的设计视图。在 Application Navigator 中选择 helloAjax.css 条目，然后将该条目拖放到 HTML 页面上。此操作会在运行时创建由 HTML 页面到样式表的引用。
11.
再次打开源代码视图中的 helloAjax.html 文件，并在 元素对之间查找 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 元素更改为
Hello Ajax from servlet
14.
保存您的工作，然后运行 helloAjax.html 文件。
阅读(390) | 评论(0) | 转发(0) |
