ajax 编程技术第七章 web 服务、 api 和 mashup

主讲教师：李艺主讲教师：李艺[email protected]@ustc.edu.cn

Ajax 编程技术第七章 Web 服务、 API 和 Mashup

7-2 中国科大《 Ajax编程技术》

7.1 Web 服务

什么是Web服务Web是穿过网络或 Internet提供数据的一种方式。它有万

维网联盟 (W3C)组织标准化。 Web服务评价

优点：能够实现隐蔽地提供数据；缺点：

也是它的隐蔽性；Web看起来太复杂；开发、维护的成本较高；若以 XML格式返回数据，客户端需要进一步处理数据，减慢应用程序的执行。


7.1 Web 服务

公共Web服务许多企业都向大众提供公共免费Web服务，下面是一些常

见的典型公共Web服务： Yahoo Web Service服务 (http://developer.yahoo.com)

Amazon Web Service服务 (http://aws.amazon.com)

Last.FM(http://www.audioscrobbler.net/data/Webservices

/)


7.1 Web 服务

使用第三方Web服务我们介绍一个简单的示例。启动浏览器，输入Web服务的 URL 就行了。

例 1：典型的公共Web服务是股票报价、网上天气预报服务。这里介绍一个股票报价应用。

1. 打开浏览器，在地址栏中键入： http://www.webservicex.net/stockquote.asmx


7.1 Web 服务2. 单击 GetQuote链接，可以看到一个新页面，在 symbol文本框中输入

“MSFT”，然后单击 Invoke按钮。


7.1 Web 服务

3. 可以看到Microsoft公司的股票价格：


7.1 Web 服务

4. 示例说明向Web服务器发送一个传送Microsoft公司股

票信息的请求，Web服务器则返回一个已经已经包装在字符串元素内的 XML文档。


7.2 Web 服务的结构

可以将Web服务的结构看成是具有以下 4个循环步骤的过程：1. 客户机越过一个协议调用Web服务。通常这个协议是 HTTP协议（也有可能是 SMTP、 HTTPS协议）；

2. 客户机向服务器发送一个方法，该方法包含需要W

eb服务的说明；3. 收到请求方法的服务器返回一个值或一个确认，该确认表示服务器已经收到该方法；

4. 客户机获得结果，并处理已接收的信息。



Web服务标准规定使用 SOAP（ Simple Object Access Protocol,简单对象访问协议）来发送并接收Web服务中的数据。

要做的工作不仅仅是把数据存放进查询字符串中，或使用 SOAP把数据填入文档。需要做更多的工作：1. 创建一个特定的 SOAP文档，通常， SOAP消息是标准的 XML文档。

2. 接着接收到从Web服务中返回的 SOAP格式消息，然后处理此响应。实际上， SOAP一直存在非议，因为和 HTTP-G

ET/POST方法及 REST方法相比， SOAP方法太复杂。



REST方法如果使用 REST方法，必须提供一个 URL，并假设Web

服务将返回一个 XML片段。例如：下面的请求是一个 REST查询：

http://www.Webservicex.net/Stockquote.asmx/GetQuote?symbol=MSFT

如果正常的话，将返回到一个 XML片段：<?xml version=“1.0” encoding=“utf-8”>

<string xmlns= http://www,WebserviceX.NET/ ><StockQuotes><Stock>

<Symbol>MSFT</Symbol><Last>28.52</Last> <Data>1/18/2009</Data>

<Time>4:00</Time>Change>0.00</Change><Open>N/A</Open><High>N/A</high>

<Low>N/A</Low><Volume>0</Volume><MktCao>284.38<MktCap>

<PreviousCloss>28.52</PreviousClose>

<percentageChange>0.00%</PercentageChange><AnRange>21.46-28.70</annRange>

<Earns>1.196</Earns><P-E>23.85</P-E><Name>MICROSOFT CP</Name></Stock>

</StockQuote></string>



REST方法评价优点：

1. 能获取存储在 XML中的消息；2. 使用 HTTP传送；3. 使用 HTTP方法 GET/POST/PUT；4. 使用 URL；5. 可以使用 HTTP认证安全；6. 容易使用

缺点：1. 安全不如 SOAP健壮；2. 当使用 GET时， URL的长度受到限制



Amazon和 eBay两家公司都提供 REST方法，可让人们访问这两家公司的产品信息的Web服务。同时，新闻种子也围绕 REST设计 (如 Atom RSS)，过程和设备可以进行多次调用，或多次调用后不会引起大问题。



SOAP方法和 REST方法相比， SOAP还要维护重要功能，例如，消

息的优先权，消息的终止、安全属性及其加密、消息的路由选择和关键数据的使用，它不采用通过 URL调用Web服务。

当使用 SOAP时，消息被作为一个 SOAP文档发送到服务器。 SOAP文档包括 <SOAP:Envelope>元素，它指定一个命名空间。该信封元素包括以下两种元素： <SOAP:Header>元素：类似于 HTTP标题，还可以传递消息； <SOAP:Body>元素：包含要调用的Web服务名称以及指定响应返回方式的参数和消息。

可见， SOAP方法要比 RESTF方法难。因为它不仅要遵守 XML规则，还要坚持 SOAP规则，此外还要编码返回的文档。


7.3 将 Web 服务集成到 Ajax 应用程序

将Web服务添加到 Ajax应用程序中很容易。 X

MLHttpRequest对象具有 Open方法，该方法采用 3

个参数，其中一个参数是 URL。可以放置Web服务的端点作为参数，代替 URL传递。

使用 XMLHttpRequest交叉 URL引用例如，下列代码是调用同一网站的某张网页：

var url = “stockquote.asmx/GetQuote?symbol=‘MSFT’;

xmlhttp.open(“GET”,url,true);

这与使用其它请求没什么两样。



但如果 URL是外部地址，这就是交叉 URL引用：var url = “http://www.webservicex.net/stockquote.asmx/GetQuote?symbol=‘MSFT’;

xmlhttp.open(“GET”,url,true);

如果使用 IE浏览器，运行结果可能发生三种情形之一，这取决与 IE的工具菜单中的“ Internet选项”→“安全”→“自定义级别”的一个设置：1. 如果默认值为“提示”，则在首次显示时出现对话框，进行设置；2. 若是“启用”，不会出现设置对话框；3. 如果是“禁用”，则会出现“存取抵赖”错误。



JavaScript同源策略同源策略即不允许交叉 URL加载。就是禁止某个 URL源

的网页装载另一个 URL源的网页，目的是避免恶意病毒的流行。它在mozilla标准上实现，如 netScape、 Firefox浏览器。

什么叫同源假设有一个 URL： http://store.company.com/dir/page.html，

那么， http://store.company.com/dir2/other.html、 http://store.company.co

m/dir/inner/another.html 与之同源；而 https://store.company.com/secure.html 、http://store.company.com:81/dir/etc.html 、 http://news.company.com/dir/other.html

则不是与指定的 URL同源，因为它们要么协议不同，要么端口不同，要么主机不同。



但有一个例外，如果脚本对当前域设置了一个后缀：

document.domain = "company.com";

那么， http://company.com/dir/page.html 则认为是同源。而基于相同的原因，不能再将 document.domain 设置成另一个名字！比如：document.domain = "othercompany.com";



创建应用程序代理见教材 p175


7.4 使用脚本标记

第二种方法是使用脚本标记。该方法为：移动 XMLHttpRequest对象，并在 <script>标记的

src属性中对Web服务进行调用；该Web服务必须以 JSON格式返回输出；检索具有 JSON格式的数据。

JSON格式在 11章介绍。例：这里仅作简单介绍，我们创建一个以 JSON格式返回其输出的Web服务示例，来演示如何完成 yahoo的 Ti

meService。



1. Index.html:

<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Web Service example using Dynamic Script Tag</title><script type="text/javascript" src="webservice2.js"></script></head><body><form id="form1" name="form1"><input type="button" onclick="dynamicTag();" value="Click button to use web service" /></form></body></html>



2. webservice2.js:function getTime(JSONData) { //回调函数 if (JSONData != null) { alert(TimeStampToDate(JSONData.Result.Timestamp)); }}function TimeStampToDate(xmlDate){ return new Date(xmlDate); //将时间戳格式转换成可读取的日期格式}function dynamicTag(){ request = "http://developer.yahooapis.com/TimeService/V1/getTime?appid=YahooDemo&output=json&callback=getTime&format=ms"; var head = document.getElementsByTagName("head").item(0); var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", request); head.appendChild(script);}



3. 运行状况：这是一种常见的Web

服务用法。但遗憾的是，这里不能保证返回的是JSON格式而不是标准的XML格式。如果Web只返回一个标准的 XML文档，那么，因为我

们已经将该脚本的 src属性赋值给Web服务的输出，所以将引发一个脚本错误。


7.5 使用 API

多数Web公司，如象 Amazon, Microsoft, Google, Yahoo, ebay 等公司，不但提供Web服务，他们的Web站点也提供 API服务，用户可以通过 JavaScript直接调用这些 API功能。下面列出了常见的 API功能： Flickr ( www.flickr.com/services/ ) YouTube ( www.youtube.com/dev ) Google Maps (www.google.com/apis/maps ) eBay (http://developer.ebay.com/) del.icio.us(www.programmableWeb.com/api/del.

icio.us) Virtual Earth(www.viavirtualearth.com)


7.5 使用 API

Web服务与 PAI之间的区别 Web服务使用 HTTP-GET/HTTP-POST，返回 XML

文档，或使用 SOAP请求返回 SOAP响应文档。W

eb必须遵守W3C.org规定的标准； API是指通过编程语言与指定应用程序交互的一组方法，它不必符合所有标准。

ajax 编程技术 第七章 web 服务、 api 和 mashup

Documents

ajax 编程技术第七章 web 服务、 api 和 mashup