山东大学《网站设计与建设》课件第15章 Ajax设计方法

第第15章章 Ajax设计方法设计方法第三部分 网站设计技术15.1 什么是AjaxnAjax的全称是：Asynchronous异步JavaScript+XML nAjax不是一个技术，它实际上是几种技术，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。 nWeb开发领域的最新时髦术语其实质是“旧貌换新颜”nAjax 由 HTML、JavaScript 技术、DHTML 和 DOM 组成，它可以提供介于桌面应用程序和Web应用程序的中间选择，构建更为动态和响应更为灵敏的Web应用程序。nAjax是一种客户端设计方法，可以与J2EE、.NET、PHP、Ruby和CGI脚本交互，它并不关心服务器是什么。nAjax可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例 n实例http:/ nHTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 nJavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。使用XMLHttpRequest进行异步数据接收 nDHTML 或 Dynamic HTML，用于动态更新表单。使用 div、span 和其他动态 HTML 元素来标记 HTML。 n文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML15.2 Ajax工作原理nAjax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。n在Ajax之前，Web站点强制用户进入提交/等待/重新显示内容，用户的动作总是与服务器的“思考时间”同步。nAjax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。n借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI(用户界面)，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。n最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。n在面向消费者的诸多应用当中，Google的Gmail和GoogleMaps就是最常见的例子。在Gmail当中，AJAX负责如何开启线程会话，以显示不同邮件的文本内容。而在Maps当中，AJAX允许用户以一种似乎无缝的方式拖拉及滚动地图。 还有雅虎的Flickr像片共享应用和亚马逊网站的A9搜索引擎。这些UI都充分地使用了后台通道n不过AJAX应用软件的适用领域具有一定的局限性。因为它们利用了一些最新的Web技术，所以只能在某些Web浏览器里面运行 nAjax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入17.3 XMLHttpRequest 对象nXMLHttpRequest是一个 JavaScript 对象，处理所有服务器通信的对象。n一个Ajax交互从一个XMLHttpRequest对象开始。n它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。1)启动一个Ajax过程 form+ JavaScript2)创建一个XMLHttpRequest实例3)获取表单数据 。4)将目标URL设置到XMLHttpRequest对象上。 5)发送请求6)处理服务器响应处理服务器响应 1)启动一个Ajax过程 form+ JavaScriptClick here to fire a script: City: State: Zip Code: 2)创建一个XMLHttpRequest实例n所有现代浏览器均支持 XMLHttpRequest 对象IE7+、Firefox、Chrome、Safari 以及 Operanvariable=new XMLHttpRequest();IE5 和 IE6 使用 ActiveXObjectnvariable=new ActiveXObject(Microsoft.XMLHTTP);nIE中安装的 JavaScript 技术版本不同，MSXML 实际上有两种不同的版本var xmlHttp = false;try xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e2) xmlHttp = false; nxmlHttp是是XMLHttpRequest句柄句柄function callServer() / 从Web表单中获取city 和 state 单元格的值 var city = document.getElementById(city).value; var state = document.getElementById(state).value; if (city = null) | (city = ) return; if (state = null) | (state = ) return; / 建立URL，escape 函数是一个顶级 JavaScript 函数，可将属性值添加到URL中 var url = /scripts/getZipCode.php?city= + escape(city) + &state= + escape(state); / 打开一个与服务器的连接 xmlHttp.open(GET, url, true); / 设置结束后服务器运行的函数名 xmlHttp.onreadystatechange = updatePage; / 发送这个请求 xmlHttp.send(null);XMLHttpRequest 对象的 open() 方法n指定了连接方法（指定了连接方法（GET）与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。n和要连接的和要连接的 URL。n最后一个参数最后一个参数如果设为如果设为 true，那么将请求一个异步连接（这就是，那么将请求一个异步连接（这就是 Ajax 的由来）的由来）n如果设为如果设为 true，当服务器在后台处理请求的时候用户仍然可，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他以使用表单（甚至调用其他 JavaScript 方法）。方法）。 。如果使用如果使用 false，那么代码发出请求后将等待服务器返，那么代码发出请求后将等待服务器返回的响应。回的响应。6)处理服务器响应处理服务器响应 function updatePage() if (xmlHttp.readyState = = 4) var response = xmlHttp.responseText; document.setElementById(zipCode).value = response; nresponseText 属性属性获得字符串形式的响应数据nresponseXML 属性属性来自服务器的响应是 XML，而且需要作为 XML 对象进行解析http:/ ASP/PHP 请求实例请求实例nhttp:/ n/获得来自 URL 的 q 参数 $q=$_GETq; necho $response; nAJAX 数据库实例数据库实例nAJAX XML 实例实例