California Web Design, SJScott Enterprise

XMLHTTPRequest and PHP

Written by LIQID

Thursday, 13 January 2005

XMLHttpRequest, Javascript and PHP. Dynamic rich web content.
XMLHTTP documentation

Now that Google has released their SOAP api trick to render the Google Suggest feature on the fly, I think I can safely say that XMLHTTP is going main stream or at least is taking a step in that direction. More developers are going to use this great feature to create robust and rich web design concepts. If you have come to this page though a search them you already know a little about what this tool can do for you, but if not, then I will give you a down and dirty crash course. XMLHttp

Think of this concept as another layer for HTTP transmissions that is active in the back end of your browser. With this layer you have the ability to send requests and parse return information and post that information to the browser without a hard refresh. This has a great impact on the bandwidth a page can draw. Supposed you have a huge shopping cart page. There can be several different elements to the page, for example all the items in the cart, the shipping information, tax, etc... Supposed you want to change the quantity of one item without having to reload the entire page.

Microsoft first introducted the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. The Mozilla project introducted a native version starting with mozilla 1.0 and the Apple team fitted Safari 1.2 and later with this feature. This is not a new tool, but it is a newly known tool.

Object Instantiation

In mozilla and safari creating and instantiating the object is quite simple with a one line command.
var ref = new XMLHttpRequest();
The redmond style is almost as easy. Just create a new activeXObject with the parameter "Microsoft.XMLHTTP".
var ref = new ActiveXObject("Microsoft.XMLHTTP");

As you can see since there are differences then you will need to handle MS seperately due to their autonimously defined standards.



function getHTTPObject() { 
	var xmlhttp; 
	var http;


	try { 
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
	} catch (e) { 
		try { 
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
		} catch (E) { 
			xmlhttp = false; 
		} 
	} @else 
		xmlhttp = false; 
	
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
		try { 
			xmlhttp = new XMLHttpRequest(); 
		} catch (e) { 
			xmlhttp = false; 
		} 
	} 
	req xmlhttp; 
}


var http = getHTTPObject(); 

	http.open("GET", "http://example.org/test.php", true); 
	http.onreadystatechange = function() { 
		if (http.readyState == 4) { 
			// the response returned by test.php
			doSomethingWith(http.responseText); 
		} 
	} 
input.http.send(null);

test.php

<?php
echo 'response message';
?>

Table 1. Common XMLHttpRequest Object Methods
courtesy of Apple developers help.

Method	Description
abort()	Stops the current request
getAllResponseHeaders()	Returns complete set of headers (labels and values) as a string
getResponseHeader("headerLabel")	Returns the string value of a single header label
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])	Assigns destination URL, method, and other optional attributes of a pending request
send(content)	Transmits the request, optionally with postable string or DOM object data
setRequestHeader("label", "value")	Assigns a label/value pair to the header to be sent with a request

Table 2. Common XMLHttpRequest Object Properties

Property	Description
onreadystatechange	Event handler for an event that fires at every state change
readyState	Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete
responseText	String version of data returned from server process
responseXML	DOM-compatible document object of data returned from server process
status	Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK"
statusText	String message accompanying the status code

Somethings to note about security and functionality. I will post new things as I come across them.
The is not a cross domain operation unless the security settings are lowered. In Mozilla a UniversalBrowserRead object needs to wrap this. In IE the user is simply given a popup message.

Last Updated ( Friday, 03 June 2005 )

< Prev		Next >

[ Back ]