Using Ajax with Javascript and PHP

• Download AjaxPhp.zip-8.98KB

Introduction

In this article we'll discuss the basic principles of remote scripting using Ajax, (asynchronous JavaScript and XML) to allow web pages to be updated without the user having to wait for a page refresh. 

How does it work?

Wait server to complete the request.

Display the request response .

Ajax script makes a request of a server by using XMLHTTPRequest object. XMLHttpRequest (XHR) is a DOM API that can be used by JavaScript and other web browser scripting languages to transfer XML and other text data between a web server and a browser.

There are some relatively simple steps to use Ajax in your application.

1. Create an XMLHTTPRequest object .This process differs slightly depending on what you are using: Internet Explorer (5+) with ActiveX, or a standards-compliant browser like Firefox.

• In IE, the request looks like:request = new ActiveXObject('Msxml2.XMLHTTP');
• In a standards-compliant browser we can instantiate the object directly:request = new XMLHttpRequest();

The following javascript function create your XMLHTTPRequest object for all supported browsers:
function createXMLHttpRequest() { var request = false; try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch (err2) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); } catch (err3) { try { request = new XMLHttpRequest(); } catch (err1) { request = false; } } } return request; }
2. We need to write an event handler which will be called via some event on your webpage, and will handle sending our request for data to our server.
We can make our request of the server by using a GET method to an appropriate server-side script.

var xhr= createXMLHttpRequest(); if(xhr != false) { xhr.open("GET", requestFile,true); xhr.onreadystatechange=function() { if (xhr.readyState == 4) { if (xhr.status != 404) { document.getElementById(divID).innerHTML= xhr.responseText; } else { document.getElementById(divID).innerHTML = "Error 404!"; } } } xhr.send(null); } 
Note that the function listens to the onreadystatechange property of the XMLHTTPRequest object and, each time this parameter changes, calls a further anonymous function.

These functions establish when the server has completed our request, and do something useful with the data it has returned. In this case, we have received our information as simple html text via the responseText property.  

License

This article, along with any associated source code and files, is licensed under The Intelliproject Open License (IPOL)

About the author