Scribd
Upload
55 views

AJAX Introduction: W3schools

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes without reloading the whole page. It uses a combination of XMLHttpRequest objects, JavaScript, HTML and DOM to request and retrieve data from a web server and update only part of the page. The AJAX technique allows websites to load new information without interfering with the current state of the page.

Uploaded by

Syed Hasnain Raza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views

AJAX Introduction: W3schools

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes without reloading the whole page. It uses a combination of XMLHttpRequest objects, JavaScript, HTML and DOM to request and retrieve data from a web server and update only part of the page. The AJAX technique allows websites to load new information without interfering with the current state of the page.

Uploaded by

Syed Hasnain Raza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

11/6/2019 AJAX Introduction

  HTML CSS MORE  


w3schools.com

AJAX Introduction
❮ Previous Next ❯

AJAX is a developer's dream, because you can:

Read data from a web server - after the page has loaded
Update a web page without reloading the page
Send data to a web server - in the background

AJAX Example

AJAX
AJAX is not a programming language.

AJAX is a technique for accessing web servers from a web page.

AJAX stands for Asynchronous JavaScript And XML.

Try it Yourself »

https://www.w3schools.com/js/js_ajax_intro.asp 1/8
11/6/2019 AJAX Introduction

AJAX
 Example
HTML CSS Explained
MORE  

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();
}

https://www.w3schools.com/js/js_ajax_intro.asp 2/8
11/6/2019 AJAX Introduction

  HTML CSS MORE  

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.

How AJAX Works

https://www.w3schools.com/js/js_ajax_intro.asp 3/8
11/6/2019 AJAX Introduction

  HTML CSS MORE  

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 ❯

https://www.w3schools.com/js/js_ajax_intro.asp 4/8
11/6/2019 AJAX Introduction

  HTML CSS MORE  

oXygen
DITA
Editor

Visually Edit
DITA content
Included DITA
Open Toolkit

oxygenxml.com

COLOR PICKER

HOW TO

Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation

https://www.w3schools.com/js/js_ajax_intro.asp 5/8
11/6/2019 AJAX Introduction

Modal Boxes
  HTML CSS MORE  
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

SHARE

 

CERTIFICATES

HTML
CSS
JavaScript
SQL
Python
PHP
jQuery
Bootstrap
XML

Read More »

https://www.w3schools.com/js/js_ajax_intro.asp 6/8
11/6/2019 AJAX Introduction

  HTML CSS MORE  

De Thinkwise proefomgeving
Ontdek alle functionaliteiten en
kansen van het Thinkwise platform
met onze gratis trial.

REPORT ERROR

PRINT PAGE

FORUM

ABOUT

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
jQuery Tutorial
Java Tutorial
C++ Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
https://www.w3schools.com/js/js_ajax_intro.asp 7/8
11/6/2019 AJAX Introduction

HTML Colors
  HTML CSS MORE jQuery Reference 
Java Reference
Angular Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
XML Examples

Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

Get Certified »

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading
and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our
terms of use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

https://www.w3schools.com/js/js_ajax_intro.asp 8/8

You might also like