Ajax编程技术 第十章 使用外部数据.

Presentation on theme: "Ajax编程技术 第十章 使用外部数据."— Presentation transcript:

1 Ajax编程技术 第十章 使用外部数据

2 10.1 使用XML新闻种子 现今在Web上共享数据使用得最广泛的格式之一是XML文件。这些XML文件是按特定方式格式化，并联合为新闻种子(news feeds)。它们可以用来让访问者预览Web站点或博客上的最新内容，而且还包括说明和最新消息的链接。虽然大部分XML文件都用于新闻，但它们也可以用于其他内容。 通过检索XML种子中的数据，还可以使用Ajax在自己的站点中创建在线种子阅读器。当向服务器提出一个Ajax请求时，有两种不同的方法可以用来从服务器响应中检索数据： 使用XMLHttpRequest对象的responseXML属性访问XML格式的数据； 使用XMLHttpRequest对象的responseText属性访问字符串格式的数据。 10-2

3 10.1 使用XML新闻种子 联合和XML种子 RSS包括：RSS0.9x, RSS2.0, RSS1.0和Atom1.0。RSS版本不同，其RSS代表的含义也不同： RSS0.91：Rich Site Summary, 丰富站点摘要； RSS0.9、RSS1.0：RDF Site Summary,RDF站点摘要； RSS2.0：Really Site Syndication, 真正站点简单联合 目前，对于新闻种子来说，RSS2.0是最广泛应用的XML格式，Atom1.0是最新的有力竞争者。 10-3

4 10.1 使用XML新闻种子 RSS0.9x 所有的RSS文件都是XML文件，它们都是从XML声明开始：
<?xml version=“1.0”?> RSS0.9x(RSS0.91,RSS0.92RSS0.93,RSS0.94)文件有一个rss根元素，该元素包含一个统领文档部分的channel元素： <rss version=“0.91”> <channel> …… </channel> </rss> 10-4

5 10.1 使用XML新闻种子 Channel元素必须具有以下5个子元素： title: 种子的名称；
link: 与种子关联的Web站点的URL； description: 频道的描述； language: 编写种子采用的语言； image: 种子的图片描述。 此外还有一些可选子元素：copyright, item等。Item子元素还有以下子元素： title: 包含内容的标题（必选项）； link: 包含内容项的URL （必选项） ； description: 包含内容项的描述（可选项）。 10-5

6 10.1 使用XML新闻种子 RSS0.91格式文件示例： <?xml version="1.0"?>
<rss version=“0.91"> <channel> <title>My Channel</title> <link> <description>My News</description> <language>en</language> <copyright> 2006, Lucinda Dykes</copyright> <image> <title>My Logo</title> <url> <width>90</width> <height>70</height> </image> <item> <title>Earth Headed for Warmest Temps in a Million Years</title> <link> <description>In about 45 years, temperatures on Earth will be hotter than at any time during the past one million years, says the U.S. government's top climatologist in a new report released today. </description> <comments> </item> </channel> </rss> 10-6

7 10.1 使用XML新闻种子 RSS2.0 RSS2.0类似与RSS0.9x，但有一个重要的补充，是它具有可选命名空间模块，可以在种子空间中用名字空间名来表示名字空间中的元素，如radio:id，说明元素id是 名字空间中包括的一个成员： <?xml version="1.0"?> <rss version=“2.0“ xmlns:radio = “ //命名空间添加到rss元素中 <channel> <title>My Channel</title> <link> <description>My News</description> <language>en</language> <copyright> 2006, Lucinda Dykes</copyright> <item> <title>Earth Headed for Warmest Temps in a Million Years</title> <link> <description>In about 45 years, temperatures on Earth will be hotter than at any time during the past one million years, says the U.S. government's top climatologist in a new report released today. </description> <comments> <radio:id> </radio:id> //id元素要加 radio 前缀 </item> </channel> </rss> 10-7

8 10.1 使用XML新闻种子 RSS1.0 RSS1.0是一种W3C规范。它以资源描述框架(RDF)的W3C规范为基础。RDF是一种XML语言，该语言用来提供关于Web上的资源的元数据。元数据是描述和模拟其他数据的数据。RSS1.0是RDF的精简版本，但它比RSS0.9x或RSS2.0复杂。 RSS1.0格式的新闻种子的根元素是rdf:RDF，且使用 rdf命名空间中的几个属性来指定于该种子项有关的资源位置。channel元素中不包含item元素。channle、image和item元素都是根元素rdf:RDF的子元素。 XML种子很少采用RSS1.0格式的主要原因是它太复杂。 10-8

9 10.1 使用XML新闻种子 <?xml version="1.0"?>
<rdf:RDF xmnls:rdf = xmnls= <channel rdf:about=“ <title>My Channel</title> <link> <description>My News</description> <image rdf:resource=“ /> <items> <rdf:Seq> <li rdf:resource=“ /> </rdf:Seq> </items> </channel> <image rdf:about=“ > <title>My Logo</title> <url> <link> </image> <item rdf:about=“ <title>Earth Header for Warmest Temps in a Million Years</title> <link> <description>In about 45 years, temperatures on Earth will be hotter than at any time during the past one million years, says the U.S. government's top climatologist in a new report released today. </description> </item> </rdf:RDF> 10-9

