|
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] 下一页
[Web开发]AJAX来判断dedecms用户是否登录 [系统软件]Explanation of UFT-8 and Unicode
[系统软件]Using dllimport and dllexport in C++ Classes [常用软件]神奇 我家的照片会唱歌 照片会唱歌
[VB.NET程序]VB.NET and C# 语法比较手册 [Delphi程序]IntraWeb And ActiveForms
[Delphi程序]different between BPL and DLL [VB.NET程序]How to setup a basic Struts project using Ecli…
[网页制作]Classes and Objects in PHP5 [网页制作]新手解读：认识XML，AJAX，SNS，Tag
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
