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'];
}; ?>