AJAX tutorial

Intro

This tutorial quotes code from AJAX Tutorial. The ajax server code is now handled with php and the java script returns the time differently.

The reason why this code is magical is because AJAX makes the html page load dynamically behind the scenes - and not reprocess the whole page!

Asynchronous Javas script and XML. Now to demonstrate this lets be explicit and throw in cookies and php. Cookies are necessary as html is itself a stateless protocol. Cookies enable the state to be held on the client side as client side variables.

So pages can pass information to eachother through cookies.

The asynchronous means that its an event driven programming environment. Make the call and give it a callback. That is from the clients perspective.

Debugging an ajax call to a php page can be challenging because since it does work in the background it is ment to be silent. Simply convert to a normal php page and give it test data. When working comment the test and html display code out.

Making an ajax page into a html page during development is also useful for developing sql code.

Sending data to the server can be done through the url as xml. Similarly you can receive data from the server as xml in the response string. Theres about a 2K limit to sending data with GET so that it works on most browsers. If need more then can use POST.

eg book has id and title sent to server as xml.
var url="send.php" var params="myxmlstring=<library><id>46</id><title>book1</title> </library>"; xmlHttp.open("GET",url+"?"+params,true); xmlHttp.send(null);

On the server side PHP 5 processing
if (!empty($_REQUEST['myxmlstring'])) { $y = $_REQUEST['myxmlstring']; $dom = new domDocument; $dom->loadXML($y); if (!$dom) return; $s = simplexml_import_dom($dom); somefunc($s->title,$s->id); ...

For just sending data to the server and not getting a response simply have an empty body in the ajax function callback. So now all your server interaction has the same code.

Client Java Scritp time.js

When the function fires the server script time.php is fired and sends information back to the form.

Client html page

<html>
<body>
<head>
<script type="text/javascript" src="time.js"></script>
</head>

<h1>testb</h1>

<form name="myForm">
Name: <input type="text" onkeyup="ajaxFunction();"
name="username" />
Time: <input size="30" type="text" name="time" />
</form>

</body>
</html>

As letters are keyed into the name field the ajaxFunction is fired. The time field is then updated.

Server time.php

<?php
$now = time();
$then = gmstrftime("%a, %d %b %Y %H %H:%M:%S GMT",$now);
header("Expires: $then");

echo "*$then";
?>

The header code exires to do the update, what is echoed is the response.

XMLHttpRequest readyState

State	Description
0	not initialized
1	initialized
2	sent
3	process
4	complete

Sending Data to the Server

var url=somepage.php
var mydata = ...
url=url+"?q="+mydata;
url+="&sid="Math.random();
xmlHttp.onreadystatechanged=...
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

The server code gets the data from the url.

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
...
$q=$_GET["q"]; if (strlen($q) > 0)
...
?>

Warning: for data transfers it is be better to convert the ajax call to a synchronous one when loss of data is occuring. For example I was sending data to the server and then moving to the next html page.

Here's the new code that waits for the server to process the php page.