Ajax For Dumies phần 8 potx

Figure 6-11: A Rico LiveGrid. Figure 6-10: Dragging and dropping with Rico. 205 Chapter 6: More Powerful Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 205 Besides these techniques, Rico offers other visual effects, such as making ele- ments fade in and out of view, and an “accordion” control that can display sev- eral panes of text which you can slide open or closed with a draggable bar. Displaying data in an HTML element The Rico library files, prototype.js, rico.js, util.js, include support for directly fetching text and XML data by using Ajax. For example, say that you wanted to recover the text in an XML document named rico.xml, which looks like this: <?xml version = “1.0” ?> <ajax-response> <response type=”element” id=”targetDiv”> <span>This data fetched using RICO methods.</span> </response> </ajax-response> In this case, the XML <response> element indicates that its content should be displayed in an HTML element named “targetDiv”. To make that happen, you use the Rico library files. You can connect the name of a request (“request1” in this example) to the XML document that’s using the Rico ajaxEngine object’s registerRequest method, and indicate in which HTML element to display the fetched data with the registerAjaxElement method in an example named testRico.html. You can see how all this works in the following code: Figure 6-12: A Rico live search of Yahoo!. 206 Part III: Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 206 <script language=”javascript”> function init() { ajaxEngine.registerRequest(“request1”, “rico.xml”); ajaxEngine.registerAjaxElement(“targetDiv”); } </script> . . . <body onload=”init()”> . . . </body> After you’ve set up the request, you can execute that request with ajaxEngine object’s sendRequest method when the user clicks a button to fetch the data this way: <html> <head> <title>Testing Rico</title> <script src=”prototype.js”></script> <script src=”rico.js”></script> <script src=”util.js”></script> <script language=”javascript”> function init() { ajaxEngine.registerRequest(“request1”, “rico.xml”); ajaxEngine.registerAjaxElement(“targetDiv”); } function getData() { ajaxEngine.sendRequest(“request1”, “”); } </script> </head> <body onload=”init()”> 207 Chapter 6: More Powerful Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 207 <h1>Testing RICO</h1> <form> <input type=”button” value=”Display Message” onclick=”getData()”> </form> <div id=”targetDiv”>The fetched data will go here.</div> </body> </html> You can see the results of testRico.html in Figure 6-13, where the code used Rico methods to fetch the text, “This data was fetched using RICO methods.” from rico.xml on the server. Letting JavaScript objects handle your data Rico also lets you fetch XML data and handle that data by using JavaScript objects, which is handy if you want to put that data to use rather than simply display it. For example, say that you had an XML document, rico2.xml, and you wanted to recover the text assigned to the day attribute of the <response> element (which is “Friday”): <?xml version = “1.0” ?> <ajax-response> <response type=”object” id=”displayHandler” day=”Friday”> <span>Here is some text.</span> </response> </ajax-response> Figure 6-13: Using Rico to write to an HTML element. 208 Part III: Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 208 You can do this task by using a JavaScript object to handle the fetched data by using Rico. The <response> element in the preceding code indicates you want to use an object named displayHandler, which is what you’ll do here. Rico is set up so that the JavaScript object you use to handle data should have a method named ajaxUpdate, which is passed the XML data. This example uses a JavaScript object of a type named DisplayHandler that supports an ajaxUpdate method. The goal in this method is to recover the text assigned to the <response> element’s day attribute and to display that data, which works like this (see Chapter 8 for more on handling XML by using JavaScript this way): <script language=”javascript”> function DisplayHandler () {} DisplayHandler.prototype = { ajaxUpdate: function(ajaxResponse) { var attrs = ajaxResponse.attributes; document.getElementById(“targetDiv”).innerHTML = “Today is “ + attrs.getNamedItem(“day”).value; } } . . . Now you can create the displayHandler object and set up the request so that it’ll fetch the data in rico2.xml. Next, you use a Rico method named registerAjaxObject to register the JavaScript object whose ajaxUpdate method should be called with the XML data: <html> <head> . . . <script language=”javascript”> . . . function init() { displayHandler = new DisplayHandler(); ajaxEngine.registerRequest(“request1”, “rico2.xml”); ajaxEngine.registerAjaxObject( 209 Chapter 6: More Powerful Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 209 “displayHandler”, displayHandler); } </script> </head> <body onload=”init()”> . . . Now when the user clicks a button, the ajaxEngine sendRequest method is called to fetch the data, as you see here: <html> <head> <title>Testing RICO with JavaScript objects</title> . . . function init() { displayHandler = new DisplayHandler(); ajaxEngine.registerRequest(“request1”, “rico2.xml”); ajaxEngine.registerAjaxObject( “displayHandler”, displayHandler); } function getData() { ajaxEngine.sendRequest(“request1”, “”); } </script> </head> <body onload=”init()”> <h1>Testing RICO with JavaScript objects</h1> <form> <input type=”button” value=”Display message” onclick=”getData()”> </form> <div id=”targetDiv”>The fetched data will be displayed here.</div> </body> </html> 210 Part III: Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 210 When the data is fetched, it’ll be passed to the displayHandler object’s ajaxUpdate method, which will extract and display the text assigned to the day attribute in rico2.xml, as shown in Figure 6-14. This example is a success. Passing data to a JavaScript object like this can be a useful technique when you want to process the data you fetch from the server before displaying it. Overcoming caching with the Http framework Got problems with caching? Internet Explorer caches the data it gets from the server, so you’ll often see that same data over and over, even if you change the actual data the server sends back. One solution is to use Firefox for development, instead of Internet Explorer. But you’re going to have to deal with Internet Explorer at some point, and if you still have caching issues when development is done, you might take a look at the Http framework, which you can get for free at http://adamv.com/dev/javascript/http_request. This framework supports forced caching in Firefox as well as forced non- caching in Internet Explorer. You can see an example at http://adamv.com/dev/javascript/ files/time, which displays the current time (in milliseconds), as shown in Figure 6-15. Internet Explorer caches the response from the server by default, so clicking the top Get Time button always gives you the same time. But the Http package can avoid caching (which it does by appending unique data to the end of an URL each time you call the URL). For example, when you click the second button from the top in the figure, the time is updated for each button click, even in Internet Explorer. Figure 6-14: Using Rico to handle XML data by using a JavaScript object. 211 Chapter 6: More Powerful Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 211 This is a useful package when data caching becomes an issue, but you can often handle this issue yourself just by appending unique data to the end of an URL, as already discussed. Figure 6-15: Avoiding caching with the Http framework. 212 Part III: Ajax Frameworks 12_785970 ch06.qxp 1/20/06 12:23 PM Page 212 Chapter 7 Server-Side Ajax Frameworks In This Chapter ᮣ Writing JavaScript with PHP and Sajax or Xajax ᮣ Accessing Java with Direct Web Remoting (DWR) ᮣ Building Web applications with Echo2 ᮣ Finding out about even more frameworks “H m,” says the CEO, “all those JavaScript-oriented Ajax frameworks are very nice — “ “Great,” you say. “So we’re in business?” “Well, I have a question,” says the CEO. “As I was saying, those JavaScript– oriented Ajax frameworks are very nice, but you still have to develop the server-side code too.” “Sure,” you say, “unless you just want to fetch data from a simple data file.” “Aren’t there any Ajax packages that let you develop just the server-side code and automatically create the JavaScript for you?” “Glad you asked,” you say. “In fact, that’s what this whole chapter is all about.” Writing JavaScript by Using Ajax Frameworks Working with Ajax often means using JavaScript in the browser and a language like PHP or JavaServer Pages on the server. In earlier chapters, I show you Ajax packages that let you develop the browser-side part of the applica- tion. But some Ajax packages are designed to be used on the server — and they can write JavaScript for you. That’s what you see in this chapter. 13_785970 ch07.qxp 1/20/06 12:24 PM Page 213 Although some server-side frameworks are based on exotic server-side languages, most of the ones you see use the popular PHP (see Chapter 10 for more on PHP) and Java languages, especially JavaServer Pages. Those are the ones I stick to here, starting with Sajax. Note that many of the following frameworks do much the same thing: let you work with Ajax by using server- side programming. When you see how these packages work in this chapter, you’ll know which one is right for you. Sajax and PHP Sajax is an Ajax framework (available for download from www.modern method.com/sajax) that lets you create Ajax JavaScript on the server by using various server-side languages. How does Sajax work? You can use it on the server to create the JavaScript that will support Ajax in your browser. Currently, Sajax lets you connect to ASP, ColdFusion, Io, Lua, Perl, PHP, Python, and Ruby on the server. For example, you can use it to create a JavaScript function in a Web page, connecting that function to a PHP method on the server, which in turn han- dles your data and then sends its data to another JavaScript function back in the browser. So when the user opens the PHP page, Sajax generates all the JavaScript to handle Ajax operations in the created Web page. For example, take a look at the addition example, addem.php — available for download from the Web site associated with this book — which appears in Figure 7-1. When you enter two values and click the Calculate button, the page uses Ajax to add the values on the server and display the result without a page refresh. Figure 7-1: Using Sajax to add numbers. 214 Part III: Ajax Frameworks 13_785970 ch07.qxp 1/20/06 12:24 PM Page 214 [...]... that JavaScript to server-side functions by using Ajax Very cool You might also take a look at http://cyberdummy.co.uk/test/dd.php, which uses Sajax for drag-and-drop operations Xajax and PHP Xajax, which you can get for free at http://xajax.sf.net, is an Ajax framework that lets you use server-side methods to create Ajax JavaScript for use in a browser Xajax uses PHP on the server, and you can get an... by using Ajax techniques, and the result is displayed without a page refresh, as you see in Figure 7-2 If you’re interested in generating JavaScript on the server this way, take a look at both Sajax and Xajax Chapter 7: Server-Side Ajax Frameworks LibAjax and PHP Here’s another PHP-based Ajax server-side framework: LibAjax, which you can get for free from http://sourceforge.net/projects/libajax The... function with the $xajax object function addem($op1, $op2) { $objResponse = new xajaxResponse(); $objResponse->addAssign(“result”, “value”, $op1 + $op2); return $objResponse->getXML(); } $xajax = new xajax(“addem.server.php”); $xajax->registerFunction(“addem”); Then the code calls the Xajax method processRequests, which is much like the Sajax sajax_handle_client_request method, to prepare for the JavaScript... function, you call the LibAjax client_request method to set up the callback from JavaScript to the PHP code $ajax- >mode = “POST”; $ajax- >export = array(“addem”); $ajax- >client_request(); ?> LibAjax automatically writes the JavaScript for you when you call the $ajax- >output() method: Adding numbers with LibAjax ... the addem function to Sajax and start setting up the JavaScript that will appear in the browser: 215 216 Part III: Ajax Frameworks Sajax generates much of the JavaScript needed in this example, and it does that with the PHP function sajax_show_javascript,... $objResponse = new xajaxResponse(); $objResponse->addAssign(“result”, “value”, $op1 + $op2); return $objResponse->getXML(); } $xajax = new xajax(“addem.server.php”); $xajax->registerFunction(“addem”); $xajax->processRequests(); 219 220 Part III: Ajax Frameworks In the HTML part of this example, the code uses an Xajax method named printJavascript to create the JavaScript that Xajax will use ... english=”yes” /> For the full story on XML, take a look at XML for Dummies, 4th Edition, by Lucinda Dykes and Ed Tittel If you want to see the formal XML specification, as published by the World Wide Web Consortium (the people responsible for the XML specs) take a look at www.w3.org/tr/rec-xml Chapter 8: Handling XML in Ajax Applications Keeping XML documents well-formed One criteria for XML documents... JavaScript as x_addem by using Sajax Next, set up Sajax by calling sajax_init, and export the addem function: Exporting the addem function means that you’ll be able to access the addem function in JavaScript (as x_addem) Finally, the code calls the sajax_ handle_client_request method... text for various e-mail messages All you have to do is select an e-mail message in the top box at right, and the text of that message appears in the box beneath it, as you see in the figure Figure 7-9: A Web mail client using Echo2 Handling Ajax and JavaServer Pages with Ajax Tags Here’s another interesting framework — the Ajax Tag Library, which you can get at http://ajaxtags.sourceforge.net This Ajax. .. appears at http://libajax.sourceforge.net/ documentation.html To demonstrate how LibAjax works, I show you an addition example here as well, which you can see in Figure 7-3 Keep in mind that the files for the script I highlight here extract to a php folder by default The code for this chapter (available for download from the Web site associated with this book) assumes that addem.php and libajax.php are in . which uses Sajax for drag-and-drop operations. Xajax and PHP Xajax, which you can get for free at http://xajax.sf.net, is an Ajax framework that lets you use server-side methods to create Ajax JavaScript. Sajax and Xajax. 220 Part III: Ajax Frameworks 13_ 785 970 ch07.qxp 1/20/06 12:24 PM Page 220 LibAjax and PHP Here’s another PHP-based Ajax server-side framework: LibAjax, which you can get for free. with Ajax by using server- side programming. When you see how these packages work in this chapter, you’ll know which one is right for you. Sajax and PHP Sajax is an Ajax framework (available for