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
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
June 30, 2008
Rate this Article:
MEH MEH++


SEARCH ASP FREE
TOOLS YOU CAN USE

advertisement

Write an HTML page to invoke the PHP web service

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">

<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title>ASP.NET AJAX On PHP Demo</title>

<link href="site.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="MicrosoftAjax.js"></script>

<script type="text/javascript" src="PreviewScript.debug.js"></script>

<script type="text/javascript" src="AnimalService.php/js"></script>


</head>

<body>

<div id="Contents">

<div>

<input type="button" onclick="GetAnimals()" value="Get Animals" />

</div>


<!-- Visual templates for ListView control-->


<div id="Results">

<div style="display:none;">

<div id="Results_layout">

<div id="Results_layout_parent">


<div id="Result_item" class="resultItem">

<span id="Result_Name" class="Result_Name"></span>

<span id="Result_Category" class="Result_Category"> </span>

<span id="Result_Color" class="Result_Color"></span>

</div>


</div>

</div>

</div>

</div>

</div>



<script type="text/javascript">

 

function GetAnimals()

{

AnimalService.GetAllAnimals(OnCompleted);

}

 

function OnCompleted(items)

{

$find("Results").set_data(items);


}

</script>

 

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<components>

 

<listView id="Results"

itemTemplateParentElementId="Results_layout_parent">

 

<layoutTemplate>

<template layoutElement="Results_layout" />

</layoutTemplate>

 

<itemTemplate>

<template layoutElement="Result_item">

 

<label id="Result_Name">

<bindings>

<binding dataPath="Name" property="text" />

</bindings>

</label>


<label id="Result_Category" >

<bindings>

<binding dataPath="Category" property="text" />

</bindings>

</label>

 

<label id="Result_Color" >

<bindings>

<binding dataPath="Color" property="text" />

</bindings>

</label>

</template>

</itemTemplate>

</listView>

</components>

</page>

</script>

</body>

</html>

Code Examination

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:

<script type="text/javascript"
src=" AnimalService.php/js"></script>


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.

Post Code Examination

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.

Watch the result of asynchronously invoking the PHP web service

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.

-DOWNLOAD SOURCE-

blog comments powered by Disqus
ASP.NET ARTICLES

- Implementing ASP.NET 4.0 Page.MetaDescriptio...
- ASP.Net Development Tips
- Intro to Sessions in ASP.Net
- Google Maps API Introduction in ASP.NET usin...
- Creating an ASP.NET 3.5 Gridview Image Galle...
- Encrypt QueryString in ASP.NET 3.5 using VB....
- ASP.NET 3.5 Drop Down List Controls
- Connect to Access Database with ASP.Net
- Secure Audio Streaming with ASP.Net and Flash
- Dynamic Sitemap and Navigation in ASP.Net
- Implement Gzip and Deflate Compression in AS...
- Run ASP.Net in Ubuntu with Apache
- ASP.Net Mono Website Contact Forms
- ASP.Net URL Rewriting Methods
- Murach`s ASP.NET 4 Web Programming with C# 2...

ASP Web Hosting ASP.Net Web Hosting Windows Web Hosting
ASP Free Forums 
 RSS  Tutorials RSS
 RSS  Forums RSS
 RSS  All Feeds
Site Map 
Request Media Kit
Write For Us Get Paid 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Privacy Policy 
Support 


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Most Popular Topics
All ASP.Net Tutorials