The Tech Interpreter: How To: AJAX PHP Functions

Using AJAX, you can combine HTML, JavaScript, PHP and XML to enhance websites. By adding AJAX PHP functions to your pages, you can create a more dynamic, interactive experience for your users. With AJAX, your pages can call a PHP script running on the Web server. This script can query a data source such as a relational database or XML store for new data. The script can then return this new data to the user's browser, where the client side script in JavaScript can write the new data into the page HTML. Essentially, this means that you can fetch and present new data to your users while they interact with your page, and without having to refresh the page as a whole.

Build the Page

Create an HTML page to implement your AJAX PHP processing. Use the following outline:

<html>
<head>

</head>
<body>

Here we will display new data from the server.

 
</body>
</html>

We will place JavaScript functions in the page head area for fetching and receiving the new data from the server. Within the body, we have an element in which we will display the new data and a button to prompt the AJAX function execution.

Add JavaScript

In the script section in your page head, add the following code:

function getNewData() {
 
    //XML HTTP Request object
var xmlHTTPReq;
 
    //take care of different browsers
if (window.XMLHttpRequest) xmlHTTPReq = new XMLHttpRequest();
 
else xmlHTTPReq = new ActiveXObject("Microsoft.XMLHTTP");
 
}

Here we create an XML HTTP Request object. Next we provide the browser with instructions for when the new data is received, still inside the "getNewData" function:

xmlHTTPReq.onreadystatechange = function() {
 
//write the result to the page
if (xmlHTTPReq.readyState==4 && xmlHTTPReq.status==200)
document.getElementById("resultArea").innerHTML = xmlHTTPReq.responseText;
 
}

This code simply writes the new data to the section in the Web page with "resultArea" as its ID attribute. We have instructed the browser to handle the returned data, now we need to call the server side PHP script, at the end of the "getNewData" function:

//specify the script
xmlHTTPReq.open("GET", "get_data.php", true);
xmlHTTPReq.send();

Create a PHP Script

Next we need to create a PHP script to fetch the new data. Open a new file and save it "get_data.php" entering the following code:

<?php
$rand_num = rand(0, 100);
echo "Here is a random number between 0 and 100: ".$rand_num;
?>

The PHP script could do many different things here, such as fetching data from a database or from XML. In this case we simply return a random number for demonstration. Save your HTML and PHP files and upload them to your server. Visit the page in your browser and click the button to see the new data fetched from the server.

Options

You can also pass data to the PHP script if this suits your needs. For example, you can capture user data from an HTML form with input elements, passing the entered data for processing at the server side. A common use for this is committing the new user data to a database. To pass data to PHP, simply retrieve the user input data in the JavaScript function and append it to the PHP script URL as in this example:

//user entered data is stored in a var named "userData"
xmlHTTPReq.open("GET", "get_data.php?info=" + userData, true);

In the PHP script, you can retrieve the passed data as follows:

$passed_data = $_GET["info"];

Conclusion

You can incorporate AJAX PHP functions with various other technologies such as XML and jQuery. The emerging HTML5 features are also set to provide enhanced levels of communication between client and server using such utilities as Server Sent events, so the browsing experience is going to become more and more responsive.

See also:

The Tech Interpreter

Wednesday 29 August 2012

How To: AJAX PHP Functions

No comments:

Post a Comment