Tài liệu PHP and script.aculo.us Web 2.0 Application Interfaces- P1 ppt

Read The Object Name Using $ function

Read Name Using $F function

We have used a simple example by creating an array var name=new Array("First Name","Last Name","Age");

Read All Inputs & Put in Array Using $A function

We have included the stylesheet style.css The code that follows is inserted into the style.css file to add beauty to the code in the helper.html file Feel free to use your CSS creativity .FormTable { background: #9AAB3C; font-family:Verdana; font-size:13px; color:white; align:center; } links a{ width:300px; font-family:Verdana; font-size:14px; color:#13801C; align:center; } heading { font-family:Verdana; font-size:14px; color:#9E5A70; } [ 14 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 Chapter Here, it is a simple user interface using a combination of both scripts and codes When we run it in the browser, the output that we get is similar to the following screenshot: It's time to add some JavaScript to the helper.html file between This is pretty simple and straightforward function readDollar() { alert($('first_name')); } function readF() { alert($F('first_name')); } function readA() { var name=new Array("First Name","Last Name","Age"); alert($A(name)); } [ 15 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 Exploring Client-side Techniques with Prototype That's the most basic example you can find and, of course, you can quickly get started The following screenshot shows the result: AJAX components—an overview Ask any developer why he prefers working with Prototype and you will typically find one obvious reason—it's native and easy support for AJAX Asynchronous JavaScript and XML aka XHR aka AJAX has become the de facto technique for many web applications Most of the community-centric and niche web applications are powered by AJAX these days Prototype provides a lot of features that help us add AJAX functionality to web applications with ease Otherwise, we would have to write the XMLHttpRequest objects The best part is that we, as developers, don't have to worry about the cross-browser issues Prototype takes care of them An AJAX object is a predefined object in the library that helps us to create objects on the fly It comes with a lot of options for our convenience All AJAX functionality is contained in mainly four objects of the AJAX class There are basically the following four types of objects: • Ajax.Request • Ajax.Updater • Ajax.PeriodicalUpdater • Ajax.Responders [ 16 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 Chapter Ajax.Request Ajax.Request is inherited from the AJAX class of Prototype It helps us in dynamically requesting a URL from the server, which is followed by a server response An Ajax.Request object encapsulates commonly used AJAX code for setting up the XMLHttpRequest object, performing cross-browser checking for compatibility, and callback handling Communication with the server to establish client-side communication, based on server-side script, is easy and painless A simple constructor looks like this: New Request = new Ajax.Request(url, options); As you will notice from the syntax, in order to initiate the Request object we need to supply two arguments: the url, and the options Some of the options parameters are as follows: • Method: It specifies whether the action is a GET or POST method • Parameters: It is the input values that we will be passing to our server • onSuccess: On successful completion of the request, either call a function or perform some other similar function onFailure: It is the handle used if the request fails onLoading: While requesting, show a simple image or text to notify the user about what is happening • • The syntax for calling an Ajax.Request object with all parameters is shown in the following code: var options = { method: "get", parameters: param, onSuccess: ShowReponse, onFailure: ShowError }; var req = new Ajax.Request("url", options); Alternatively, we can also define the options as a part of the constructor This would look like the following code snippet: new Ajax.Request(url, { method: 'get', parameters:pars, onSuccess: showResponse, onFailure:showError }); [ 17 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 Exploring Client-side Techniques with Prototype Ajax.Updater The Ajax.Updater class of Prototype helps us by updating specific portions of the web page with the data that comes from the server dynamically The syntax looks like this: new Ajax.Updater(location, url,[ options]) If you look at the syntax, it takes two parameters: • location: It is the ID of the or any specific part of the page that needs • url: It is the URL of the server file to fetch the data to be updated The options are the same as those of Ajax.Request So, the complete constructor to be defined would be as follows: var options = { Method: "get", Parameters: param, onSuccess: ShowReponse, onFailure: ShowError }; var req = new Ajax.Updater('location', "url", options); Ajax.PeriodicalUpdater The Ajax.PeriodicalUpdater class of Prototype uses the Ajax.Updater class to refresh an element after a certain time interval The syntax will be almost the same as the one for Ajax.Updater But along with this we need to supply the frequency and delay A simple example that we can mention at this point of time is Gmail After a certain period of time the data gets refreshed and new data is placed inside the container, as seen in the following screenshot: [ 18 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 .. .PHP and script.aculo.us Web 2.0 Application Interfaces Building powerful interactive AJAX applications with script.aculo.us and PHP Copyright © 2009 Packt Publishing... AJAXified using Prototype and script.aculo.us We have used PHP and MySQL as our server-side artillery to spread love among the PHP and MySQL developers and community as a whole for script.aculo.us Prototype... with web applications script.aculo.us uses the functions and power of Prototype, such as Request and Updater, to add AJAX functionality to web applications easily For now, all you should understand