Best Ajax Tutorial Simple and Easy to understand

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

  1. You do NOT need to use form tags.
  2. Ajax does not reload a page.
  3. You use ID's to get values from from inputs.
  4. Use a OnClick event in a button to get the process started.
  5. Create a function to make the action happen.
  6. Use a different page to process ajax requests.
  7. Ajax Status Codes.
  8. Ready State Codes.
  9. Onreadystatechange info.
  use a different page to process ajax requests 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'];
}; ?>


Sign Up To Comment