5/16/24, 1:18 PM AJAX Introduction
Tutorials Exercises Services Sign Up Log in
ML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
AJAX Introduction
❮ Previous Next ❯
AJAX is a developer's 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
Try it Yourself Examples in Every Chapter
In every chapter, you can edit the examples online, and click on a button to view the result.
AJAX Example
Let AJAX change this text
Change Content
Try it Yourself »
https://www.w3schools.com/xml/ajax_intro.asp 1/8
5/16/24, 1:18 PM AJAX Introduction
AJAXTutorials
Example Explained
Exercises Services Sign Up Log in
ML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
HTML Page
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
The HTML page contains a <div> section and a <button>.
The <div> section is used to display information from a server.
The <button> calls a function (if it is clicked).
The function requests data from a web server and displays it:
Function loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
The "ajax_info.txt" file used in the example above, is a simple text file and looks like this:
https://www.w3schools.com/xml/ajax_intro.asp 2/8
5/16/24, 1:18 PM AJAX Introduction
<h1>AJAX</h1>
Tutorials Exercises Services Sign Up Log in
<p>AJAXJAVASCRIPT
ML CSS is not a programming
SQL language.</p>
PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>
ADVERTISEMENT
What is AJAX?
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)
AJAX is a misleading name. AJAX applications might use XML to transport data, but it is equally
common to transport data as plain text or JSON text.
AJAX allows web pages to be updated asynchronously by exchanging data with a web server
behind the scenes. This means that it is possible to update parts of a web page, without reloading
the whole page.
https://www.w3schools.com/xml/ajax_intro.asp 3/8
5/16/24, 1:18 PM AJAX Introduction
HowTutorials
AJAX Works
Exercises Services Sign Up Log in
ML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
1. An event occurs in a web page (the page is loaded, a button is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript
❮ Previous Next ❯
W3schools Pathfinder
Track your progress - it's free! Sign Up Log in
ADVERTISEMENT
https://www.w3schools.com/xml/ajax_intro.asp 4/8
5/16/24, 1:18 PM AJAX Introduction
Tutorials Exercises Services Sign Up Log in
ML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
COLOR PICKER
ADVERTISEMENT
https://www.w3schools.com/xml/ajax_intro.asp 5/8
5/16/24, 1:18 PM AJAX Introduction
Tutorials Exercises Services Sign Up Log in
ML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
ADVERTISEMENT
ADVERTISEMENT
https://www.w3schools.com/xml/ajax_intro.asp 6/8
5/16/24, 1:18 PM AJAX Introduction
Tutorials Exercises Services Sign Up Log in
ML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
SPACES UPGRADE AD-FREE NEWSLETTER
GET CERTIFIED CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM ABOUT CLASSROOM
W3Schools is optimized for learning and training. Examples might be simplified to improve reading
and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie
and privacy policy.
https://www.w3schools.com/xml/ajax_intro.asp 7/8
5/16/24, 1:18 PM AJAX Introduction
Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
Tutorials Exercises Services Sign Up Log in
ML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C#
https://www.w3schools.com/xml/ajax_intro.asp 8/8
