AJAX

[mohamed-abdul-fattah]

1. What is AJAX?
2. How could we implement an AJAX request natively using JavaScript?

[al-amiir]

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 :

1. An event occurs in a web page (the page is loaded, a button is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. 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);
   
  });

[mohamed-abdul-fattah]

Well done 👍🏼.
Next time answer with your own words like in an interview and separate each question answer in a comment.