Locked lesson.
About this lesson
What is AJAX and what is it used for?
Exercise files
Download this lesson’s related exercise files.
What is AJAX.docx60 KB What is AJAX - Solution.docx
59.1 KB
Quick reference
What is AJAX
AJAX stands for Asynchronous JavaScript and XML.
When to use
Use it when filling out forms to talk with a web server behind the scenes in the background.
Instructions
AJAX allows us to fill out a form, and get a response from our web server without reloading the web page.
Here's a simple AJAX example. Be sure to add a file called text.txt with some text in it, into your development environment directory tree.
Please note: AJAX requires a web server to run. If you want to try this AJAX code on your own, it won't work locally, but it will work on a real website with an active server.
<div id="ajax">
<h2>What can AJAX do right here?</h2>
<button type="button" onclick="someAjax()">Change My Content</button>
</div>
<script>
function someAjax() {
var xhttp = new XMLHttpRequest();
//we still don't really know what this stuff does..
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ajax").innerHTML = this.responseText;
}
};
xhttp.open("GET", "text.txt", true);
xhttp.send();
}
</script>
Hints & tips
- AJAX lets us fill out a form and get a response from the server without reloading the web page
- It speeds up form submission
Lesson notes are only available for subscribers.