Skip to content

Commit 4b47581

Browse files
suryakarmakarsuryakarmakar
authored
Merge pull request #32 from SuryaKarmakar/IBM-JavaScript-Essentials
Ibm java script essentials
2 parents 3d44b53 + 14525a2 commit 4b47581

File tree

4 files changed

+183
-32
lines changed

4 files changed

+183
-32
lines changed

‎Courses/IBM-JavaScript-Essentials/13-XMLHttpRequest/index.html

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
<!DOCTYPE html>
21
<html lang="en">
32
<head>
43
<meta charset="UTF-8" />
5-
<title>XMLHttpRequest</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>AJAX Example using XMLHttpRequest</title>
66
</head>
77
<body>
8-
<h1>XMLHttpRequest</h1>
9-
<script src="./xml_http_request.js"></script>
8+
<h1>AJAX Example using XMLHttpRequest</h1>
9+
<button id="fetchButton">Fetch Data</button>
10+
<div id="dataContainer"></div>
11+
12+
<script src="script.js"></script>
1013
</body>
1114
</html>

‎Courses/IBM-JavaScript-Essentials/13-XMLHttpRequest/script.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
document.getElementById("fetchButton").addEventListener("click", function () {
2+
// Create a new XMLHttpRequest object
3+
const xhr = new XMLHttpRequest();
4+
5+
// Initialize the request
6+
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
7+
8+
// Set up a function to handle the response
9+
xhr.onload = function () {
10+
if (xhr.status >= 200 && xhr.status < 300) {
11+
// Success! Handle the response here
12+
const data = JSON.parse(xhr.responseText);
13+
displayData(data);
14+
} else {
15+
// Handle errors here
16+
console.error("Request failed with status:", xhr.status);
17+
}
18+
};
19+
20+
// Handle network errors
21+
xhr.onerror = function () {
22+
console.error("Request failed");
23+
};
24+
25+
// Send the request
26+
xhr.send();
27+
});
28+
29+
function displayData(data) {
30+
const container = document.getElementById("dataContainer");
31+
container.innerHTML = ""; // Clear previous data
32+
33+
data.forEach((post) => {
34+
const postElement = document.createElement("div");
35+
postElement.innerHTML = `<h3>${post.title}</h3><p>${post.body}</p>`;
36+
container.appendChild(postElement);
37+
});
38+
}

‎Courses/IBM-JavaScript-Essentials/13-XMLHttpRequest/xml_http_request.js

-28
This file was deleted.

‎Courses/IBM-JavaScript-Essentials/README.md

