June 23, 2019

As somebody who loves UX and design, it’s not shocking that I’ve been eager to study JavaScript – the language of the browser that allows for cool client-side interactions. I’ve used several JS libraries however wanted to dive deeper into ajax. Before today I didn’t even know what it meant, simply that it had been one thing I needed to understand additional regarding.

What is AJAX?

Ajax is a set of web development methods using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without preventing with the display and behavior of the existing page.

AJAX technique is useful once you try and manipulate info without reloading the whole page. Ajax is an asynchronous technology within the sense that the extra information is requested to the server and this info loads on the background while not “touching” the views and also the rest of the page. By this manner is possible to interact with the data displayed while not reloading the site, obtaining a much better speed and usability on the applications.

AJAX will work with different languages like PHP and in fact javascript and js libraries normally with JQuery Library, also Ajax works with techniques like json and might be enforced on different frameworks, because of the developer wishes. Ajax technique and JQuery methods

How jQuery and AJAX Works?

At a high level, an Ajax request consists of the URL you a creating a request to, and the corresponding settings to handle the response. Below are some of the additional common callbacks that compose the settings:

  • success: what to do if the URL request is successful
  • error: what to do if the URL request is unsuccessful
  • timeout: how long to allow the URL request to run before an error message pops up
  • beforeSend: runs before the AJAX request, a good place to put a spinner
  • complete: runs after both success and error, a good place to stop a spinner

I’m going to create a snippet of code that, using the $.ajax() function, retrieves the title and the description of my talk Modern front-end with the eyes of a jquery developer.

Examples

Example 1: makes a request to ‘index.html’ then inserts the response into the item within the DOM that contains a class called “hello-world”

These 3 examples all create a request to the URL ‘profile.html?1’ and show the assorted ways that to send parameters with a request. In example 2 the info is placed manually into the address. In example 3 the data is placed into a JavaScript object. Lastly, in example 4 the Ajax request pulls data from HTML, that once combined with ERB tags will create the request very dynamic.

Example 5 demonstrates a number of recall settings. during this Ajax request, if the response isn’t with success created it will stop the request once 3 seconds (3000 milliseconds). It also demonstrates a typical code for adding a loading animation whereas the request is being created.

Leave a Reply

Your email address will not be published. Required fields are marked *