1、网 站 设 计 与 建 设 Website design and developments,第17章 Ajax设计方法,第三部分 网站设计技术,17.1 什么是Ajax,Ajax的全称是：Asynchronous异步JavaScript+XML Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。 Web开发领域的最新时髦术语其实质是“旧貌换新颜”。 Ajax可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例 Ajax是一种客户端设计方法，可以与J2EE、.NET、PHP、Ruby和CGI脚本交互，它并不关心服务器是什么
2、。,Ajax包括： XHTML和CSS XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性 使用文档对象模型DOM(DocumentObjectModel)作动态显示和交互 使用XML和XSLT做数据交互和操作 XSLT 是一种用于将 XML 文档转换为 XHTML 文档或其他 XML 文档的语言。 使用XMLHttpRequest进行异步数据接收 使用JavaScript将它们绑定在一起,17.2 Ajax工作原理,Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。 在Ajax
3、之前，Web站点强制用户进入提交/等待/重新显示内容，用户的动作总是与服务器的“思考时间”同步。 Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。 借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI(用户界面)，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。 最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。,在面向消费者的诸多应用当中，Google的Gmail和GoogleMaps就是最常见的例子。在Gmai
4、l当中，AJAX负责如何开启线程会话，以显示不同邮件的文本内容。而在Maps当中，AJAX允许用户以一种似乎无缝的方式拖拉及滚动地图。 还有雅虎的Flickr像片共享应用和亚马逊网站的A9搜索引擎。 这些UI都充分地使用了后台通道 不过AJAX应用软件的适用领域具有一定的局限性。因为它们利用了一些最新的Web技术，所以只能在某些Web浏览器里面运行, Click here to fire a script:,17.3 XMLHttpRequest 对象,XMLHttpRequest是一个 JavaScript 对象，处理所有服务器通信的对象。 一个Ajax交互从一个XMLHttpRequest
5、对象开始。 它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。1)启动一个Ajax过程 form+ JavaScript 2)创建一个XMLHttpRequest实例 3)获取表单数据 。 4)将目标URL设置到XMLHttpRequest对象上。 5)发送请求 6)处理服务器响应,1)启动一个Ajax过程 form+ JavaScriptCity: State: Zip Code: ,2)创建一个XMLHttpRequest实例 使用 Microsoft IE浏览器 var xmlHttp = false;try xmlHttp = new ActiveXObj
6、ect(“Msxml2.XMLHTTP“); catch (e) try xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e2) xmlHttp = false; 处理 Mozilla 和非 Microsoft 浏览器 var xmlHttp = new XMLHttpRequest(); xmlHttp是XMLHttpRequest句柄,3)获取表单数据 。 function callServer() var city = document.getElementById(“city“).value;var state = do
7、cument.getElementById(“state“).value; 4)将目标URL设置到XMLHttpRequest对象上var url = “/scripts/getZipCode.php?city=“ + escape(city) + “。 ,指定了连接方法（GET） 和要连接的 URL。 最后一个参数 如果设为 true，那么将请求一个异步连接（这就是 Ajax 的由来） 如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 方法）。 。 如果使用 false，那么代码发出请求后将等待服务器返回的响应。,6)处理服务器响应 function updatePage() if (xmlHttp.readyState = = 4) var response = xmlHttp.responseText;document.setElementById(“zipCode“).value = response; 4 -完成状态,
