Skip to content

Commit 22e2a4e

Browse files
committed
AJAX
1 parent 0cb2525 commit 22e2a4e

File tree

3 files changed

+227
-0
lines changed

3 files changed

+227
-0
lines changed

15. AJAX/data.txt

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"persons": [
3+
{
4+
"name": "Rahim",
5+
"age": 25,
6+
"hometown": "Dhaka",
7+
"married": false
8+
},
9+
{
10+
"name": "Karim",
11+
"age": 35,
12+
"hometown": "Chittagong",
13+
"married": true
14+
},
15+
{
16+
"name": "Ayon",
17+
"age": 27,
18+
"hometown": "Chandpur",
19+
"married": false
20+
},
21+
{
22+
"name": "Rahat",
23+
"age": 34,
24+
"hometown": "Chittagong",
25+
"married": true
26+
},
27+
{
28+
"name": "Rony",
29+
"age": 26,
30+
"hometown": "Chittagong",
31+
"married": false
32+
}
33+
],
34+
35+
"students": [
36+
{
37+
"name": "Abdullah",
38+
"age": 25,
39+
"hometown": "Dhaka",
40+
"married": false
41+
},
42+
{
43+
"name": "Al-Amin",
44+
"age": 35,
45+
"hometown": "Chittagong",
46+
"married": true
47+
},
48+
{
49+
"name": "Abdur Rahman",
50+
"age": 27,
51+
"hometown": "Chandpur",
52+
"married": false
53+
},
54+
{
55+
"name": "Obaydur Rahman",
56+
"age": 34,
57+
"hometown": "Chittagong",
58+
"married": true
59+
},
60+
{
61+
"name": "Abu Hanifa",
62+
"age": 26,
63+
"hometown": "Chittagong",
64+
"married": false
65+
}
66+
]
67+
}

15. AJAX/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Java Script Basics</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
19+
<div class="container">
20+
<div class="row">
21+
<div class="col-6">
22+
<h2>Using AJAX to Get Data</h2>
23+
<button id="get-data" class="btn btn-dark fs-5 text-white">GET DATA</button>
24+
<p id="showData" class="mt-2 fs-5"></p>
25+
<button class="btn btn-dark fs-4" id="get-data-server">GET DATA FROM SERVER</button>
26+
<p id="showDataApi" class="fs-3 mt-2"></p>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
32+
<script src="js/script.js"></script>
33+
<p></p>
34+
</body>
35+
36+
</html>

