更改为
<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 页面到样式表的引用。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 所需进行的更改很少。
您还可以将标题中的 HTML <tile> 元素更改为
<title>Hello Ajax from servlet</title>
保存您的工作，然后运行 helloAjax.html 文件。
您将发现，第一次运行应用程序时有轻微的延迟现象。这是由 servlet 所需的初始启动时间造成的。该延迟会给用户造成不好的印象，因此在下一部分中，您将把同步 XmlHttpRequest 调用更改为异步调用。
使 Ajax 成为异步应用程序
异步请求允许应用程序用户在等待服务器响应的同时继续进行自己的工作。即使用户不能在服务器响应前继续自己的工作，使用异步请求的方法也比同步调用更有利。例如，为避免用户将注意力集中在按下的按钮上，您可以在屏幕上显示一些可供最终用户消遣的小部件，如进度条。这部分上机练习不会涉及到上述内容，我们仅把同步调用更改为异步调用。
使用以下语句替换在 helloAjax.html 页面中定义 doTheAjaxThing() 函数的当前 JavaScript 语句，使请求成为异步调用：
<script type="text/javascript">
var requestObject;
var READY_STATE_COMPLETE = 4;
var PAGE_SUCCESS = 200;
function doTheAjaxThing(){
param="name=" (document.form1.name.value.length >0 ?document.form1.name.value:"nobody");
requestObject = xmlHttpRequestHandler.createXmlHttpRequest();
requestObject.onreadystatechange=onReadyStateChangeResponse;
requestObject.open("Get","helloajax?" param,true);
requestObject.send(null);
}
function onReadyStateChangeResponse(){
var ready = requestObject.readyState;
var status = requestObject.status;
if(ready==READY_STATE_COMPLETE && status == PAGE_SUCCESS){
var div_handle = document.getElementById("message");
//check if DIV element is found
if(div_handle){
div_handle.innerHTML ='
</' 'br>' requestObject.responseText;
}
}
}
</script>
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
