5.4 与服务器通信
5.4 与服务器通信
当Ajax技术出现之后，胖服务器端的现象已经被打破了。我们可以把传统Web服务器端的操作，移植到客户端来，如指定数据的显示样式等。这时，服务器端的主要作用就是处理客户端发送的数据，处理完毕后返回。
在Ajax程序中，客户端可以通过XMLHttpRequest对象向服务器端发送信息，其信息可以为空，也可以不为空。接受信息的服务器端文件可以是txt文本文件，也可以是JSP文件。在Ajax程序通过XMLHttpRequest对象和服务器进行通信，其通信包括两个方面，第一个为获取服务器信息并处理，第二个为向服务器发送信息。
1．异步请求实例
现在创建一个案例，该案例非常简单，主要是一个简单的HTML页面。该页面只有一个按钮，当我们单击这个按钮会初始化一个发送至服务器的异步请求。服务器将返回一个简单的静态文本作为响应。在处理这个响应时，会在一个警告窗口中显示该静态文本文件的内容。
首先创建客户端文件，打开记事本，输入下列代码：
<html>
<script. type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","0.txt",true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
alert("服务器响应信息为"+ xmlHttp.responseText);
}
}
}
</script>
<body>
<form. action="#">
<input type="button" value="start Basic Asynchronous Request"
onClick="startRequest();">
</form>
<div id="results"></div>
</body>
</html>
将上述代码保存，名称为Example1.html。
现在创建服务器端文件，打开记事本，输入下列代码：
你好，我来自服务器
将上述代码保存，名称为0.txt。将这两个文件直接复制到Tomcat运行目录的下面，如果没有可以建立一个服务器目录。这里我们建立C:\Tomcat 6.0\webapps\Example文件夹，并在该文件夹下建立WEB-INF文件夹。启动Tomcat服务器，打开IE浏览器，在地址栏中输入http://localhost:8080/Example/Example1.html，单击【转到】，会显示如图5-2所示窗口：
图5-2 异步请求弹出窗口
对服务器的请求是异步发送的，因此浏览器可以继续响应用户输入，同时在后台等待服务器的响应。如果选择同步操作，而且倘若服务器的响应要花几秒才能到达，浏览器就会表现的迟钝，在等待期间不能响应用户的输入。这样一来，浏览器就好像被冻住一样，无法响应用户输入，而异步做法可以避免这种情况，从而让最终用户有更好的体验。尽管这种改善很细微，但确实有意义。这样用户就能继续工作，而且服务器会在后台处理先前的请求。
与服务器通信而不打断用户的使用流程，这种能力是开发人员采用多种技术改善用户体验成为可能。例如，假设有一个验证用户输入的应用。用户在输入表单上填写各个字段时，浏览器可以定期的向服务器发送表单值来进行验证，此时并不打断用户，它还可以继续填写余下的表单字段。这就能大大节省了用户的时间，也能减轻服务器上的负载，因为不必在表单提交不成功时完全重建表单的内容。
TAG:
