Comments (2)
AJAx ( Asynchronous JavaScript and XML ), while not a technology in itself,
is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly the XMLHttpRequest object.
X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in the Ajax model.
the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
steps :
- An event occurs in a web page (the page is loaded, a button is clicked)
- An XMLHttpRequest object is created by JavaScript
- The XMLHttpRequest object sends a request to a web server
- The server processes the request
- The server sends a response back to the web page
- The response is read by JavaScript
- Proper action (like page update) is performed by JavaScript
The keystone of AJAX is the XMLHttpRequest object :
1.Create an XMLHttpRequest object
2.Define a callback function
3.Open the XMLHttpRequest object
4.Send a Request to a server
a Simple example...
// 1) Create xmlHttpRequest or simply xhr
let xhr = new XMLHttpRequest();
// 2) Function dealing with response after loading
xhr.onload = function () {
if (this.status == 200) {
console.log(this.responseText);
// to deal with Json
console.log(JSON.parse(this.responseText));
}
};
// 3) Open the request
xhr.open("GET", "user.json", true);
// 4) Send the request
xhr.send();
Fetch API :
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who
has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
The fetch() method of the WindowOrWorkerGlobalScope mixin starts the process of fetching a resource from the network,
returning a promise which is fulfilled once the response is available.
The promise resolves to the Response object representing the response to your request.
The promise does not reject HTTP errors — it only rejects network errors (which is usually then there’s a permissions issue or similar). You must use then handlers to check for HTTP errors.
a Simple example ...
// 1) Create object contains mthod,headers,mode ...
const myInit = {
method: "GET",
headers: {
Accept: "image/jpeg",
},
mode: "cors",
cache: "default",
};
// 2) Initilize the request
let myRequest = new Request("flowers.jpg");
// 3) Fetch with both the request and object
fetch(myRequest, myInit)
.then(function (response) {
// if there is HTTP errors
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.blob();
})
.then(function (response) {
// Dealing with the response
let objectURL = URL.createObjectURL(response);
});
from questions.
Well done 👍🏼.
Next time answer with your own words like in an interview and separate each question answer in a comment.
from questions.
Related Issues (4)
- HTTP Verbs HOT 4
- CORS HOT 4
- JS Promise
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from questions.