Coding better with jQuery and Ajax

JaneReyes Aug 25 2017

Are you confused whether to use Ajax or JQuery? In the following post, we will take a walk through a few of JQuery’s Ajax related functions and methods. But before that, a JQuery developer needs to be completely familiar with database and PHP.

Introduction to JQuery

JQuery is a library built in javascript to automate and simplify common tasks by building lots and lots of high-level functionality to support all the browsers. Although you may come across several such libraries but jQuery has the potential and ability to make things work especially in regards with HTML document traversing, event handling, animations and Ajax interactions for rapid web development. You will also find this interesting to know that a part of the functionality of jQuery implements a high-level interface to do AJAX requests.

Being a lightweight, client-side javascript library, jQuery assisted numerous professionals by reducing lines of code while they program. For example, a huge code written in javascript can be written in one or two lines of code using jQuery library.

Benefits & Advantages of jQuery

Cross-browsing compatibility- Cross-browser compatibility is one of the major issues found in programming. For example, a website may work perfectly in an opera but not in Mozilla 7. JQuery library has fixed these problems and makes sure whatever code you write, web pages look the same across all browsers.

Light-in- weight and Fast- Ample of functions have been omitted or transferred to the plugin section in order to keep jQuery lightweight. Which means in case if a jQuery developer wants any particular feature on a page, he/she can add these plug-in on the website. This keeps coding at a limited level and delivers results at a faster pace.

Flexible- jQuery is very compact and easy to understand. Even if you have the basic knowledge of coding, you can start with jQuery development right after going through a short tutorial.        

Introduction to AJAX

Asynchronous JavaScript And XML commonly known as AJAX was coined in the year 2015 by Jesse James Garrett who offered a new approach to using a number of existing technologies together, including HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object.

When combining these technologies, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the developed application faster and more responsive to user actions. However, using Ajax can be a bit cumbersome for a developer, as different browsers have different implementations to support Ajax which would ultimately force you to write code to respond differently. But thankfully, jQuery allows to write Ajax functionality with as little as a single line of code.

Benefits & Advantages

The web page created with Ajax becomes more pleasant to use. In fact, parts of it can be updated without a refresh.

Because you can only load the data you need to update the page, instead of refreshing the entire page, you save bandwidth.

When to use Ajax?  

There are times in rich interfaces, it is needed to send or receive some extra bit of information without reloading or changing the page. Example, If the jQuery developer wants to send a comment to another one via a form but doesn’t want the entire page to be refreshed the moment he presses the submit button. Ajax allows to send data to a hidden page and inputs the result back to the original page that the user is looking without the need to refresh.

On and all, the asynchronous behavior makes it a powerful and popular technology worth considering when implementing interactive interfaces.

How To Use Jquery’s $.Ajax() Function?

The JQuery $.Ajax() function is mostly used to perform an asynchronous HTTP request. The function was added to the library a long time ago to achieve successful results. The signature of this function is:-

$.ajax(url[, options])

$.ajax([options])

The URL parameter is basically a string containing URL you want to reach with the Ajax call while options is a object literal containing the configuration for the Ajax request.

Have a look at the first form, this function performs an Ajax request using URL parameters and specified options while in the second, the URL is specified in the option parameter which can be omitted only if the request is made to the current page.

Apart from this, JQuery developers will come across a wide range of options to bend the Ajax function right according to your needs. For example:-

accepts- The request is made by the header to the server what kind of request is to be to in return.

beforeSend- A pre-request callback function that can be used to modify the jqXHR object before it is even sent

complete- as the name implies, the function appears after success or error callbacks are executed

datafilter- Function used to handle the raw response data of XMLHttpRequest

There are many more! Here is a simple demo that reproduces a code developed with $.ajax().

$('#main-menu a').click(function(event) {

   event.preventDefault();

    $.ajax(this.href, {

      success: function(data) {

        $('#main').html($(data).find('#main *'));

         $('#notification-bar').text('The page has been successfully loaded');

      },

      error: function() {

         $('#notification-bar').text('An error occurred');

      }

   });

});

Author bio :

Jane Reyes likes to write on various technology and explore her knowledge with tech geeks. Right now she is working with jQuery developers in India from eTatvaSoft to keen her knowledge on it.