+138
Original file line numberDiff line numberDiff line change
@@ -1906,3 +1906,141 @@ const person = {
19061906
},
19071907
};
19081908
```
1909+
1910+
## Async and Sync:
1911+
1912+
- Synchronous programming:
1913+
1914+
Synchronous programming in JavaScript refers to the execution of code in a sequential and blocking manner. In a synchronous program, each operation or task is executed one after the other, and the program waits for each task to complete before moving on to the next one. This means that if one operation takes a long time to execute, it can block the entire program's execution, making it unresponsive.
1915+
1916+
```js
1917+
function one() {
1918+
console.log("hello one");
1919+
}
1920+
function two() {
1921+
console.log("hello two");
1922+
}
1923+
function three() {
1924+
console.log("hello three");
1925+
}
1926+
1927+
console.log("start of the program");
1928+
one();
1929+
two();
1930+
three();
1931+
console.log("end of the program");
1932+
```
1933+
1934+
```
1935+
Output:
1936+
1937+
start of the program
1938+
hello one
1939+
hello two
1940+
hello three
1941+
end of the program
1942+
```
1943+
1944+
- Asynchronous programming:
1945+
1946+
Asynchronous programming in JavaScript is a programming paradigm that allows you to execute code without blocking the main execution thread.
1947+
It enables tasks to run concurrently, making it particularly useful for handling operations that may take some time to complete, such as network requests, file I/O, or user interactions.
1948+
1949+
1. Callbacks are functions that are passed as arguments to other functions and are executed at a later time, typically when an asynchronous operation completes. They allow you to specify what should happen after the asynchronous task is done.
1950+
1951+
2. Promises are objects that represent the eventual completion or failure of an asynchronous operation. They provide a cleaner and more structured way to work with asynchronous code compared to callbacks.
1952+
1953+
3. async/await is a more recent way to work with asynchronous operations. It allows you to write asynchronous code in a more synchronous-looking style, making it easier to read and maintain.
1954+
1955+
4. JavaScript uses an event loop to manage asynchronous operations. The event loop continuously checks the message queue for tasks that need to be executed, and runs them in the order they were added.
1956+
1957+
```js
1958+
console.log("Start");
1959+
setTimeout(function () {
1960+
console.log("Delayed message");
1961+
}, 2000);
1962+
console.log("End");
1963+
```
1964+
1965+
```
1966+
Output:
1967+
1968+
Start
1969+
End
1970+
Delayed message
1971+
```
1972+
1973+
- Asynchronous programming using callback:
1974+
1975+
```js
1976+
function asyncOperation(callback) {
1977+
setTimeout(function () {
1978+
callback("Data from a asynchronous operation");
1979+
}, 2000);
1980+
}
1981+
1982+
console.log("Start of the program");
1983+
asyncOperation(function (data) {
1984+
console.log(data);
1985+
console.log("End of the asynchronous operation");
1986+
});
1987+
console.log("End of the program");
1988+
```
1989+
1990+
```
1991+
Output:
1992+
1993+
Start of the program
1994+
End of the program
1995+
Data from a asynchronous operation
1996+
End of the asynchronous operation
1997+
```
1998+
1999+
## AJAX (Asynchronous JavaScript and XML):
2000+
2001+
AJAX, short for asynchronous JavaScript and XML, is a set of web development techniques used to create dynamic and responsive web applications. It enables asynchronous communication between the web browser and the server, allowing data to be exchanged without requiring a full page reload.
2002+
2003+
AJAX operates asynchronously, meaning it allows the webpage to send and receive data from the server in the background while the user interacts with the page.
2004+
2005+
- Advantages of using AJAX:
2006+
2007+
1. AJAX facilitates smooth and dynamic content updates, leading to a more interactive user interface.
2008+
2009+
2. By updating only specific portions of the page, AJAX reduces bandwidth usage and server load, enhancing performance.
2010+
2011+
3. Users can continue interacting with the webpage while data is being fetched or processed in the background.
2012+
2013+
4. The seamless experience of infinite scrolling, live updates, and comments that load without page refreshes is made possible through AJAX, enhancing the user experience.
2014+
2015+
## XMLHttpRequest (XHR):
2016+
2017+
XMLHttpRequest (XHR) is a JavaScript API that enables communication between a web browser and a server. It allows for making HTTP requests
2018+
to retrieve data from a server or send data to a server in the background without reloading the entire web page. XMLHttpRequest is at the core of AJAX, asynchronous JavaScript and XML, a technique for creating more responsive and dynamic web applications.
2019+
2020+
- Features and Functionalities of XMLHttpRequest:
2021+
2022+
1. You can use XMLHttpRequest to fetch data from external APIs or servers managing different data formats such as JSON or XML.
2023+
2024+
2. With XHR, you can utilize event listeners to handle responses, including response codes like success or failure.
2025+
2026+
3. You can effectively manage errors and timeouts with XMLHttpRequest.
2027+
2028+
4. You can use XMLHttpRequest to retrieve data securely, addressing concerns such as cross-origin request.
2029+
2030+
To initiate an HTTP request, developers create an instance of the XMLHttpRequest object. This object exposes various properties and methods that facilitate configuring and sending requests, handling responses, and managing errors.
2031+
2032+
```js
2033+
var xhr = new XMLHttpRequest();
2034+
```
2035+
2036+
Next, the open method sets up the request specifying the HTTP method get and the URL.
2037+
2038+
```js
2039+
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos", true);
2040+
```
2041+
2042+
After configuring the request, you can invoke the send method to send the request to the specified URL.
2043+
2044+
```js
2045+
xhr.send();
2046+
```

0 commit comments

Comments
 (0)