AJAX(Asynchronous java script and XML):
----------------------------------------------------------
>AJAX is not a programming language , its a set of technology.
>AJAX helps in fetching data asynchrnous without interfering existing page i.e only specefic part reload
>No page reload.
>Modern website use JSON.
ajax.html:
-------------
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>AJAX</h1>
<button type="button" class="btn btn-primary" id="fetchBtn">
Fetch Data
</button>
<button type="button" class="btn btn-secondary" id="popBtn">
Populate
</button>
<div class="container">
<h2>Employee List</h2>
<ul id="list">
</ul>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
<script src="ajax2.js"></script>
</body>
</html>
ajax.js :
----------
console.log("Ajax in one video");
let fetchBtn = document.getElementById("fetchBtn");
fetchBtn.addEventListener("click", buttonClickHandler);
function buttonClickHandler() {
console.log("clicked");
// instantiate an xhr object
const xhr = new XMLHttpRequest();
// open the object
//get request
// xhr.open("GET", "harry2.json", true);
//post request
xhr.open("POST", "http://dummy.restapiexample.com/api/v1/create",true);
xhr.getResponseHeader('Content-type','application/json');
// option
xhr.onprogress = function () {
console.log("on progress");
};
//what to do when response is ready
xhr.onload = function () {
if (this.status == 200) console.log(this.responseText);
else console.log("error occured");
};
//sending the request
params = `{"name":"test","salary":"123","age":"23"}`;
xhr.send(params);
}
ajax2.js :
--------------
console.log("Ajax2 in one video");
let popBtn = document.getElementById("popBtn");
popBtn.addEventListener("click",popHandler)
function popHandler() {
console.log("clicked popandler");
// instantiate an xhr object
const xhr = new XMLHttpRequest();
// open the object
//get request
xhr.open("GET", "http://dummy.restapiexample.com/api/v1/employees", true);
//post request
// xhr.open("POST", "http://dummy.restapiexample.com/api/v1/create", true);
// xhr.getResponseHeader("Content-type", "application/json");
//what to do when response is ready
xhr.onload = function () {
if (this.status == 200) {
let obj = JSON.parse(this.responseText)
console.log(obj);
}
else
{console.log("error occured");}
};
//sending the request
// params = `{"name":"test","salary":"123","age":"23"}`;
xhr.send();
}
harry.txt :
-------------
this is a very good boy
harry.json:
--------------
{
"user_id": "abcdef1234ghi",
"name": "Mock Holliday",
"email": "mock.holliday@example.com",
"birthdate": "1971-08-01T00:00:00+00:00"
}
0 Comments