SixRevisions: The Power Of JQuery With Ajax

Minggu, 27/06/2010 Website 1861 hits

Artikel SixRevisions pilihan kali ini bertemakan tentang Teknologi jQuery dengan Ajax (Asynchronous JavaScript and XML). Perkembangan Teknologi yang satu ini menjadi populer ditambah lagi telah banyak digunakan diberbagai situs jejaring sosial seperti facebook, twitter dll . Sebagaimana tujuan dari pembuat artikel ini yakni untuk memberikan gambaran singkat dan umum tentang Ajax dan jQuery, dan juga membahas bagaimana jQuery membuat pengembangan Ajax lebih mudah dibandingkan sebelumnya.

Berikut artike aslinya :)

As the web evolves, new technologies are emerging and uniting in remarkable ways. The combination of Ajax and jQuery, in particular, is one of the most powerful unions to date.

The purpose of this article is to give a brief and generalized overview of both Ajax and jQuery, and also discuss how jQuery has made Ajax development easier than ever before.

The Power of jQuery with Ajax

What is Ajax?

Since its conception in 2005[1], Ajax (Asynchronous JavaScript and XML) has changed the web as we know it today. It’s helped websites evolve into Rich Internet Applications (RIAs) by allowing web pages to make direct requests to web servers without reloading the page. This capability is vital in replicating the rich user experiences achieved in client applications.

Ajax in Practice

Let’s say that you have a login form for your web application. To ensure that the provided login name and password entered by the user is a match without using Ajax, your web application would have to load a whole new web page that shows an account screen if the login was successful, or show an error screen if the login failed. This is the old way of handling logins.

A more savvy approach to this problem would be to check if the login and password is correct using Ajax.

Here’s how Ajax would work in this instance: Once the user has typed in a login name and password and submitted the login web form, you could have a JavaScript function that invokes an Ajax call that sends two parameters — the login name and password.

The web server (usually through a server-side script/language such as PHP) takes the two parameters and then queries your user database to see if there is a match.

If there is a match found in your database, then the web server can return a success flag. Otherwise, the web server could return an error message.

Next, you would then have a JavaScript function that accepts the Ajax response. If the response is successful, it could use window.location to send the user to their account screen.

If the response contains an error message, the application can display the error on the screen without ever reloading the page.

The main thing to take away from this is that you don’t have to reload an entire page just to handle username/password verification, making your web application more responsive and, if the page is heavy, saving you some significant bandwidth.

What is jQuery?

Released in January of 2006[2], jQuery is a cross-browser JavaScript library designed to simplify the client-side script of HTML.

Used by close to a million websites[3], jQuery is the most popular JavaScript library in use to date.

jQuery makes it easy to handle DOM objects, events, effects and Ajax, automatically takes care of JavaScript leaks, and has countless third-party plugins.

The Problem with Ajax

Despite its revolutionary impact on the web, Ajax can be difficult to use even for veteran developers.

People will usually create their own custom functions to handle Ajax calls so that the functionality can be reused across a web application. This can become very tedious when a web application makes use of different types of Ajax calls — such as the ability to handle both synchronous and asynchronous calls — or the ability to handle different response formats such as string messages, HTML, CSV, XML, JSON, etc.

As a professional web developer, I’ve personally spent countless hours building custom methods to handle Ajax calls.

Traditional Ajax calls usually take on the following form:

function httpRequest(id) {
if (window.XMLHttpRequest) { // code for IE7+, FF, Chrome, Opera, Safari
http=new XMLHttpRequest();
else { // code for IE6, IE5
http=new ActiveXObject("Microsoft.XMLHTTP”);
http.onreadystatechange=function() {
if (http.readyState==4 && http.status==200) {
response = http.responseText;
// do something with response
dest=”servlet.php?id=” + id;"GET”, dest);

If your web application only uses one Ajax call, it’s not that big of a deal to implement. The problem occurs, however, when your web application leverages lots of Ajax calls and you try to break the code apart to make it reusable.

The idea of Ajax is to send a request to some web server, wait for a response, and update your HTML page. It would be convenient to create a custom function like httpRequest() that takes two parameters — a request URL and a response function — that could be reused throughout your system.

Once you start setting this up, however, you’ll immediately see that the simple task of making an Ajax call suddenly becomes a nightmare when you try to construct response function evaluations using eval() and figuring out how to make your new function handle synchronous calls, asynchronous calls, and different response formats.

At the end of the day, the simple idea of creating a custom httpRequest() function quickly turns into a big project.

The other advantage of jQuery is that it has additional Ajax functions and methods that you can use, which can further reduce development and debugging time.

Hello Ajax. Meet jQuery.

Among other advantages, one of my favorite features of jQuery is its ability to leverage Ajax with very little effort. To make an Ajax call, you can do something like this:

type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );

If you’ve developed Ajax applications before without jQuery, you’ll immediately see the value here. jQuery has put all of the properties of Ajax into one simple API. You can control everything including the url, cache, success function, data type, and even synchronization, all from one neat declaration. It’s nothing short of beautiful.

Get Started with Ajax + jQuery

If you’re not using a JavaScript Web Development framework like jQuery or MooTools yet, and you’re planning on creating responsive web applications, you should leverage these awesome libraries.

For jQuery, the following list highlights some tutorials you can check out.


  1. Ajax: A New Approach to Web Applications
  2. jQuery 1.0
  3. jQuery Usage Statistics

About the Author

Eric Rowell is a professional web developer and designer who is fascinated with everything related to the web, including RIAs, emerging technology, and social media marketing. He is the Founder and Chief Editor of Web Krunk and loves HTML, HTML5, CSS, JavaScript, Ajax, jQuery, Flash, PHP and Java. You can follow him on Twitter at @webkrunk.

: tanpa label

Silakan beri komentar :)

Tahukah ANDA ?
Nama warna Magenta berasal dari nama sebuah pertempuran antara tentara Perancis dan Sardinia melawan tentara Austria di tahun 1859. Pertempuran tersebut berlangsung di sebuah tempat yang bernama "Magenta". Setelah pertempuran usai, warna campuran antara merah dan ungu ditiru oleh para ahli kimia Perancis untuk menggambarkan warna darah yang mengering. Dan…

Film Pendek: Cinta Subuh


Abu Sa'id Al-Khudri R.a. Mendengar Rasulullah Saw Bersabda, "Jika Salah Seorang Kamu Melihat Mimpi Yang Disukai, Maka Itu Dari Allah Dan Hendaklah Diceritakannya Kepada Orang Lain."Dalam Riwayat Lain: "Jangan Diberitakan Kecuali Kepada Orang Yang Engkau Sukai. Dan Jika Mimpi Yang Menakutkan, Maka Itu Dari Setan Dan Hendaklah Ia Berlindung Kepada Allah Subhanahu Wa Ta'ala Dan Tidak Menceritakannya Kepada Orang Lain, Maka Tidak Akan Berbahaya Baginya.

Kepada Sebuah Mimpi

Hosting, VPS & Server

Kini saatnya memiliki website/blog professional dan memiliki prestise baik untuk pribadi maupun instansi/perusahaan. Layanan VPS maupun Dedicated Server dengan harga yang terjangkau

Learn More

Web Desain

Memerlukan layanan Jasa pembuatan website ? Jangan ragu untuk menggunakan layanan GaluhWeb yang telah digunakan oleh puluhan Pelanggan. Ayo tunggu apalagi ?

Learn More


Gunakan identitas bisnis atau blog dengan domain yang keren. Harga murah dengan fitur melimpah. Buruan daftarkan domain anda sebelum keduluan yang lain :)

Learn More