15. AJAX/js/script.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// AJAX (Asynchronous Javascript and XML)
2+
// asynchronous মানে হচ্ছে একাধিক কাজ একই সময়ে চলা। আমরা যখন function কল করি তখন ওই function execute করার পর এর পরের লাইন বা function execute হয়। কিন্তু এখানে অন্য কোনো function যদি রান করতে টাইম বেশি লাগে এটির কাজও চলতে থাকে সাথে এর পরের কাজ বা অন্য প্রোগ্রামগুলাও চলতে থাকে।
3+
4+
//We use JSON heere Instead pf XML
5+
// AJAX is a developer's dream, because you can:
6+
// Read data from a web server - after the page has loaded
7+
// Update a web page without reloading the page
8+
// Send data to a web server - in the backgroun
9+
// AJAX is not a programming language.
10+
// AJAX is a technique for accessing web servers from a web page.
11+
// AJAX stands for Asynchronous JavaScript And XML.
12+
13+
14+
// fetch data from a file using ajax
15+
16+
document.getElementById('get-data').addEventListener('click', loadData);
17+
// Method 1: Cuurently Use it
18+
function loadData() {
19+
// Create a xhr Object(XML HTTP Request)
20+
// It creates a new instance of XMLHttpRequest named xhr, which is the core of AJAX requests.
21+
22+
let xhr = new XMLHttpRequest();
23+
24+
//Open the file
25+
// ** Purpose: This open() method configures the request.
26+
// * The first argument ('GET') specifies the type of HTTP request (GET request in this case, used to retrieve data).
27+
// * The second argument ('data.txt') is the file to be requested from the server.
28+
// * The third argument (true) sets the request to be asynchronous, meaning the JavaScript will continue to execute without waiting for the server's response.
29+
xhr.open('GET', 'data.txt', true);
30+
xhr.onprogress = function(){
31+
console.log(this.readyState);
32+
}
33+
34+
// call onload function function for load data
35+
// Purpose: This defines the onload event handler, which is triggered when the request is complete.
36+
37+
xhr.onload = function(){
38+
// HTTP status
39+
// 200 "OK"
40+
// 403 "Forbidden"
41+
// 404 "Not found"
42+
43+
if(xhr.status === 200){
44+
document.getElementById('showData').innerHTML =`${this.responseText}`;
45+
}
46+
47+
}
48+
49+
50+
// Purpose: This sends the actual request to the server to retrieve the data.txt file.
51+
xhr.send();
52+
}
53+
54+
// How It Works:
55+
// 1. When the user clicks the button with ID get-data, the loadData() function is called.
56+
// 2. An AJAX request is made using the XMLHttpRequest object to fetch the contents of data.txt.
57+
// 3. When the response is received (if the status is 200), the contents of the file are inserted into the webpage inside the element with the ID showData.
58+
// 4. If there are errors (e.g., 404 Not Found), nothing is displayed, but you could add additional handling for other statuses.
59+
// This is a basic example of how AJAX can be used to dynamically load data from the server without needing to refresh the page.
60+
61+
62+
63+
64+
//Methods 2(Previous Used) onreadystatechange
65+
66+
// function loadData(){
67+
// let xhr = new XMLHttpRequest();
68+
// xhr.open('GET','data.txt', true);
69+
70+
71+
// //oneprogress method used data is comeing to progress
72+
// // we show something on onprogress "Data in progress please wait"
73+
74+
75+
76+
// xhr.onreadystatechange = function(){
77+
// // readyState values
78+
// // 0: request not initialized
79+
// // 1: server connection established
80+
// // 2: response received
81+
// // 3: processing request
82+
// // 4: request finished and response is ready
83+
// if(this.status === 200 && this.readyState === 4){
84+
// document.getElementById('showData').innerText = this.responseText;
85+
// }
86+
// }
87+
88+
// xhr.send();
89+
// }
90+
91+
document.getElementById("get-data-server").addEventListener("click", loadDataServer);
92+
93+
94+
function loadDataServer(e){
95+
xhr = new XMLHttpRequest();
96+
xhr.open('GET', `https://api.api-ninjas.com/v1/jokes/`, true);
97+
xhr.setRequestHeader('X-Api-Key', 'f88n0jSzxJ9hdDCDlU8p/A==wrX6uj9eqGVhzao2');
98+
99+
xhr.onloadstart = function(){
100+
document.getElementById('showDataApi').innerText = "Loading data...";
101+
}
102+
103+
xhr.onload = function(){
104+
if(this.status === 200){
105+
let data = JSON.parse(this.responseText);
106+
let output = data[0].joke;
107+
document.getElementById('showDataApi').innerHTML = output;
108+
}
109+
}
110+
111+
xhr.send();
112+
}
113+
114+
// অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস বা এপিআই হচ্ছে এক গুচ্ছ ফাংশনের সমষ্টি। এটি একটি ইন্টারফেস যা কোন কম্পিউটার, লাইব্রেরি অথবা অ্যাপলিকেশন অন্য অ্যাপ্লিকেশনকে বিভিন্ন সার্ভিস দেয়ার লক্ষ্যে বা ডাটা বিনিময়ের জন্য প্রদান করে থাকে। সাধারণত সফটওয়্যার প্রস্তুতকারক কোম্পানি এটি তৈরি করে। অন্য কোনো প্রোগ্রাম ঐ সফটওয়্যারকে নিজেদের সাথে একীভূত করতে চাইলে এপিআই এর মাধ্যমে সফটওয়্যারের সাথে যোগাযোগ রক্ষা করে।[১]
115+
116+
// What is RESTful API?
117+
// RESTful API is an interface that two computer systems use to exchange information securely over the internet. Most business applications have to communicate with other internal and third-party applications to perform various tasks. For example, to generate monthly payslips, your internal accounts system has to share data with your customer's banking system to automate invoicing and communicate with an internal timesheet application. RESTful APIs support this information exchange because they follow secure, reliable, and efficient software communication standards.
118+
119+
// What is REST?
120+
// Representational State Transfer (REST) is a software architecture that imposes conditions on how an API should work. REST was initially created as a guideline to manage communication on a complex network like the internet. You can use REST-based architecture to support high-performing and reliable communication at scale. You can easily implement and modify it, bringing visibility and cross-platform portability to any API system.
121+
122+
// API developers can design APIs using several different architectures. APIs that follow the REST architectural style are called REST APIs. Web services that implement REST architecture are called RESTful web services. The term RESTful API generally refers to RESTful web APIs. However, you can use the terms REST API and RESTful API interchangeably.
123+
124+
// The following are some of the principles of the REST architectural style:

0 commit comments

Comments
 (0)