Simplify Ajax development and implementation methods with jQuery

Using jQuery will make Ajax extremely easy. jQuery provides some functions that can make simple tasks easier and complex tasks less complicated.

Some simple code simplification

Here is a simple example that illustrates the impact jQuery can have on your code. To perform some really simple and common tasks, such as attaching a click event to every link in a certain area of the page, you can do it using pure JavaScript code and DOM scripts, as shown in Listing 1.

Listing 1: DOM script without jQuery

Copy the code The code is as follows:

var external_links = document.getElementById(&#39;external_links&#39;); 
var links = external_links.getElementsByTagName(&#39;a&#39;); 
for (var i=0;i < links.length;i++) { 
var link = links.item(i); 
link.onclick = function() { 
return confirm(&#39;You are going to visit: &#39; + this.href); 
}; 
}

Copy after login

Listing 2 shows the same functionality implemented using jQuery.
Listing 2. DOM script using jQuery

Copy code The code is as follows:

$(&#39;#external_links a&#39;).click(function() { 
return confirm(&#39;You are going to visit: &#39; + this.href); 
});

Copy after login

Isn't it amazing? With jQuery, you can grasp the gist of the problem and only let the code achieve the function you want, eliminating some tedious processes. There is no need to loop through the elements, the click() function will do this. There is also no need to make multiple DOM script calls. You just need to use a short string to define the required elements.
Understanding how this code works can be a little complicated. First, we use the $() function - the most powerful function in jQuery. Usually, we use this function to select elements from the document. In this case, a string containing some Cascading Style Sheet (CSS) syntax is passed to the function, and jQuery finds the elements as efficiently as possible.
If you have basic knowledge of CSS selectors, the syntax should be familiar to you. In Listing 2, #external_links is used to retrieve the element with id external_links. The space after a means that jQuery needs to retrieve all elements in the external_links element. It’s very convoluted in English, even in DOM scripts, but in CSS it couldn’t be simpler The
$() function returns a jQuery object containing all elements that match the CSS selector. A jQuery object is similar to an array, but comes with a number of special jQuery functions. For example, you can assign a click handler to all elements in a jQuery object by calling the click function.
You can also pass an element or an array of elements to the $() function, which will encapsulate these elements in a jQuery object. You may want to use this feature to apply jQuery functions to some objects, such as the window object. For example, we usually assign the function to the loading event like this:

Copy the code The code is as follows:

window.onload = function() { 
// do this stuff when the page is done loading 
};

Simplify Ajax development and implementation methods with jQuery_jquery