| Notice again the nearly identical script elements in the <head>. Here we are actually making a request to a Struts Action. This action returns the actual HTML for the table, sorted appropriately. There are other ways to accomplish this that don’t require you to generate HTML in the Action, but this is a quick-and-dirty approach that works quite well. We make an initial call to the Action when the page loads so that we have a table to begin with. Clicking on any of the column headers will result in the table being sorted and redrawn. Let’s take a look at another example from the webapp, this time the RSS feed parser: <html> <head> <title>Example 6</title> </head> <script> var req; var which; function retrieveURL(url) { if (url != "") { if (window.XMLHttpRequest) { // Non-IE browsers req = new XMLHttpRequest(); req.onreadystatechange = processStateChange; try { req.open("GET", url, true); } catch (e) { alert(e); } req.send(null); } else if (window.ActiveXObject) { // IE req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(); } } } } function processStateChange() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response // We''''re going to get a list of all tags in the returned XML with the // names title, link and description. Everything else is ignored. // For each that we find, we''''ll constuct a simple bit of HTML for // it and build up the HTML to display. When we hit a title, // link or description element that isn''''t there, we''''re done. xml = req.responseXML; i = 0; html = ""; while (i >= 0) { t = xml.getElementsByTagName("title")[i]; l = xml.getElementsByTagName("link")[i]; d = xml.getElementsByTagName("description")[i]; if (t != null && l != null && d != null) { t = t.firstChild.data; l = l.firstChild.data; d = d.firstChild.data; html += "<a href=\"" + l + "\">" + t + "</a><br>" + d + "<br><br>"; i++; } else { i = -1; } } document.getElementById("rssData").innerHTML = html; } else { alert("Problem: " + req.statusText); } } } </script> <body> <h1>Example 6</h1> RSS example.<hr> <p align="right"><a href="home.do">Return home</a></p><br> This example is a more real-world example. It retrieves an RSS feed from one of three user-selected sources, parses the feed and displays the headlines in clickable form. This demonstrates retrieving XML from a server and dealing with it on the client. <br><br> <b>Note that the RSS feed XML is actually stored as files within this webapp. That is because some browsers will not allow you to retrieve content with XMLHttpRequest outside the domain of the document trying to do the call. Some browsers will allow it with a warning though.</b> <br><br> <form name="rssForm"> <select name="rssFeed" onChange="retrieveURL(this.value);"> <option value=""></option> <option value="cnn_rss.xml">CNN Top Stories</option> <option value="slashdot_rss.xml">Slashdot</option> <option value="dans_rss.xml">Dan''''s Data</option> </select> </form> <hr><br> <span id="rssData"></span> <br> </body> </html> The first thing to note is that the RSS feed XML files are actually local files included with the webapp. A true RSS reader using XMLHttpRequest wouldn’t be possible because it would be dealing with domains outside its own. However, one way around this would be to write an Action that retrieves the feed from the true URL and then returns it to the page, and that is demonstrated in example 7. Other than the Action acting as the proxy to retrieve the RSS feed, the code for the page itself is the same. In any case, the example works very similarly to all the others except that we see an example of XML parsing here in the event handler fu 上一页 [1] [2] [3] [4] 下一页 | 
