读《Ajax基础教程》(3)

来源：互联网发布：python 数据挖掘包编辑：程序博客网时间：2024/04/30 03:54

第4章实现基本Ajax技术

4.1 完成验证

validation.html
----------------
<script type="text/javascript">
var xmlHttp;
...
function validate() {
  createXMLHttpRequest();
  var date = document.getElementById("birthDate");
  var url = "ValidationServlet?birthDate=" + escape(date.value);
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = callback;
  xmlHttp.send(null);
}
function callback() {
  ....
  var mes = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
  var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
  setMessage(mes, val);
}
function setMessage(message, isValid) {
  var messageArea = document.getElementById("dateMessage");
  var fontColor = "red";
  if (isValid == "true") {
   fontColor = "green";
  }
  messageArea.innerHTML = "<font color=“+ fontColor + ">" + message + "</font>";
}
</script>
<body>
Birth date:<input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div>
</body>

4.2 读取响应首部

如果只关注响应首部，完成这样一个请求的标准做法是使用HEAD请求，而不是前面的GET或POST。
当服务器对HEAD请求作出响应时，它只发送响应首部而忽略内容。
var xmlHttp;
var requestType;

reqeustType = request;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("HEAD", url, true);
xmlHttp.send(null);

4.3 动态加载列表框

Web应用通常使用”向导工具“设计原则来构建，每个屏幕要求用户输入少量的信息，每个后续页的数据都依据前一页的输入来创建。
避免完全页面刷新的一种技术是在页面上隐藏数据，并在需要时再显示它们。但在数据多，而且经常需要变更的时候不大可行，需要利用Ajax从服务器读取过滤的信息。

4.4 创建自动刷新页面

股票行情，天气预报，标题新闻等等都是经常改变的数据，但不值得为这些数据的修改手工地完全刷新页面。
使用Ajax，就不用反复点击刷新按钮，还可以使用褪色技术，以可视化的方式让用户知道哪些内容是新的。

4.5 显示进度条

4.6 创建工具提示

当把鼠标放置在某个内容上时，会显现出一个与其内容相关的其他内容。

4.7 动态更新Web页面

4.8 访问Web服务

Web服务是支持异构计算机系统相互操作的一种有用的工具。Web服务通常用作为计算机系统之间的通信管道，这与CORBA，RMI或DCOM很相似。为了支持更高层次的互操作性，Web服务是基于文本的协议，通常在HTTP之上实现。最著名的Web服务实现是SOAP(简单对象访问协议)。WSDL(Web服务描述语言)描述了如何创建Web服务的客户。实现Web服务还有一种更简单的方法，称为REST(代表状态传输)。

通过使用REST，建立请求时可以先指定一个服务入口URL，再向查询串追加搜索参数。服务将结果返回为XML文档。

XMLHttpRequest对象只能访问发起文档（即调用脚本）所在域中的资源。如果试图访问其他域的资源，可能因为浏览器的安全限制而失败。

浏览器实现安全沙箱的方式各不同，IE会询问用户是否允许访问另一个域中的资源，Firefox则会报告错误，自动失败，可以用专用于Firefox的JavaScript代码避免这种行为。

还可以利用网关，由网关接受来自XMLHttpRequest对象的请求，并把它转发到其他的Web服务，网关再把结果路由传送到浏览器。

REST和SOAP把响应返回为XML文档，两者之间最显著道德差异是，REST将请求作为带查询串参数的简单URL发送，而SOAP请求是具体的XML文档，通常通过POST而不是GET发送。

4.9 提供自动完成

Google Suggest不仅很好地放置了下拉区，还会在输入框中自动插入最有可能的答案，并将非用户键入的部分置灰，在下拉区中甚至还能使用向上和向下箭头。

4.10 小结