Latest in our website
News:
- Some activity after so long
- Pharchiver
- Heretic Mansion
Scripts:
- Simplicity oF Upload 1.3.2
Tips:
- Random Color Generator
- Converting Hijri Date
- Dynamically Fetching Data without Refreshing (XMLHttpRequest)
- Running a Multilingual website
- How can I limit the number of rows returned by MySQL? (Pagination)

Login
login to access your private areas.

Remember me:

Forget password? Use the reminder.
Or
Not registered? Sign up now!

April
Sun Mon Tue Wed Thu Fri Sat
  1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30  

Published in Tuesday 24th 2005f May, 2005 at 03:28 PM By Saleh Jamal
 
it became boring to input data and then press that damn "Submit" button over and over everytime we want to add or look for something!
but we are not going to stay there accepting this anymore, are we? :)

NOTE: this articles assumes that you have basic knowladge of javascript and PHP.

in this tutorial, we will be looking at the revolutionary (Ajax) XMLHttpRequest object which allows us to send and receive data dynamically without the need of refreshing the page.
This technology was first introduced by Microsoft in Internet Explorer 5 as an ActiveX branch then FireFox 1.0, Netscape 7 and Safari 1.2 followed.

To instantiate an XMLHttpRequest object you have to write this for IE users:

Code:
var req = new ActiveXObject("Microsoft.XMLHTTP");


For other compatible browsers:

Code:
var req = new XMLHttpRequest;


the XMLHttpRequest object has the following methods:
abort() for canceling the request.
getAllResponseHeaders() returns all the HTTP headers as a string.
getResposeHeader]( label ) returns the value of the header labeled as label.
open(method, url [,asyncFlag [,username [,password]]]) assigns destination URL and other options.
send( data ) transmits the request and optionally with string to post or DOM object data.
setRequestData( label, value) assign value to label as a header and send it with the request.

We will be using open() and send() method all the time mainly!
the open() method takes 5 arguments 3 of them are optional.
the first 2 arguments are the method (GET or POST) and the URL to which you are going to send the request.
The send() method will, obviously, send the request.

Let's look at this example to clear things up.
We have a phonebook stored in a MySQL table and we want to make a search page where the user enters a number and the script should check if the number exists in the database or not.
If the number was found, will display the name of our contact otherwise we will show "Not found!" message.
all that without even reloading the page after submition!

So first let's take a look at the table structure (let's name numbers):

Code:
CREATE TABLE `numbers` ( 
  `cells` int(15) unsigned NOT NULL default '0', 
  `name` tinytext NOT NULL, 
  PRIMARY KEY  (`cells`) 
);


We have created a table with 2 fields: cells and name
"cells" as a primary key.
Now let's take a look at our magic function which will fetch the data without refreshing.
JavaScript:

Code:
var req; 
var oldData; 
var doesNotSupport = true; 
 
function getNumber(url, number) 

    if (number == "" || oldData == number || !doesNotSupport) 
        return; 
 
    oldData = number; 
    numbers.result.value = "Searching ..."; 
 
    if (window.XMLHttpRequest) { 
        req = new XMLHttpRequest; 
    } else if (window.ActiveXObject) { 
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
     
    if (req) { 
       req.onreadystatechange = processReqChange; 
       req.open("GET", url + '?number=' + number, true); 
       req.send(null); 
    } else { 
       alert("Your browser does not support XMLHttpRequest technology!"); 
       doesNotSupport = false; 
    } 
}


We have defined a function which take 2 arguments: url and number
the "url" argument will take the URL to which we will send the request and the "number" argument is the number we are looking for.

we also want to prevent the script from sending a new request if the number was the same as before! so we defined the variable oldData which will save the last number entered and compare it to the new number entered to the form if it was the same, it will quit and will not send a new request:

Code:
    if (number == "" || oldData == number || !doesNotSupport) 
        return;


