HomeASP.NET Enhancing PHP Via the ASP.NET AJAX Framewo...
Enhancing PHP Via the ASP.NET AJAX Framework: A Second Look
Welcome to the second and final article in this tutorial about introducing the ASP.NET AJAX client-side framework into PHP programming. The first article covered how to set up the web service and this article will complete the discussion so we can fully utilize the AJAX feature within PHP via the Microsoft AJAX Library.
Contributed by Xianzhong Zhu Rating: / 5 June 30, 2008
Now that the web service is ready to use, we can write a common web page (it can be a .php, .htm, or .html file-here we select the .html form) to invoke the web service. The sample .html file we built here is named index.html. And for convenience, we listed all the related source code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
First of all, under the new PHP environment, it's impossible for us to fall back on the ASP.NET AJAX server-side control-ScriptManager. We have no choice but to refer to the ASP.NET AJAX client-side scripts and the formerly-defined PHP web service via manually programming them.
Second of all, please pay attention to the following line:
Herein, we must append a /js suffix to the PHP file in which the custom web service class is defined. This will notify the web server to tell the relevant PHP code and, with the help of Microsoft AJAX Library, to generate the appropriate client-side proxy for the PHP-styled web service and download it to the browser.
As a matter of fact, you can enter the above /js-suffixed line of code directly to the address bar of your browser and press ENTER to watch the interesting client-side proxy for the web service, which is shown in Figure 4.
Figure 4-the automatically generated web service proxy on the client side
Examine this carefully and you will find out that the client-side proxy is quite similar to those generated and discussed under the ASP.NET environment. And since our main interests do not lie herein, we will not dwell on it.
Next, notice that for a rather typical sample we painstakingly introduced one of the ASP.NET AJAX Futures CTP (the newest name is called 'ASP.NET Futures') scripts-PreviewScript.debug.js (you can use the release version, PreviewScript.js, instead of the debug version).
According to my shallow study, you can leverage most of the code inside PreviewScript.debug.js. However, there is apparently one deficiency in PHP for Microsoft AJAX Library (currently still in its '3 Alpha' version): we can not utilize the 'great' DataSource component as in the ASP.NET scenario. To some degree, we can say that the DataSource component is a marvelous invention under the ASP.NET environment that greatly simplifies the client-side data binding to the corresponding server side.
What we need to do is refer to a DataSource component in the xml-script programming and configure a few parameters. Then the client-side ListView/ItemView control can employ the server-side data as easily as on the client side. But, the DataSource component is designed to rely on the special ASP.NET server-side component-DataService. In other words, it may be a long time before the PHP for Microsoft AJAX Library project to becomes mature.
Due to the above examination, we cannot utilize the client-side offline DataSource component (in the xml-script declarative mode) and invoke the web service in the JavaScript mode.
A placeholder and the related templates for ASP.NET AJAX client-side control ListView are defined within the first part of the <body> text. As for how the templates correspond to the xml-script code snippet below, you can refer to the associated online ASP.NET AJAX tutorials at http://asp.net/ajax/. Here, we continue to leave space for web service invocation discussion.
When you click 'Get Animals,' the associated click event handler GetAnimals() is triggered. Then the control stays inside the JavaScript and the web service method is invoked. The code is listed below:
function GetAnimals()
{
AnimalService.GetAllAnimals(OnCompleted);
}
function OnCompleted(items)
{
$find("Results").set_data(items);
}
It all seems to call a local method, doesn't it? This is due to the automatically-generated client-side web service proxy discussed above. We first find the ListView instance 'Results' (not the 'div' DOM element!), and by calling the method set_data() of the ListView control, we successfully assign data to the control. All this occurs within the callback function OnCompleted() via the ASP.NET AJAX client-side global method 'findComponent' ('$find' for short).
By the way, we can use the debug techniques introduced in the Microsoft AJAX Library to track down the interesting data posted from the server side. To do this, we just, as usual, put a <textarea> element with the ID attribute 'TraceConsole' in the proper location of the page and then use methods of the Sys.Debug class to debug the related data. Figure 5 corresponds to the tracking snapshot the uses the Sys.Debug.traceDump() method.
Figure 5-use Microsoft AJAX Library's debug support to debug the sample
Last but not least, in the above xml-script declarative programming, readers should have been aware that by introducing PreviewScript.debug.js, not only can we utilize the xml-script mode to facilitate the client-side programming, but also to use many new concepts, such as transformer components, validate components, actions, behaviors, etc. so as to strengthen and extend the client ability.
Now, it's time to take a look at the running-time snapshot of our sample.
Start up your browser, enter http://localhost/exNow/index.html in the address bar, and press the ENTER key. You will launch the sample page, as is shown in Figure 6.
Figure 6-the initial snapshot of the sample application
Next, when you click 'Get Animals,' the server-side PHP-styled web service method will be invoked asynchronously and the related data will be partially posted back to the client side. Figure 7 indicates the related running-time snapshot.
Figure 7-the animal-related data are asynchronously derived from the PHP web service
In the above sample web page, the rendered data is seemingly just a few lines of strings. However, these are all acquired from the client-side PHP web service in the Ajax way. That is to say, through this small sample, we have achieved our initial goal of transplanting Microsoft AJAX Library to another web server side-the PHP platform.
Summary
In this article, with the help of the open source project "PHP for Microsoft AJAX Library," you have learned how to enhance PHP programming by using parts of the ASP.NET AJAX client-side framework. Although this sample has been debugged on Windows XP, due to the Microsoft AJAX Library and PHP's independence of OS platforms, you can surely get it working on any other operating system.
On the other hand, we should see that "PHP for Microsoft AJAX Library" has just taken its first step on a long journey, with a considerable distance to go before reaching applicability and practical scenarios.
Moreover, we should have realized that most of the ASP.NET AJAX client side components (Microsoft AJAX Library and many of ASP.NET AJAX Futures CTP) can be combined with many other kinds of server side languages without much difficulty. Nevertheless, the powerful functionalities of many of the ASP.NET AJAX server-side components are waiting to be implemented by other types of server-side languages, such as JSP, Perl, and ColdFusion.
All in all, with PHP getting more and more popular, "PHP for Microsoft AJAX Library" is sure to have a prosperous future.