Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
13 views

AJAX and JavaScript_ Comprehensive Guide

Uploaded by

contraste visual
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

AJAX and JavaScript_ Comprehensive Guide

Uploaded by

contraste visual
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

AJAX and JavaScript: Comprehensive Guide

AJAX and JavaScript: Comprehensive Guide 1


What is AJAX? 2
Key Benefits: 2
How AJAX Works 2
Basic AJAX Implementation 3
1. XMLHttpRequest (XHR) 3

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

1
Basic Example: Fetch Data with XHR 3
2. Fetch API 3
Basic Example: Fetch Data with Fetch API 3
Sending Data with AJAX 4
Example: POST Request with Fetch 4
Detailed Examples 4
Example 1: Dynamically Update a Page with Fetched Data 5
Example 2: Form Submission with AJAX 5
Exercises 6
Exercise 1: Fetch and Display Data 6
Exercise 2: Create a Search Feature 7
Exercise 3: Validate AJAX Errors 7
Multiple-Choice Questions 7
Question 1: 7
Question 2: 7
Question 3: 7
Best Practices for Using AJAX 8

AJAX (Asynchronous JavaScript and XML) allows web pages to update content asynchronously
by communicating with a server without reloading the entire page. This guide explains AJAX
concepts, provides examples, exercises, and quiz questions to help you master AJAX with
JavaScript.

What is AJAX?

● AJAX: A set of web development techniques using JavaScript, XML/JSON, and APIs to
load or send data to/from servers asynchronously.
● Core Concept: Fetch data or send updates to a server without refreshing the page.

Key Benefits:

1. Faster Interactions: Load content dynamically without full reloads.


2. Improved UX: Create seamless and interactive applications.
3. Reduced Bandwidth: Load only the necessary data.

How AJAX Works

1. Request: A client sends an asynchronous request to the server.


2. Response: The server processes the request and sends a response.
3. Update: JavaScript dynamically updates the webpage with the server's response.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

2
Basic AJAX Implementation

AJAX can be implemented using:

1. XMLHttpRequest (XHR) (Traditional way)


2. Fetch API (Modern approach)

1. XMLHttpRequest (XHR)

Basic Example: Fetch Data with XHR


function loadData() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1",
true);
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.onerror = function () {
console.error("Request failed.");
};
xhr.send();
}
loadData();

Explanation:

● xhr.open(method, url, async): Initializes the request.


● xhr.onload: Called when the request succeeds.
● xhr.send(): Sends the request to the server.

2. Fetch API

The Fetch API provides a more modern and cleaner syntax.

Basic Example: Fetch Data with Fetch API


fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => {

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

3
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));

Explanation:

● fetch(url): Sends a request to the URL.


● response.json(): Parses the response body as JSON.
● .then(): Handles successful responses.
● .catch(): Handles errors.

Sending Data with AJAX

Example: POST Request with Fetch


const postData = {
title: "New Post",
body: "This is a new post.",
userId: 1
};
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(postData)
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));

Explanation:

● Headers: Specify content type as JSON.


● Body: Send data in JSON format.

Detailed Examples
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

4
Example 1: Dynamically Update a Page with Fetched Data
<!DOCTYPE html>
<html lang="en">
<head>
<title>AJAX Example</title>
</head>
<body>
<div id="content">Loading...</div>
<button id="loadBtn">Load Data</button>
<script>
document.getElementById("loadBtn").addEventListener("click", () =>
{
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((data) => {
document.getElementById("content").textContent = data.title;
})
.catch((error) => console.error("Error:", error));
});
</script>
</body>
</html>

Example 2: Form Submission with AJAX


<!DOCTYPE html>
<html lang="en">
<head>
<title>AJAX Form</title>
</head>
<body>
<form id="myForm">
<input type="text" id="name" placeholder="Name" required />
<input type="email" id="email" placeholder="Email" required />
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<script>

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

5
document.getElementById("myForm").addEventListener("submit", (e)
=> {
e.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name, email })
})
.then((response) => response.json())
.then((data) => {
document.getElementById("response").textContent = "Form
submitted successfully!";
})
.catch((error) => console.error("Error:", error));
});
</script>
</body>
</html>

Exercises

Exercise 1: Fetch and Display Data

Fetch user data from https://jsonplaceholder.typicode.com/users and display the


names in a list.

Solution:

fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => {
const userList = data.map((user) =>
`<li>${user.name}</li>`).join("");
document.body.innerHTML += `<ul>${userList}</ul>`;
})
.catch((error) => console.error("Error:", error));

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

6
Exercise 2: Create a Search Feature

Create a search box that fetches and displays a post's title based on its ID.

Exercise 3: Validate AJAX Errors

Write a function to handle server errors gracefully when the requested resource does not exist.

Solution:

fetch("https://jsonplaceholder.typicode.com/posts/9999")
.then((response) => {
if (!response.ok) throw new Error("Post not found");
return response.json();
})
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));

Multiple-Choice Questions

Question 1:

Which method initializes an XMLHttpRequest?

1. xhr.send()
2. xhr.open()
3. xhr.readyState
4. xhr.get()

Answer: 2. xhr.open()

Question 2:

What does the Fetch API return?

1. A Promise
2. A Callback
3. A JSON Object
4. An XMLHttpRequest Object

Answer: 1. A Promise

Question 3:

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

7
Which of the following is NOT true about AJAX?

1. It requires page refreshes for data updates.


2. It works asynchronously.
3. It can fetch data from APIs.
4. It is based on HTTP requests.

Answer: 1. It requires page refreshes for data updates.

Best Practices for Using AJAX

1. Handle Errors Gracefully: Always use .catch() for error handling.


2. Optimize Network Calls: Minimize requests to improve performance.
3. Use Proper Headers: Specify Content-Type for POST requests.
4. Secure Data: Use HTTPS and validate server responses.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

You might also like