$.ajax()

How it works?

The $.ajax() is a pretty complex function if you never worked with AJAX. I'll try to simplify everything, but understand that I'll have to go through some stuff without necessarily explaining how it works. But, let's start by defining what's AJAX.

AJAX

AJAX is a developer's dream because you can:

• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

Ajax, or Asynchronous JavaScript and XML, is an approach to Web application development that uses client-side scripting to exchange data with the Web server. As a result, Web pages are dynamically updated without a full page refresh interrupting the interaction flow.

With Ajax, you can create richer, more dynamic Web application user interfaces.i.e. client side. On the other hand, servlet requests are on the server side to handle the request sent from the UI.

When the visitor requests a page, the server will send the full HTML and CSS code at once. After the visitor fills in a form and submits it, the server processes the information( Servlet Request object provides client request information to a servlet. The servlet container creates a ServletRequest object and passes it as an argument to the servlet's service method) and rebuilds the page. It then sends the full page back to the client. And so on.

When using AJAX, the page is loaded entirely only once, the first time it is requested. Besides the HTML and CSS code that make up the page, some JavaScript files are also downloaded: the AJAX engine. All requests for data to the server will then be sent as JavaScript calls to this engine. The AJAX engine then requests information from the web server asynchronously ( servlet request object contains request parameters, which have got changed). Thus, only small page bits are requested and sent to the browser, as they are needed by the user. The engine then displays the information without reloading the entire page. This leads to a much more responsive interface because only the necessary information is passed between the client and server, not the whole page.

How to use it?

To use it, you'll need to know what are $.ajax()'s arguments:

• url (Do I really need to explain this one 😂)
• method, could be "GET" or "POST". These values are the ones that you work with when you have a form.
• data. This could be different things, such as JSON string, form data, etc... If you have nothing to send, simply put "".
• callback. This will be the function called when the request is done. The $.ajax() function will put the data that it received as an argument of this callback.
• header. This one, if you don't know anything about HTTPs header, don't declare it. If you know about it, you probably know how to use this argument.

Example

Let's say you want to list every GitHub repositories of someone.

HTML:

<h1>My GitHub repos:</h1> 
<div class="proj-grid">Loading...</div>

JS:

// declaring init var
var $ = new DisplayJS(window);
// The user you want
var user = "";
// creating an ajax request like:
// $.ajax(url, method, data, callback)
$.ajax("https://api.github.com/users/"+user+"/repos", "GET", "", function (data) {
    // extracting data from GitHub API
  var obj = JSON.parse(data);
    //emptying the .proj-grid element
  $.empty($.select(".proj-grid"));
    // puting every element in a list
  function logArrayElements(element, index, array) {
    // appending each repo
    $.append($.select(".proj-grid"),"<li><b><a href=\""+element.html_url+"\">"+element.name+"</b> : "+element.description+"</a></li>");
    
  }
    // executing the function for each repo
  obj.forEach(logArrayElements);
});

---

⚠️ Questions?

Don't hesitate to ask your questions ⁉️ in the issue part 😁