Best Ajax Tutorial Simple and Easy to understand

This is the best Ajax tutorial. Learn how to submit a form without reloading a page. Ajax can do that for you. Here is a very simple tutorial with the code that will help you get started using Ajax in your applications.

The XMLHttpRequest Object The XMLHttpRequest object can be used to request data from a web server. The XMLHttpRequest object is a developers dream, because you can: Update a web page without reloading the page Request data from a server - after the page has loaded Receive data from a server - after the page has loaded Send data to a server - in the background

Things to Know About Ajax

You do NOT need to use form tags.
Ajax does not reload a page.
You use ID's to get values from from inputs.
Use a OnClick event in a button to get the process started.
Create a function to make the action happen.
Use a different page to process ajax requests.
Ajax Status Codes.
Ready State Codes.
Onreadystatechange info.

use a different page to process ajax requests Scripts located here for this project.

Ajax Code to Get You Started

Here are the 2 different codes that I use in the video to help you get started. Create a file and call it index.php.

<html>
<head>
<title>Ajax Example</title>
</head>
<body>
 <input type="email" id="email" size="50" placeholder="Email Address">
 <button type="button" id="subsub" onclick="ajax_post();">Subscribe</button>
<br/>
<div id="status"></div>
<script>
function ajax_post(){
 var hr = new XMLHttpRequest();
 var url = "processor.php";
 var emm = document.getElementById("email").value;
 var vars = "email="+emm;
 hr.open("POST", url, true);
 hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 hr.onreadystatechange = function() {
 if(hr.readyState == 4 && hr.status == 200) {
 var return_data = hr.responseText;
 document.getElementById("status").innerHTML = return_data;
 }
 }
 hr.send(vars); // After Check Steps are done execute the request
 document.getElementById("status").innerHTML = "processing...";
}
</script>
</body>
</html>

Create another file and call it processor.php. Here is the code for that file.

<?php
if(isset($_POST['email'])){
echo 'the email is'. $_POST['email'];
}; ?>

Message from Maximus

Things to Know About Ajax

Ajax Code to Get You Started