10 10.1 使用XML新闻种子 Atom1.0 Atom1.0联合格式是XML语言的新产品，其基础结构类似于XML文件，但Atom使用的是不同的根元素(feed)，并包含一些重要区别。 <?xml version=“1.0”> <feed xmlns=“ xml:lang=“en”> feed元素包括3个必选子元素： id: 种子的永久URL； title: 种子的名称； updated: 上次更新种子的时间。 10-10

11 10.1 使用XML新闻种子 它使用entry元素来代替item元素，该元素包含3个必选子元素： id: entry元素的URL；
<feed xmlns=“ xml=“en”> <id> <title>My Site</title> <updated> T12:00:00z</updated> 它使用entry元素来代替item元素，该元素包含3个必选子元素： id: entry元素的URL； title: entry元素的名称； updated: 上次更新entry元素的时间。 Summary: 可选子元素，类似于description元素 10-11

12 10.1 使用XML新闻种子 <?xml version="1.0"?>
<feed xmlns=“ xml=“en”> <id> <title>My Site</title> <updated> T12:00:00z</updated> <entry> <id> <title>Earth Headed for Warmest Temps in a Million Years</title> <updated> T12:00:00z</updated> <summaryIn about 45 years, temperatures on Earth will be hotter than at any time during the past one million years, says the U.S. government's top climatologist in a new report released today. </summary> </entry> </feed> 10-12

13 10.2 从XML种子中提取数据 RSS格式或Atom格式的XML新闻种子都是XML文件。在处理服务器对Ajax请求的响应时，可以使用XMLHttpRequest对象的responseXML属性或responseText属性，以XML或字符串形式提取种子中的数据。 提取XML数据 我们使用RSS2.0版本的新闻种子例文，并从该文件中提取XML形式的数据。 10-13

