AJAX异步刷新.pdf

AJAX 技術報告 AJAX简介  术语Ajax用来描述一组技术，它使浏览器可以为用 户提供更为自然的浏览体验。  Ajax提供与服务器异步通信的能力，从而使用户从 请求/响应的循环中解脱出来。  借助于Ajax ，可以在用户单击按钮时，使用 JavaScript和DHTML立即更新UI，并向服务器发出 异步请求，以执行更新或查询数据库。当请求返回 时，就可以使用JavaScript和CSS来相应地更新UI， 而不是刷新整个页面。  最重要的是，Web应用程序不必完全依赖于从服务 器重新载入页面来向用户呈现更改。一切似乎就在 瞬间发生用户甚至不知道浏览器正在与服务器通信： Web站点看起来是即时响应的。 定义AJAX Ajax不是一种技术。实际上，它由几种蓬勃发展的技 术以新的强大方式组合而成。Ajax包含：  基于XHTML和CSS标准的表示；  使用Document Object Model进行动态显示和交互；  使用XMLHttpRequest与服务器进行异步通信；  使用JavaScript绑定一切。 AJAX的工作原理 Ajax 的核心是JavaScript对象XmlHttpRequest 。 该对象在Internet Explorer 5 中首次引入，它是 一种支持异步请求的技术。简而言之， XmlHttpRequest使我们可以使用JavaScript 向 服务器提出请求并处理响应，而不阻塞用户。 AJAX的应用1 ：XMLHTTPREQUEST 原始的Ajax直接使用XmlHttpRequest，实例如下： AJAX的应用1 ：XMLHTTPREQUEST 步骤如下：  创建跨浏览器的XMLHttpRequest  分派XMLHttpRequest  处理Servlet请求  用JavaScript 进行响应处理 创建跨浏览器的XMLHTTPREQUEST var req = init(); function init(){ /* Create a new XMLHttpRequest object to talk to the Web server */ var xmlHttp = false; /*@cc_on @*/ /*@if (@_jscript_version = 5) try { xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); } catch (e) { try { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } catch (e2) { xmlHttp = false; } } @end @*/ if (!xmlHttp typeof XMLHttpRequest != undefined) { xmlHttp = new XMLHttpRequest(); } return xmlHttp; } 分派XMLHTTPREQUEST function getResult(stateVal) { var url = /ajaxeg/action/SelectCityServlet?state=+stateVal; if(req){ req.open(GET,url, true); XmlHttpRequest req.onreadystatechange = complete; 对象属性 req.send(null); } JavaScript响应 XmlHttpRequest } 方法 function c