In order to divert the boredom of this time also to do an RSS application exercise, decided to maintain a small website to add a homepage news, browser with Ajax or Ajah from the server to get news from the asynchronous display, while providing RSS feeds for the aggregator to subscribe.
XMLHttpRequest from the last time a mobile phone simulator has not touched, this time on the Internet to find some incredibly found a good thing: http://www.scss.com.au/family/andrew/webdesign/ xmlhttprequest/, a cross-browser XMLHttpRequest implementation, the author publishes this library under the authoring common terms (Creative Commons License), As long as you do not remove the script in the author's name and URL can be used freely, use it! Download Xmlhttprequest.js to prepare for later use.
The data can be saved in the database or simply written to a file in the server, for the sake of flexibility, I'll create a new table in MySQL in the news, so several fields: ID, title, content, time. News entry and data from the database provided to the Ajax/ajah request this kind of garbage code I don't put it on:-)
The following is the client XMLHttpRequest code:
<title> Home News test </title>
<meta http-equiv= "Content-type" Conte Nt= "text/html; charset=gb2312 ""
<script type= "Text/javascript" src= "Xmlhttprequest.js" ></SCRIPT>
<body>
<div id= "News" > Read ... </div>
<script type= "Text/javascript"
. var req = new XMLHttpRequest ();
if (req)
{
Req.onreadystatechange = function ()
{
var news = "News read failed";
Try
{
if (req.readystate = 4 && (req.status = = | | req.status = = 304))
News = Req.responsetext;
}
catch (e)
{
News = e.description
document.getElementById (' News '). InnerHTML = news;
};
Req.open (' Get ', ' news.php ');
Req.send (NULL);
}
</script>
</body>
The only thing worth noting here is that XMLHttpRequest default is to use UTF-8 to pass data, so your data source is best to use UTF-8 otherwise (because we have the client here has specified to use the GB2312) will be garbled, which in IE will cause JavaScript error Wrong, under FireFox but no problem, so I use try and catch to wrap up the above code, lest the test when there are errors. If you want to try it, you can use the following code as a news.php:
<?php
Echo iconv ("GB2312", "UTF-8", "This is News");
echo "This is News";
?>
If you comment out the first sentence and open the second sentence is not only to see garbled, in IE will also appear-1072896748 errors. Interestingly, ie seems to also cache the content received by XMLHttpRequest, and FireFox will not, so in the test will appear to refresh IE many times see or old data problems, you can add the following 4 sentences in the program to solve this problem:
Header ("Expires:mon, June June 1997 05:00:00 GMT");
Header ("last-modified:"). Gmdate ("D, D M Y h:i:s"). "GMT");
Header ("Cache-control:no-cache, must-revalidate");
Header ("Pragma:no-cache");
To provide the first page news to the aggregator to subscribe to the background of the news generated RSS Feed,rss 2.0 specifications can refer to http://feedvalidator.org/docs/rss2.html, the corresponding Chinese translation version can be in http:// Www.cpcwedu.com/Document/WEBOfficial/095447158.htm find. The
RSS format is also one of the many dialects of XML, so you also want to start with the <?xml version= "1.0"?>, the name of the root node must be RSS, and this RSS node in RSS in accordance with the RSS 2.0 specification An attribute of the version= "2.0". The RSS node has a child node named channel, and Channel is a channel. Channel has 3 necessary subnodes, namely title, link, and description. To blog for example, title is the name of the blog, Link is a blog URL address, and description is a blog description.
&NBSP
Channel can contain several item child nodes, each item in the Blog corresponds to a post, each of our item is a piece of news. All child nodes of item are optional, but should contain at least title and description, because the news has time, so we add a pubdate node to it, the following is a code that conforms to the RSS 2.0 specification RSS file content:
<?xml version= "1.0" encoding= "UTF-8"?>
<rss version= "2.0" >
<channel>
<title>the Name of my site</title>
<link>http://www.mysite.com</link>
<description>just for Testing</description>
<item>
<title>About</title>
<description>hi, I ' m 2ndboy. Welcome to my site!</description>
<pubdate>sat, modified Sep 0:00:01 gmt</pubdate>
</item>
<item>
<title>new Service is out!</title>
<description>it ' s great for using.</description>
<pubdate>sat, Sep 1:23:45 gmt</pubdate>
</item>
</channel>
</rss>
Read the latest news content from the database generate RSS code here is not pasted, nothing more than a string of stitching, of course, you can also use PHP XML DOM interface to generate this RSS content. This is done by providing RSS feeds on the site.
After the RSS part I suddenly have an idea, in order to use AJAX data Browser to provide information, the server to respond to AJAX requests for a separate response processing, then why not let the browser to our previous generated RSS as a data source to display the home page news? This seems like a good idea, but RSS is an XML-formatted file, and it's clear that to do so, the client uses JavaScript to parse XML files and display them.
To manipulate XML in JavaScript, I decided to use Google's Open source project--AJAXSLT (http://goog-ajaxslt.sourceforge.net/) and more Google Open source projects to access http:// code.google.com/. Google provides this AJAXSLT project with JS implementation of an XML DOM interface and an XSLT implementation, the following is a few key files to do a brief introduction:
Misc.js: some constant definitions and helper functions, as well as the implementation of log.
Dom.js:XML DOM interface of JS implementation, the main function is Xmlparse (xmlstring), the success of the call can use the standard DOM way to manipulate the return of XDocument.
Xpath.js:XPath of JS implementation.
Xslt.js:XSLT JS Implementation, to use the inside of the Xsltprocess (XML, XSLT), given the XML and XSLT to get the results of the transformation.
You can use only the DOM implementation section, and Dom.js depends on the misc.js, so load the misc.js and load the dom.js first. In order to show good news on the home page, we want to use CSS to dress up the appearance of the news, so to the news of the organization of the data some requirements, such as to get the news eventually organized into the following:
<div id= "News" >
<div class= "News" >
<span class= "Title" >title</span>
<span class= "Time" >time</span>
<span class= "Content" >content</span>
</div>
</div>
Then we can write some for #News and div beforehand. News and so on the rules to dress up the home page. OK, here's a look at how to write the RSS code with JS (of course, we first need to use Ajax to get the RSS data):
var News = "";
var doc = Xmlparse (RSS);
Items = Doc.getelementsbytagname ("item");
for (var i = 0; i < items.length; i++)
{
News + + "<div class= ' news ' >";
title = Items[i].getelementsbytagname ("title");
News + + ("<span class= ' Title ' >" + title[0].firstchild.nodevalue + "<\/span>");
Time = Items[i].getelementsbytagname ("pubdate");
News + + ("<span class= ' time ' >" + time[0].firstchild.nodevalue + "<\/span>");
Description = Items[i].getelementsbytagname ("description");
News + + ("<span class= ' Content ' >" + description[0].firstchild.nodevalue + "<\/span>");
News + = "<\/div>";
}
document.getElementById (' News '). InnerHTML = news;
OK, so far our home page news is finished, but ..., and so on, since AJAXSLT provides a JS implementation of XSLT, why don't we give it a try?! Well, first write XSLT in XML Advanced programming:
<?xml version= "1.0"?>
<xsl:stylesheet version= "1.0" xmlns:xsl= "Http://www.w3.org/1999/XSL/Transform" >
<xsl:template match= "/" >
<xsl:apply-templates select= "//item"/>
</xsl:template>
<xsl:template match= "Item" >
<div class= "News" >
<xsl:apply-templates select= "title"/>
<xsl:apply-templates select= "pubdate"/>
<xsl:apply-templates select= "description"/>
</div>
</xsl:template>
<xsl:template match= "title" >
<span class= "Title" ><xsl:value-of select= "." /></span>
</xsl:template>
<xsl:template match= "pubdate" >
<span class= "Time" ><xsl:value-of select= "." /></span>
</xsl:template>
<xsl:template match= "description" >
<span class= "Content" ><xsl:value-of select= "." /></span>
</xsl:template>
</xsl:stylesheet>
Our JavaScript code above also takes this XSLT off the server, and then a word can be done with a stack of JS code to do the job:
document.getElementById (' News '). InnerHTML = Xsltprocess (Xmlparse (RSS), Xmlparse (XSLT));
How about, with XSLT convenient! All right, that's it! Yes, because XSLT uses XPath for conversion, it first contains xpath.js and then references Xslt.js.
A few consecutive days, with three post of space to write this thing, which omitted a lot of very simple, needless to describe the details of nonsense, you are interested in the spectators do not know what to see. Oh, no matter what, send here to record my days of the practice of the process bar.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
