Hvordan skrive en Ajax RSS Script

Asynkron Javascript og XML, AJAX, er en teknikk som bruker flere web-teknologi for å utvikle interaktive klientsiden webapplikasjoner. Javascript brukes til å lese en XML-fil, og vise formatert innhold på websiden bruker dynamisk HTML (DHTML) og Document Object Model (DOM). Really Simple Syndication (RSS) feed filer er XML-formaterte filer som inneholder informasjon og linker for nyheter, blogginnlegg, og selv podcast informasjon. Henter og viser en RSS-feed er en fin måte å komme i gang med AJAX.

Bruksanvisning

1 Opprett en ny Javascript-fil. Lagre det med filnavnet "rss.js".

2 Legg til følgende funksjon. Funksjonen intializes og returnerer en XMLHttpRequest-objektet. XMLHttpRequest er kjernen i AJAX programmering. Eldre versjoner av Internet Explorer initial en XMLHttpRequest bruke en ActiveX stedet for vinduet.

function initXmlHttpReq() {
var x ;
if (window.XMLHttpRequest) {
x = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
x = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("Your browser does not support this feature.");
return ;
}

returnere x;
}

3 Legg til følgende funksjon for å håndtere virkningen av parsing og vise RSS-strømmen når filen er hentet. readyState viser statusen for filen hente, og er lik 4 når filen ble hentet vellykket. Dokumentet vil ha en DIV tag med id "rss". Skriptet vil skrive RSS inn i denne DIV.

function stateChange() {
if (xmlreq.readyState==4) {
var data = xmlreq.responseXML;
var elem = document.getElementById("rss");
parseRss(data, elem);
}
}

4 Legg følgende to funksjoner for analysering og skriving av RSS-data som er lagret i dataobjektet. Hver RSS overskrift finnes i "element" element, som inneholder tittelen, link, og annen informasjon i underordnede elementer. parseRss bygger en uordnet liste, fylles det med informasjon fra RSS-feed, og skriver det til en DIV med id "rss" i nettside ved hjelp av skriptet. getVal brukes til å trekke data fra de underordnede noder, og holder parseRss fungere litt mer ryddig og lesbar.

function parseRss(data, elem) {
elem.innerHTML = "<h2>Feed<h2>";
var items = data.getElementsByTagName("item");
var list = document.createElement("ul");
for (var i = 0 ; i < items.length ; i++) {
var listItem = document.createElement("li");
var linkItem = document.createElement("a");
linkItem.setAttribute("href", getVal(items[i],"link"));
linkItem.appendChild(document.createTextNode(getVal(items[i],"title")));
listItem.appendChild(linkItem);
list.appendChild(listItem);
}
elem.appendChild(list);
}

funksjon getVal (obj, tag) {
tilbake obj.getElementsByTagName (tag) [0] .firstChild.nodeValue;
}

5 Legg til følgende funksjon som åpner RSS-feed, utløser parsing og skriving av innholdet på websiden.

function makeRequest () {
xmlreq.open("GET", url, true);
xmlreq.send(null);
}

6 Legg til følgende linjer på slutten av skriptet. Disse linjene vil utføre når siden lastes. Endre URL "rss.xml" til nettadressen for RSS-feed.

var xmlreq = initXmlHttpReq();
var url = "rss.xml" ;
xmlreq.onreadystatechange=stateChange;

7 Bruk skriptet ved å inkludere skriptet i nettsidens hoderegionen:
<Script type = "text / javascript" til BODY-koden er onload attributt:

<Body onload = "makeRequest ();">

Hint

  • Tilpass formateringen ved å endre parseRSS funksjon eller skape en stil i CSS-fil for "div.rss", "div.rss ul", og "div.rss ul li". Oppdater RSS automatisk ved å opprette en tidtaker hendelse i Javascript for å ringe makeRequest funksjon med få minutters mellomrom. Lag en ticker som viser en overskrift på en gang ved å endre for loop i parseRSS vente noen sekunder før du setter innholdet i DIV med neste overskrift på listen.
  • AJAX kan bare brukes til å hente XML-filer fra servere på ditt eget nettverk domene. For å kunne bruke eksterne RSS feeds, kan du bruke en server-side scheduler å hente kopier til webserveren, eller en server-side web-applikasjon for å hente og levere fôr til AJAX script. Se også "MDC: HTTP Access Control" linken i Referanser for mer informasjon om implementering av cross-site HTTP-forespørsler.