Scribd
Upload
19 views2 pages

Key Concepts:: Ajax (Asynchronous Javascript and XML)

Uploaded by

iliass leader
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views2 pages

Key Concepts:: Ajax (Asynchronous Javascript and XML)

Uploaded by

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

AJAX (Asynchronous JavaScript and XML) is a web development technique used to

create dynamic, interactive user interfaces. It allows a webpage to communicate with a server
and retrieve data without needing to reload the entire page. This makes web applications more
responsive and faster for users, as they only update the specific parts of a webpage that need
changing.

Here's a basic breakdown of how AJAX works in JavaScript:

Key Concepts:

 Asynchronous: This means that the JavaScript code doesn't block the user interface
while waiting for the response from the server. The user can still interact with the page
while the request is in progress.
 JavaScript: AJAX is powered by JavaScript, which sends the request to the server
and processes the response.
 XML (or JSON): Originally, AJAX was associated with XML as a format for
sending and receiving data. Nowadays, JSON (JavaScript Object Notation) is
commonly used because it's easier to work with in JavaScript.

Steps in AJAX Request:

1. Create an XMLHttpRequest object: This is the object that allows communication


between the client and the server.
2. Open the request: The request is prepared, specifying the HTTP method (GET,
POST, etc.) and the URL to which the request is being sent.
3. Send the request: The request is sent to the server.
4. Handle the response: Once the server responds, a callback function is executed to
handle the data returned.

Example of AJAX Using JavaScript:


javascript
Copier le code
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Set up the request (method, URL)


xhr.open("GET", "https://api.example.com/data", true);

// Set up a callback function to handle the response


xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// Parse and process the response (if it's in JSON format)
var data = JSON.parse(xhr.responseText);
console.log(data); // Display the data in the console
} else {
console.error('Error:', xhr.statusText);
}
};

// Send the request to the server


xhr.send();
Key Methods of XMLHttpRequest:

 open(method, url, async): Initializes a request. method is typically "GET" or


"POST", url is the URL for the request, and async indicates whether the request is
asynchronous (true) or synchronous (false).
 send(data): Sends the request. If the request method is POST, you can include data
(such as form data) here.
 onload: A callback function that is called when the request completes successfully.
 onerror: A callback function that is triggered if an error occurs during the request.

Example of Sending Data (POST Request):


javascript
Copier le code
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/submit", true);

// Set request header for sending data as JSON


xhr.setRequestHeader("Content-Type", "application/json");

// Set up a callback for when the response is received


xhr.onload = function() {
if (xhr.status === 200) {
console.log('Data saved successfully:', xhr.responseText);
} else {
console.error('Error:', xhr.statusText);
}
};

// Send the data in JSON format


var data = JSON.stringify({ name: "John", age: 30 });
xhr.send(data);

You might also like