| ted when unzipping it should work. For instance, if you are using Tomcat, simply copy the xhrstruts directory into <TOMCAT_ROOT>\webapps. That should be all you need to do. Start up your app server and give it a shot! Access the application using http://localhost:8080/xhrstruts (replacing 8080 with whatever port your app server is listening on). This sample shows a number of different usage situations including a sortable table, a dropdown changing the contents of another as described above, and an RSS feed parser. This example is Struts-based, as the title of this article implies! Although Ajax can be used completely independent of Struts, or any other back-end technology, I generally work in Java, and with Struts, hence my choice. All of the examples in the webapp work with a chunk of script in the <head> of the document. Although each version has some minor differences, the all come from the same basic code. Here it is: var req; var which; function retrieveURL(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 document.getElementById("urlContent").innerHTML = req.responseText; } else { alert("Problem: " + req.statusText); } } } The basic idea of this code is simple… You call the retrieveURL() function, passing it the URL you wish to access. It instantiates the XMLHttpRequest object appropriately depending on browser, and then opens a request to the supplied URL. Note the try…catch block in the portion of the code for non-IE browsers. This is due to the fact that some browsers (Firefox as an example) will not allow any request via XMLHttpRequest that is to a domain other than the domain the page is served from. In other words, if you access www.omnytex.com/test.htm and it tries to access www.cnn.com, the browser will not allow it. But, accessing www.omnytex.com/whatever.htm will work just fine. IE will allow this cross-site scripting, but with a user verification required. One important line is the req.onreadystatechange = processStateChange; line. This line of code is setting up an event handler. When the state of the request changes, the processStateChange() function will be called. You can then interrogate the state of the XMLHttpRequest object and do whatever is appropriate. The previous table given lists all the possible values. All we particularly care about here is when the request is complete. The next thing we need to do is check the HTTP response code that was received. Anything other than 200 (HTTP OK) will just result in an alert with the error information displayed. In this example, when we get a complete response back and it was OK, we insert the text we received back into the urlContent span, which appears later on in the page. That is literally all there is to using XMLHttpRequest! A slightly more interesting example is the second example in the webapp, dynamic sorting of a table. Here is the complete page involved: <html> <head> <title>Example 2</title> <script> var req; var which; function retrieveURL(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 document.getElementById("theTable").innerHTML = req.responseText; } else { alert("Problem: " + req.statusText); } } } </script> </head> <body onLoad="retrieveURL(''''example2RenderTable.do'''');"> <h1>Example 2</h1> Dynamic table.<hr> <p align="right"><a href="home.do">Return home</a></p><br> This example shows how a table can be built and displayed on-the-fly by showing sorting of a table based on clicks on the table headers. <br><br> <span id="theTable"></span> <br> </body> </html> 上一页 [1] [2] [3] [4] 下一页 | 
