How to Do AJAX With PHP and HTML
AJAX functions allow Web pages to update HTML content without the user having to refresh the page or browse to a different page. The HTML markup for a page can call a JavaScript function, which in turn can call a PHP script. The PHP script can fetch additional data, sometimes from a database and formatted in XML markup, returning this to the JavaScript function. The JavaScript code can then write this new data into the HTML, making new information appear as the user interacts with the Web page.
Other People Are Reading
Instructions
-
-
1
Create a new HTML document. Type the following code into a blank file in your text editor and give the file an ".html" extension when you save it:
<html>
<head>
<script type="text/javascript">
function processData() {
//fetch new data
}
</script>
</head>
<body>
<div id="update">Some content</div>
<input type="button" value="press me" onclick="processData()"/>
</body>
</html>When the user clicks the button displayed on this page, the browser will call the JavaScript function in the head section of the page.
-
2
Create an XMLHttpRequest object. Add the following code inside the JavaScript function:
var xmlHTTP;
if (window.XMLHttpRequest) { xmlHTTP=new XMLHttpRequest(); }
else { xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP"); }This allows the Web page to handle different browsers.
-
-
3
Send your request for data to a PHP script. Add the following code inside the JavaScript function, leaving space for code before it:
xmlHTTP.open("GET", "get_data.php", true);
xmlHTTP.send();This instructs the browser to request additional information from the PHP script specified.
-
4
Create your PHP script. Open a new file in a text editor and save it as "get_data.php" to match the parameter to the send method you used in your JavaScript code. Type in the following sample code:
<?php
echo "New data";
?>This is a simple example for demonstration, but you can add any PHP processing you need, including database queries. You can also build your response text into XML markup if this suits your site.
-
5
Handle the response from your PHP script. In your JavaScript function, before the line in which you open the XMLHttpRequest object, add the following code:
xmlHTTP.onreadystatechange=function() {
if (xmlHTTP.readyState==4 && xmlHTTP.status==200) {
//handle the response data
}}When JavaScript receives a response from the PHP script, this code will execute. The code checks that the response is valid. Inside this conditional statement, you can add code to write the new data into your page HTML.
-
6
Update the content of your page. In the JavaScript response conditional statement, add the following code:
document.getElementById("update").innerHTML = xmlHTTP.responseText;
This code identifies the div element in the page and then writes the response text from the PHP code into it.
-
7
Save your files and upload them to your server. Browse to the page and click the button to check that the function works. You should see the content of the div element change.
-
1
Tips & Warnings
You can pass data from the JavaScript function to the PHP script as well as receive data.
AJAX scripts sometimes encounter problems with browser caching. To work around this, you can add a random number variable to the JavaScript code at the end of the PHP script URL string.
References
Resources
- Photo Credit Goodshoot/Goodshoot/Getty Images
