An Introduction to HTML_AJAX

Joshua Eichorn

Creator of phpDocumentor, HTML_AJAX, and Senior Architect for Uversa

What is AJAX

Looking for more details start with Wikipedia http://en.wikipedia.org/wiki/Web_2.0 http://en.wikipedia.org/wiki/AJAX

Why HTML_AJAX

There are tons of AJAX toolkits out there, I created HTML_AJAX because

The actual timing was pushed directly by another AJAX package trying to get into PEAR, and I didn't agree with its design philosophy, But I did agree that having an AJAX package in PEAR would be useful.

HTML_AJAX Features

Quick Start Guide

Run pear install HTML_AJAX-alpha

Create a file called server.php


<?php
require_once 'HTML/AJAX/Server.php';

$server = new HTML_AJAX_Server();

$server->handleRequest();
?>

Now you can load the JavaScript library files into pages server.php?client=all

Quick Start Guide Part 2

Create a file to test the library, and use the JS only api

<html>
<head>
<title>Example 1 - HTML_AJAX.append()</title>
<script type="text/javascript" src="server.php?client=all"></script>

<script type="text/javascript">
function act() {
	HTML_AJAX.append('target','date.php');
}
</script>
</head>
<body>

<a href="javascript:act()">Append the current time as given by date.php</a>

<div id="target">I'm the target</div>
</body>
</html>

And we have useful AJAX - example1.php

Well at least useful in a real case

The rest of the basic API

<html>
<head>
<title>Example 2 - HTML_AJAX Basic Methods</title>
<script type="text/javascript" src="server.php?client=all"></script>

</head>
<body>
<a href="#" onclick="HTML_AJAX.append('target','date.php');">Append</a>
<a href="#" onclick="HTML_AJAX.replace('target','date.php');">Replace</a>

<a href="#" onclick="alert(HTML_AJAX.grab('date.php'));">Grab Sync</a>
<a href="#" onclick="HTML_AJAX.grab('date.php',function(result) { alert(result); })">Grab Async</a>

<div id="target">I'm the target</div>
</body>
</html>

example2.php










Using a Remote Class


    

  • Stub is created by including the js file
    • 

  • If you don't pass in a callback class, things will work in sync mode (You generally don't want this)
    • 

  • AJAX requests only happen when you call a method
    • 

  • The process is pretty simple, take a look at the generated stub, there is no magic here
    • 

  • callback names are the same as the method your calling
    • 













Registering Classes for export



PHP5/4 COMPAT WARNING
To support PHP 4 and 5 you must either use all lower case, or specify the methods to be exported

From this the server can generate a stub JS class: server2.php?stub=all




<?php
require_once 'HTML/AJAX/Server.php';

class example {
    function rot13($input) {
        return str_rot13($input);
    }

    function upperCase($input) {
        return strToUpper($input);
    }
}

$server = new HTML_AJAX_Server();

// upperCase will export as uppercase in php4 and upperCase in php5
$server->registerClass(new example());

// works in both php4 and 5 plus doing class name aliasing
$server->registerClass(new example(),'example2',array('rot13','upperCase'));

$server->handleRequest();
?>



















Using a Remote Class - code



Try it out: example3.php


<html>
<head>
<title>Example 3 - Using a remote class</title>
<script type="text/javascript" src="server2.php?client=all"></script>
<script type="text/javascript" src="server2.php?stub=all"></script>

<script type="text/javascript">
var callback = {
	rot13: function(result) {
		document.getElementById('target').innerHTML = result;
	},	
	upperCase: function(result) {
		document.getElementById('target').innerHTML = result;
	}	
}

var remoteExample = new example2(callback); // our php5/4 compat version

</script>

</head>
<body>

<input id="input">

<a href="#" onclick="remoteExample.rot13(document.getElementById('input').value)">rot13 input</a>

<a href="#" onclick="remoteExample.upperCase(document.getElementById('input').value)">upperCase input</a>



<div id="target"></div>

</body>

</html>













Basic api remote classes



Check it out: example4.php


<html>
<head>
<title>Example 4 - HTML_AJAX Basic Methods using remote methods</title>
<script type="text/javascript" src="server2.php?client=all"></script>
<script type="text/javascript" src="server2.php?stub=all"></script>

<script type="text/javascript">
HTML_AJAX.defaultServerUrl = 'server2.php';
HTML_AJAX.defaultEncoding = 'JSON';
</script>

</head>
<body>
<a href="#" onclick="HTML_AJAX.append('target','example','rot13','Input String');">Append</a>

<a href="#" onclick="HTML_AJAX.replace('target','example2','upperCase','Input String');">Replace</a>

<div id="target">I'm the target</div>
</body>
</html>















More to check out


Were out of there but there is more to check out, examples dir in docs and mailing list are you best bets


    
	
  • HTML_AJAX_Helper php helper api
    • 
	
  • Error Handler HTML_AJAX.onError
    • 
	
  • Customizing loading messages
    • 
	
  • Auto Server
    • 
	
  • JavaScript Util class
    • 
	
  • Using the request class directly
    • 
	
  • And more every release
    •