File: xmlhttpclass_article.txt

Title:
Empowering your site with HTTP Requests 
Increasing speed without loading the whole page
Byline:

by Martin Fasani

Deck:

The XML HTTP Request was implemented by Microsoft in internet explorer 5 to provide client-side 
protocol support for communication with HTTP servers. Later on the developers of the Mozilla project 
implemented a native version on Mozilla 1.0. Thankfully they modeled their implementation with the same 
methods of the MS's one so aside for the initial creation of the object the rest of the code will be the same for 
both.

Requirements:

Author: please enter your requirements below.

PHP:
4.x.x
O/S:
Linux - Windows
Other software:

Useful / Related Links
http://www.mozilla.org/xmlextras/
http://sarissa.sourceforge.net/doc/


Author bio:

Martin works for telecommunications in Spain delivering statistic reports and building 
extranets for clients. He is interested on social software and can be contacted through his 
website http://movil.be


Article body:

Actually there is a growing support for this HTTP request method so almost all the browsers 
support it or are moving in that direction. Internet Explorer 5 and above on Windows, 
Konqueror, Safari on Mac OS-X and Mozilla on all platforms handles HTTP requests, 
Opera 7.6preview 1 also now features the object.
Why do we need this technology ?
Besides using frames there is no way in standard html to reload a part of the page 
getting information from the server side. Using the XML HTTP Request method 
(HTTPREQ from now on) makes this fast and elegant. It's a object that runs inside the 
client browser allowing you to make requests without reloading the page.   While the object 
is called the XML HTTP Request object it is not limited to being used with XML so it can 
request or send any type of document. Like Apple comments, it's a Cool combo, since web 
developers wanted a clean way to maintain connection with the server so they can make 
transactions in the background bringing newly updated data in the page without using frames 
or java applets. Live examples about this request method in use are Google Suggest 
(http://www.google.com/webhp?complete=1&hl=en ) and another one is the now 
popular Gmail. Many people wondered why it had those impressive page-loading speeds or 
how it keeps state of changes without refreshing the page. The magic behind that is the 
HTTPREQ object.
When I first started writing I was wondering that about the fact that is client side object,so  
why I would write an article for php|arch ?. They are two the reasons that push me to keep 
on, the first one is that in standard environment you've normal security restrictions that 
avoid making this type of request outside the domain they are running, the second one is 
that it can be handy to write a php class to make this without needing to type client side code 
or at least, keeping it to the minimum expression. The catch to build interfaces using the 
HTTPREQ methods is that you need to combine both worlds the client scripting with the 
server side. Being the client the one that will take care of sending the request and after 
getting the response the one that will reflect the changes on the page.
What can be done ?

HTTPREQ is flexible, and that means that you can make different types of requests 
through it:

*	A Simple Request gets a file on the server dynamically 
*	Sending a SOAP/ REST request 
*	A Head Request returns the HTTP headers of a page

Head requests are very useful to check when a log file or any other file gets updated on your 
server getting the last-modified header.
Basically you can do any standard HTTP request using GET or POST the only 
difference is that the response is going to be returned to the same page and handled by this 
HTTPREQ object. Putting it all this together you can do lots of little things which when 
added up can make certain pages and forms work faster. This makes HTTPREQ an 
extremely versatile system for making user friendly administration control-panels. You can 
grab from the server the information that you need and change that specific part of page 
without refreshing the hole information. Like this you make an improvement over speed, 
sending less amount of information between server and client, the essential information you 
need and not the entire fields of the form/html.
Considering that being an object on the client browser is running on a "sandbox" it adopts 
the same domain security policies of typical JavaScript activity. That will be no problem since 
we will execute php on our domain to make the external requests. This opens the way to 
make the hierarchical forms items items as Country, Province and City get the content 
elements from the server, without needing to charge it all on one page or reloading the hole 
form just get the information for the next select box. New messages on a BBS forum or any 
other multi user system will get also the goodies of this silent requests. 

While I'm going to focus this article in doing things with the object and php it's worth to 
mention that I will try to keep the javascript to the minimum expression just to handle the 
object and bringing back the results. The easiest thing then is building a class to pass the 
properties and methods we are going to use so it creates all the <script> client side for us. 
So after this small introduction and the basic client side code we will be using our handy 
class to make the client code.
The complexity get's in the way when you need enhanced forms because you are making this 
request and getting response in the client side, thus there is a need to interpret the response 
or either writing the response raw inside an HTML container like a DIV tag. But most of the 
time you will need to use this to change state or fill select boxes, checkboxes or other form 
elements, so there is some additional client side code to play with.
While I'll explain this as simple as possible a basic understanding of JavaScript and 
html will be useful to follow me completely.

Increasing user experience, keeping form state and scrollbars in place

When I think about increasing the user experience the first that comes to my mind is 
making your webpage's and forms run with the most user friendly interface and fast as 
possible. And here is where HTTPREQ comes into place as a transparent object that sits on 
your page making requests without refreshing the page. In a fast though, this allows having 
long vertical lists updating content and checkboxes at real time, on a "create new account" to 
alert that your nickname is already existing before submitting all data, checking for new 
messages on a email client and adding them on the fly, showing alerts in administration 
panels. And the list goes up to your imagination creating web interfaces.
At the end, after mastering the HTTPREQ Method you will start thinking "what else 
can I bring back from the server?"




Creating the object on the client side
We will first see the client side of the code then we will make a simple class to generate this client 
side with php.  This is a practical view of the object with main methods and properties exposed in 
this article, if you need to do a specific task there is http://www.mozilla.org/xmlextras . 

To cope with all versions of explorer above 5.0 and all the rest of the browsers supporting 
the object we will write the object creator in a text file httpreq.js :
HTTPREQ = false;
/*@cc_on @*/ /*@if (@_jscript_version >= 5)
var ieversion = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
for(var i=0; !HTTPREQ && i<ieversion.length; i++) { 
	try{ HTTPREQ = new ActiveXObject(ieversion[i]); } catch(e) 
{ HTTPREQ = false; }   } @end @*/
if (!HTTPREQ && typeof XMLHttpRequest!='undefined') {
  HTTPREQ = new XMLHttpRequest(); // [mozilla/safari/opera]
}


After this, we can have our "hello world" up and running: 

<script src="httpreq.js"></script>
<script language="javascript">
HTTPREQ.open("GET", "http://localhost/hello.txt", true);   
HTTPREQ.onreadystatechange=function() { if (HTTPREQ.readyState==4) { alert (HTTPREQ.responseText)} };  
HTTPREQ.send(null);
</script>



After creating the object, the open() and send() methods are the ones you'll likely use most:
HTTPREQ.open("method", "URL"[, asyncFlag])
method specifies if you use GET / POST 
asyncFlag (boolean) 
true: async mode   This is the preferred method to use in a web page 
  false: sync mode   Client-Server connection is maintained (the UI will while lock until 
request is being made.) 

It 's recommended to use the ASYNC mode to prevent freezing the browser UI until 
you get the response. ASYNC is the preferred method to use in a webpage since it prevents 
locking and avoids high response times from the server. There is really no need of using 
SYNC mode in a website, or at least I didn't found the necessity of using it as it freezes until 
the result comes back to the browser making it work in a one time request basis.

HTTPREQ.send(variable)
Sends the HTTPREQ to the server and receives a response.

Optionally if you need to force a stream to be treated and parsed as text/xml, after calling 
open , you can also use the setRequestHeader :
setRequestHeader (  in string    header, in string    value ) 

Then onreadystatechange will specify the event handler that is called when the state of the 
request changes, which will let you grab the value of readyState property which represents 
the state of the request:
readyState== 0   Object not initiated
readyState== 1   Loading, object created, send method still not initiated
readyState== 2   Send method called, but nothing available yet  
readyState== 3   Some data received, response is not fully available
readyState== 4   Completed, at this point you can read the result of the request.

The basic logic to use the HTTPREQ :
1.The page is loaded
2. The browser initializes the HTTPREQ object
3. The onload function is called (or any other through user interaction)
4. A request is performed
5. When the request is completed (readyState ==4), a function is called
6. Based on response you can be add content to an html container or you can use to 
update/change any other element of the page.

To keep compatibility with the most broad range of browsers it's recommended to use 
the methods and properties of Mozilla which are listed at:
http://unstable.elemental.com/mozilla/build/latest/mozilla/extensions/dox/interfac
ensIXMLHttpRequest.html
Integrating with your server side php code 
Basically you create your php normally receiving the GET or POST parameters. Then 
you request the page with the XMLREQ Method described before. After doing the work in 
php you return response that you interpret again in the client side.
Making it more visual: 
Client -> XMLREQ -> Server php -> Response  -> Client again interpreting response and 
publishing results.

Now let's go back to business and let's create a handy class to generate javascript code used 
to make some simple requests. I hope that this start will be useful to extend the class to 
another uses, or just to copy and paste the generated code to customize and add additional 
features. The mission of this class will be to create client side code to make basic requests in 
4 lines of code:
<?
require("classhttpreq.php");
$req1 = new httpreq('req1'); 
$req1->httpdorequest('GET','helloworld.txt');
$req1->httpcreate();
?>
We will create some public methods  that build chunks of javascript to generate the request 
and when done will publish the response in <DIV> html containers:
new httpreq($obj) 
Httpreq is the constructor that will check browser type and create the corresponding  
XMLHttpRequest() object.

send(data   , [type: file / url / string by default], [cleanwhitespace: true by default])
Optional, to send the body of the message with the request. If is not set, will send an empty 
string to fire the request. If you are using GET to send the request you can skip this because 
the values can be sent as a querystring in the URL of the request.

httpdorequest($method,$url,$async=true)
Will open the request, if set, sending the body of the message. Creates a JS function called:
Function httpdo[$this->obj]()  in the example above would be httpdoreq1() function. 
Additionally makes the event handler function which is fired each time that readyState 
property changes and names the function httpresponse[$this->obj]. This is the function that 
will display "Loading&#8230;" and the response when the request is completed.
Up to here and playing a bit with the class to generate the Javascript code it doesn't look 
difficult. But you can scratch your head thinking how this request filling DIV tags can help 
me out to build something usefull ?   This is build as a demo to show how the basic 
functioning works keeping the client side to the minimum expression. Of course, it's meant 
that you can pick this up and build more methods to handle any other type of content, 
update forms filling select boxes and such, or validating fields on the fly. It's very difficult to 
give specific examples because it depends exactly on what you need to do with your requests 
and how you need content updated will change the way to build this requests. But first 
things first, as Stephen Covey would say, you need to define very well where to place the 
request and what it will do to improve the speed or add 


About security and drawbacks
By default browsers do not allow any kind of client script do cross domain requests 
for security reasons. If you put your page and the data source to the same web server all 
examples will should work both in IE and Mozilla/Firefox.
So in case you want to make request over different domains what you should do is 
build a proxy in php that do the work dropping the result locally.
The security level should be the same used in any other web based development. One 
issue is that actually HTTPREQ is not sending referer headers in all the browsers so it 's not 
possible to validate what domain is making the request (e.g. IE does,Mozilla does not). If 
you are working on a administration site that handles sensible information is very important 
to work using authentication and sessions. One interesting thing is that you can use session  
across the main page and the page being requested so it should be no problem to validate 
users. On the other side, making a public service that returns information to publish in 
another site, it should be essential to do data filtering to make sure that the request is valid. 
(http://phpsec.org is a good resource to read about security )
In the usability side it's always recommended to provide a degradated page with no 
HTTPREQ's just in case they are using a browser that does not support this object. If 
accessibility is important in your project take in account that the browser reading tools could 
not get along very well with this dynamic html remix. I hope this article proves that making 
requests with this object is not utterly difficult and that it's possibly to start using it right 
away as it's getting accepted by most of the browsers out there.   There is the object 
exposed, it's been there for a couple of years now, and it's a good time to extend this on and 
start integrating it in new applications.