we also don't want to send a request if the number was empty!
but what about this doesNotSupport variable? the first time the script runs it will hold "true" and then try to send the request! if the XMLHttpRequest object was not found or couldn't be instantiated, we will alert the user and set the value to "false" in:

Code:
    } else { 
       alert("Your browser does not support XMLHttpRequest technology!"); 
       doesNotSupport = false; 
    }


so if the user tried to enter a new number to force the request to be resent it will refuse to bother trying to send the request :p

if the user could pass the condition above, then we assign the current number to be queried to the variable oldData and display the word "Search..." to make it look dynamic:

Code:
    oldData = number; 
    numbers.result.value = "Searching ..."; 



The onreadystatechange property is an event handler which fires a function when the the state changes.

Code:
req.onreadystatechange = processReqChange;

We declared that when the state changes, processReqChange() function should be invoked. We will see the definition of this function later.

It's worth saying that when a request is sent these properties are populated:
readyState holds the object status (as integer):
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

responseText data returned from the request as string.
responseXML DOM-compatible document object of data returned from server process.
status numeric code returned by the server such as "404" (not found) or "200" (OK)
statusText is the text came with the status.

now let's take a look at the processReqChange() function definition:

Code:
function processReqChange() { 
    // only if req shows "loaded" 
    if (req.readyState == 4) { 
        // only if "OK" 
        if (req.status == 200) { 
            numbers.result.value = req.responseText; 
        } else { 
            alert("There was a problem retrieving the XML data:\n" + req.statusText); 
        } 
    } 
}


This function will check if the readyState is 4 (completed) and status is "200" (OK) to display the result in the field "result" which is in the form "numbers"

Here is the form we are using:

Code:
<form name="numbers"> 
<label for="result">Name:</label> 
<input type="text" id="result" name="result" size="20" style="background-color: transparent;
border: 1px dashed gray; font-family: tahoma; text-align: center;
color: red; letter-spacing: 2.5px;" disabled="disabled" /><br /> 

<label for="mobile">Cell number:</label> 
<input type="text" name="mobile" onblur="getNumber('getnumber.php', this.value);" id="mobile" /> 
</form>


Note that I made the "result" field disabled and have put some style on it.. you can of course change that.
but note this:
<input type="text" name="mobile" onblur="getNumber('getnumber.php', this.value);"/>

This field will invoke the function getNumber() when ever it loses fox and it passes the URL (getnumber.php) and its value (this.value)

Here is how our getnumber.php looks:

PHP Code:
<?PHP 
$number 
= (int) $_GET['number']; //takes the number from URL 
 
if (empty($number)) 
   die; 
 
$server 'SERVER'
$username 'USERNAME TO DATABASE'
$password 'PASSWORD TO DATABASE'
$database 'DATABASE NAME'
 
 
$link mysql_connect($server$username$password); 
mysql_select_db($database); 
 
$fetch mysql_query("SELECT name FROM numbers WHERE cells='$number'")or 
die(
mysql_error()); 
 
$num mysql_num_rows($fetch); 
 
if (empty(
$num)) 
   
$send 'Not found'
else 
   
$send mysql_result($fetch'name'); 
 
 
header("Content-type: text/plain"); 
echo 
$send
?>


This simple script will take the number from the URL (i.e. getnumber.php?number=5454014) and then checks it in the database.
if the name was not found, we will print "Not found" otherwise we print the name.

Our javascript function will take what has been printed and put it in responseText property.

That's all! :yes:
you can view the script live at: articles/XMLHTTPRequest.htm

NOTE: in order to see this script in action, you have to enable javascript and your browser should be one of the compatible browsers with XMLHttpRequest technology.

try putting these numbers:
0555544070 should display NeverMind
0123456789 should display from1To9
any other number will display Not found

View the source the page to see how the page is put together (HTML). ;)

Mirror of Article: http://www.phpsimplicity.com/articles/xmlhttprequest.htm
 

Saleh Jamal

There are 2 Visitors browsing this page.