14 10.2 从XML种子中提取数据 例：从XML种子中提取数据。 创建example1.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Extracting XML</title> <script language = "javascript"> var request = makeHTR(); function makeHTR() { var request; if(window.XMLHttpRequest) { try { request = new XMLHttpRequest(); } catch (e) { request = null; } } else { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { request = null; } } if (!request) // return the created object or display an error message { alert("Error creating the XMLHttpRequest object."); } return request; function sendRequest() { // proceed only if the xmlHttp object isn't busy if (request.readyState == 4 || request.readyState == 0) { request.open("GET", "feed.xml", true); request.onreadystatechange = processResults; // define the method to handle server responses request.send(null); // make the server request 10-14

15 10.2 从XML种子中提取数据 function processResults() {
// move forward only if the transaction has completed if (request.readyState == 4) { if (request.status == 200) { var xmlDocument = request.responseXML; // 获得XML结构的文本元素 (the root element) var channelNodes = xmlDocument.documentElement.firstChild.childNodes; var item = channelNodes[5].childNodes; var title = item[0].firstChild.nodeValue; // 用从服务器接收来的数据修改客户端显示 document.getElementById('title').innerHTML = title; var link = item[1].firstChild.nodeValue; document.getElementById('link').innerHTML = link; var description = item[2].firstChild.nodeValue; document.getElementById('description').innerHTML = description; } else // a HTTP status different than 200 signals an error { alert("There was a problem accessing the server: " + request.statusText); </script> </head> <body> <h1>Get Feed Results</h1> <form> <input type="button" id="feedR" value = "提取"> </form> <h4>Title: <span id="title"></span></h4> <h4>Link: <span id="link"></span></h4> <h4>Description: <span id="description"></span></h4> <script type="text/javascript"> var myDoc = document.getElementById('feedR'); myDoc.onclick = sendRequest; </body> </html> 10-15

16 此出应该有显示汉字的选项，但也可以就选择en，而以utf-8格式存盘，就可以显示汉字。
10.2 从XML种子中提取数据 创建feed.xml文件，必须以utf-8格式存盘保存。 <?xml version="1.0"?> <rss version="2.0"> <channel> <title>My Channel</title> <link> <description>My News</description> <language>en</language> <copyright> 2006, Lucinda Dykes</copyright> <item> <title>地球在下一个千年里将变得非常温暖</title> <link> <description>气候学家，在45年内，地球温度和过去的一千年内的任何时候相比，将变得更热。</description> <comments> </item> </channel> </rss> 此出应该有显示汉字的选项，但也可以就选择en，而以utf-8格式存盘，就可以显示汉字。 10-16

17 10.2 从XML种子中提取数据 运行example1.htm: 10-17

18 10.2 从XML种子中提取数据 提取字符串数据 可以使用XMLHttpRequest对象的responseText属性从XML新闻种子文件中提取字符串数据，但提取出来后用JavaScript进行随后的处理很难。很难将字符串中的标记与字符分开： 例：使用XMLHttpRequest对象的responseText属性提取XML数据。 1. 创建example2.htm: 10-18

19 10.2 从XML种子中提取数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=iso " /> <title>Extracting XML</title> <script language = "javascript"> var request = makeHTR(); function makeHTR() { var request; if(window.XMLHttpRequest) { try { request = new XMLHttpRequest(); } catch (e) { request = null; } } else { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { request = null; } if (!request) { alert("Error creating the XMLHttpRequest object.");} else return request; function sendRequest() { if (request.readyState == 4 || request.readyState == 0) { request.open("GET", "feed.xml", true); request.onreadystatechange = processResults; request.send(null); } } function processResults() { if (request.readyState == 4) { if (request.status == 200) { var xmlDocument = request.responseText; alert(xmlDocument); } else { alert("There was a problem accessing the server: " + request.statusText); } } } </script></head> <body><h1>Get Feed Results</h1> <form><input type="button" id="feedR" value = "Extract"> </form> <h4>Title: <span id="title"></span></h4> <h4>Link: <span id="link2"></span></h4> <h4>Description: <span id="description"></span></h4> <script type="text/javascript"> var myDoc = document.getElementById('feedR'); myDoc.onclick = sendRequest; </script></body></html> 10-19

20 10.2 从XML种子中提取数据 10-20

21 10.3 使用Ajax构建在线种子阅读器 使用新闻种子阅读器主要是为了用户访问频繁变化的在线内容提供一种方式。可以创建一个Ajax应用程序，在其中包括一个向XML新闻种子文件发出请求的JavaScript、一个对来自新闻种子的数据进行提取和处理的PHP，以及在页面上显示提取数据的XHTML和CSS。对于应用程序，我们将为以下组成该应用程序的每个应用程序使用一个单独的文件：XHTML、CSS、JavaScript和PHP。 10-21

22 10.3 使用Ajax构建在线种子阅读器 例：创建Ajax种子阅读器。 创建主页面文件index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Ajax Feed Reader</title> <link rel="stylesheet" href="feed.css" type="text/css" /> <script type="text/javascript" src="feed.js"></script> </head> <body onload="sendRequest()"> <div id="masthead"> <h1 id="siteName">使用Ajax创建在线种子阅览器 </h1> </div> <div id="content"> <h2 id="pageName">示例</h2> <div class="story"><h3>Introducing Ajax</h3> <p>这是一个使用Ajax创建新闻种子阅览器</p> <div class="story"> <p> 使用新闻种子阅读器主要是为了用户访问频繁变化的在线内容提供一种方式。</p> </div> <div class="feedResults"> <form> <input type="button" value="Update Feed" name="update" id="update" /> </form> <script type="text/javascript"> var updateFeed = document.getElementById('update'); updateFeed.onclick = sendRequest; </script> <div class="feedResults" id="displayResults">  <br /> </body> </html> 10-22

23 10.3 使用Ajax构建在线种子阅读器 创建feed.js: var request = makeHTR();
function makeHTR() { var request; if(window.XMLHttpRequest) { try { request = new XMLHttpRequest(); } catch (e) { request = null; } } else { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { request = null; } if (!request) alert("Error creating the XMLHttpRequest object."); else return request; function sendRequest() { if (request.readyState == 4 || request.readyState == 0) { num = Math.round(Math.random()*999999); request.open("GET", "FeedRead3.php?id="+num, true); request.onreadystatechange = processResults; request.send(null); else setTimeout('sendRequest()', 1000); } function processResults() { if (request.readyState == 4) { if (request.status == 200) { var textResponse = request.responseText; alert('Updating the Feed'); document.getElementById('displayResults').innerHTML = textResponse; { alert("There was a problem accessing the server: " + request.statusText); 10-23

24 10.3 使用Ajax构建在线种子阅读器 创建feed.css: body{ font-family: Arial,sans-serif;
color: #333333; line-height: 1.166; margin: 0px; padding: 0px; } a:link, a:visited, a:hover { color: #006699; text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-family: Arial,sans-serif; h1{ font-family: Verdana,Arial,sans-serif; font-size: 120%; color: #334d55; } h2{ font-size: 114%; color: #006699; } h3{ font-size: 100%; h4{ font-size: 100%; font-weight: normal; color: #333333; } h5{ font-size: 100%; color: #334d55; } ul{ list-style-type: square;} ul ul{ list-style-type: disc;} ul ul ul{ list-style-type: none;} #masthead{ margin: 0; padding: 10px 0px; border-bottom: 1px solid #cccccc; width: 100%; } #content{float:right; width: 50%; padding: 0 3% 0 0; border: medium dotted #0066CC; } .story{ clear: both; padding: 10px 0px 0px 10px; font-size: 80%;} .story p{ padding: 0px 0px 10px 0px;} .feedResults{ margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } 10-24

25 10.3 使用Ajax构建在线种子阅读器 页面程序运行： 10-25