How to Use the Post Method in AJAX
When developers include AJAX functions within Web pages, this allows the user to view new items of data from the server without having to refresh the page. An AJAX function uses JavaScript to call a server side script, then to process the result of that script call when the server script returns it. Optionally, the JavaScript code can send data to the server script, which can be useful if the script is querying a data source. AJAX can use either the GET or POST method to send data to the server.
Other People Are Reading
Instructions
-
-
1
Create your HTML markup to call the AJAX function. The following sample code demonstrates:
<input type="button" value="get more" onclick="getData('content')" />
<div id="content">New data here</div>This includes an element to write the new data into as well as a button to call the AJAX processing. When the user clicks the button, the JavaScript function specified will execute. The code can optionally capture information from user input.
-
2
Implement your JavaScript function to initiate AJAX processing. The following sample function outline demonstrates:
function getData(elemID) {
var xmlHTTPObject;
if (window.XMLHttpRequest) { xmlHTTPObject = new XMLHttpRequest(); }
else { xmlHTTPObject = new ActiveXObject("Microsoft.XMLHTTP"); }
//setup response
xmlHTTPObject.open("POST", "retrieve_data.php?var=hello", true);
xmlHTTPObject.send();
}This code demonstrates calling the server side script, in this case a PHP script, passing it an arbitrary variable for demonstration. If your code captures data from the user, you can include it instead of the "var=hello" section. The "setup response" line is where your code will specify what should happen when the server responds.
-
-
3
Create your server side script. The function uses a PHP script named "retrieve_data.php" but you can use a file of your own choice and alter the JavaScript to reflect it if you prefer. The following sample PHP code works with the sample JavaScript:
<?php
$passed_var=$_POST['var'];
echo "<p>".$passed."</p>";
?>This example simply writes the passed variable into HTML markup for demonstration. Your own code could query a data source such as a database in the server side script and can optionally format the response text in XML markup.
-
4
Instruct JavaScript to handle the response from the server. Add the following code inside your "get_data" JavaScript function, before the line opening the XMLHttpRequest object:
xmlHTTPObject.onreadystatechange=function() {
if (xmlHTTPObject.readyState==4 && xmlHTTPObject.status==200) {
document.getElementById(elemID).innerHTML = xmlHTTPObject.responseText;
}}This code uses the parameter your HTML element passed when calling the function to identify the element to write the response text into. You can optionally carry out further JavaScript processing on the response.
-
5
Save your files and upload them to your Web server. Browse to the page and click the button to test it. You should see the new content written to the "div" element in the page. Depending on your connection, there may be a short delay. You can add additional processing steps to any part of the code, including the HTML, JavaScript and PHP.
-
1
Tips & Warnings
AJAX can use ASP scripts as well as PHP.
There are lots of places in which AJAX code can go wrong, so make sure you test your pages properly.
References
Resources
- Photo Credit Jupiterimages/Pixland/Getty Images
