Presentation is loading. Please wait.

Presentation is loading. Please wait.

网 站 设 计 与 建 设 Website design and developments

Similar presentations


Presentation on theme: "网 站 设 计 与 建 设 Website design and developments"— Presentation transcript:

1 网 站 设 计 与 建 设 Website design and developments

2 第三部分 网站设计技术 第15章 Ajax设计方法

3 15.1 什么是Ajax Ajax的全称是:Asynchronous异步JavaScript+XML
Web开发领域的最新时髦术语其实质是“旧貌换新颜” Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,它可以提供介于桌面应用程序和Web应用程序的中间选择,构建更为动态和响应更为灵敏的Web应用程序。 Ajax是一种客户端设计方法,可以与J2EE、.NET、PHP、Ruby和CGI脚本交互,它并不关心服务器是什么。

4 Ajax可以让开发人员构建基于Java技术的Web应用,并打破了使用页面重载的惯例 实例

5 HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
Ajax包括: HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。 使用XMLHttpRequest进行异步数据接收 DHTML 或 Dynamic HTML,用于动态更新表单。使用 div、span 和其他动态 HTML 元素来标记 HTML。 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML

6 15.2 Ajax工作原理 Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。
在Ajax之前,Web站点强制用户进入提交/等待/重新显示内容,用户的动作总是与服务器的“思考时间”同步。 Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。 借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI(用户界面),并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。 最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。

7 在面向消费者的诸多应用当中,Google的Gmail和GoogleMaps就是最常见的例子。在Gmail当中,AJAX负责如何开启线程会话,以显示不同邮件的文本内容。而在Maps当中,AJAX允许用户以一种似乎无缝的方式拖拉及滚动地图。 还有雅虎的Flickr像片共享应用和亚马逊网站的A9搜索引擎。 这些UI都充分地使用了后台通道 不过AJAX应用软件的适用领域具有一定的局限性。因为它们利用了一些最新的Web技术,所以只能在某些Web浏览器里面运行 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入

8 17.3 XMLHttpRequest 对象 XMLHttpRequest是一个 JavaScript 对象,处理所有服务器通信的对象。
一个Ajax交互从一个XMLHttpRequest对象开始。 它允许一个客户端脚本来执行HTTP请求,并且将会解析一个XML格式的服务器响应。 1)启动一个Ajax过程 form+ JavaScript 2)创建一个XMLHttpRequest实例 3)获取表单数据 。 4)将目标URL设置到XMLHttpRequest对象上。 5)发送请求 6)处理服务器响应

9 1)启动一个Ajax过程 form+ JavaScript
<FORM METHOD=GET ACTION=”/cgi-bin/helloworld.pl”> Click here to fire a script: <INPUT TYPE=SUBMIT VALUE=”fire”> </FORM>

10 <form> <p> City: <input type="text" name="city" id="city" size="25" onChange="callServer();" /> </p> State: < input type="text" name="state" id="state" size="25" Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p> </form>

11 2)创建一个XMLHttpRequest实例
IE7+、Firefox、Chrome、Safari 以及 Opera variable=new XMLHttpRequest(); IE5 和 IE6 使用 ActiveXObject variable=new ActiveXObject("Microsoft.XMLHTTP");

12 IE中安装的 JavaScript 技术版本不同,MSXML 实际上有两种不同的版本
var xmlHttp = false; try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } xmlHttp是XMLHttpRequest句柄

13 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);

14 // 打开一个与服务器的连接 xmlHttp
// 打开一个与服务器的连接 xmlHttp.open("GET", url, true); // 设置结束后服务器运行的函数名 xmlHttp.onreadystatechange = updatePage; // 发送这个请求 xmlHttp.send(null); }

15 XMLHttpRequest 对象的 open() 方法
指定了连接方法(GET) 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 和要连接的 URL。 最后一个参数 如果设为 true,那么将请求一个异步连接(这就是 Ajax 的由来) 如果设为 true,当服务器在后台处理请求的时候用户仍然可以使用表单(甚至调用其他 JavaScript 方法)。 。 如果使用 false,那么代码发出请求后将等待服务器返回的响应。

16 6)处理服务器响应 function updatePage() { if (xmlHttp.readyState = = 4) {
var response = xmlHttp.responseText; document.setElementById("zipCode").value = response; }

17 responseText 属性 responseXML 属性 获得字符串形式的响应数据
来自服务器的响应是 XML,而且需要作为 XML 对象进行解析

18 AJAX ASP/PHP 请求实例 http://www.w3school.com.cn/ajax/ajax_asp_php.asp
xmlhttp.open("GET","gethint.php?q="+str,true); //获得来自 URL 的 q 参数 $q=$_GET["q"]; echo $response;

19 AJAX 数据库实例 AJAX XML 实例


Download ppt "网 站 设 计 与 建 设 Website design and developments"

Similar presentations


Ads by Google