Scribd
Upload
24 views

AJAX Introduction

The document discusses what AJAX is and how it works. AJAX allows web pages to asynchronously update parts of a page without reloading the whole page by exchanging data with a web server in the background using JavaScript. It works by creating an XMLHttpRequest object to send and receive data from a server after a page loads or an event occurs.

Uploaded by

fohexe1517
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

AJAX Introduction

The document discusses what AJAX is and how it works. AJAX allows web pages to asynchronously update parts of a page without reloading the whole page by exchanging data with a web server in the background using JavaScript. It works by creating an XMLHttpRequest object to send and receive data from a server after a page loads or an event occurs.

Uploaded by

fohexe1517
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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#

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

You might also like