Ajax Post to PHP File XMLHttpRequest Object Return Data Tutorial

Learn to program the javascript XMLHttpRequest Object to easily send post method Ajax HTTP requests to your PHP parsing scripts, and get return data from submitted forms or any type of interaction that takes place on your website. We establish the request object and simply access the events, methods, and properties we need for two way Javascript and PHP communication. my_parse_file.php <?php echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file'; ?> example.html <html> <head> <script> function ajax_post(){ // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var url = "my_parse_file.php"; var fn = document.getElementById("first_name").value; var ln = document.getElementById("last_name").value; var vars = "firstname="+fn+"&lastname="+ln; hr.open("POST", url, true); // Set content type header information for sending url encoded variables in the request hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var return_data = hr.responseText; document.getElementById("status").innerHTML = return_data; } } // Send the data to PHP now... and wait for response to update the status div hr.send(vars); // Actually execute the request document.getElementById("status").innerHTML = "processing..."; } </script> </head> <body> <h2>Ajax Post to PHP and Get Return Data</h2> First Name: <input id="first_name" name="first_name" type="text"> <br><br> Last Name: <input id="last_name" name="last_name" type="text"> <br><br> <input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();"> <br><br> <div id="status"></div> </body> </html>

JavaScript Videos

Ajax Programming

Ajax Post to PHP File XMLHttpRequest Object Return Data TutorialAjax Framework Tutorial Custom Module ProgrammingFile Upload Progress Bar Meter Tutorial Ajax PHPAjax Pagination Tutorial PHP MySQL Database Results PagedServer Sent Events Simple Chat Application Example
Top of Page
Home Page
Table of Contents
Donate / Support
Web Hosting
Terms of Use

© 2015 All Rights Reserved