Monday, November 10, 2008

2 Simple Ajax Using jQuery

Ajax is a technique for handling data without reloading a page or without sending a postback. Often we want a loading indicator while Ajax request (xmlhttp request) is processing. A simple example is gmail email load indicator. Implementing this requirement using jQuery is quite easy. Interesting fact is that jQuery encapsulates ajax events which makes development task for programmer easy. We will use ajaxSend and ajaxComplete events of jQuery. ajaxSend attach a function that should be executed before an ajax request is sent. On the other hand ajaxComplete attach a function that should be executed when an ajax request completes.

Here are the steps:-

1. include the jquery.js file. Download it from http://jquery.com

2.bind an event to the div where loading image placed.Initially the div id "loading" is hidden. Code example is given below:-

$(document).ready(function()
{
    /*shows the loading div every time we have an Ajax call*/
    $("#loading").bind("ajaxSend", function(){
   $(this).show();
  }).bind("ajaxComplete", function(){
   $(this).hide();
  });
});

The above code means when an ajax request is sent the div id "loading" is shown and when request completes the div hide again.

3. Call a javascript function on an event such as button click. Suppose that the javascript function is callAjax.

4. jQuery has several variations of calling ajax. They are quite easy and friendly for programmers. They reduces headeche for various ajax states. Please check this link for ajax functions. I used here $.get. Examples is given below:-

$.get("test.php", { name:'john',age:20},callbackfunction);

5. Now parse the result if you put it in xml response and put where you want. If you return not xml but some html then you can put inside a div or other using innerHTML.

2 comments:

rafiq said...

hi rips,
its a nice solution; worked for me. thanks :)

Dinh Ha said...

đồng tâm
game mu
cho thuê nhà trọ
cho thuê phòng trọ
nhac san cuc manh
số điện thoại tư vấn pháp luật miễn phí
văn phòng luật
tổng đài tư vấn pháp luật
dịch vụ thành lập công ty trọn gói

Hồ Hà Hoa đã thành tiêu điểm. Người các nơi, đều bắt đầu mãnh liệt không dứt hướng phía bên này mà đến. Đây là sự kiện âm nhạc của toàn bộ Cửu trùng thiên đại lục! Sự kiện đỉnh phong chân chính!

Vô số văn nhân nhã sĩ, nhà thơ mặc khách, đều tập trung ở nơi này.

Sở Dương nằm ở ba thước dưới nước trong nước, giống như một con cá lớn không tiếng động ở dưới nước bơi qua.

Trong nó một con thuyền đàm luận, cho hắn hứng thú. Làm cho nàng rời xa thuyền khác, không tiếng động phục đến dưới chiến thuyền này.

“...Một lần này, Đệ Ngũ tướng gia thật đúng là trở nên hung ác... Nhiều người như vậy, chết oan chết uổng..." Trên thuyền một người trong đó nói. “Phải, cái này đối với Đại Triệu mà nói, quả thực là một hồi tai họa lớn... hơn nữa lề mề, vậy mà đên bây giờ còn chưa có chấm dứt..." Một người khác thờ dài.

“Qua biến cố này, chỉ sợ trong dăm ba năm không thể khôi phục nguyên khí nữa" Tên còn lại sầu lo nói.

"Đó cũng chưa hẳn..."

Mấy người trên thuyền rõ ràng có điều cố kỵ, thanh âm đều ép tới cực thấp, sợ để cho người khác nghe được.

Sở Dương nhất thời yên lòng. Xem ra Đệ Ngũ Minh Nhu còn chưa có hoàn toàn làm triệt để.

 

Mohammad Abul Khaer Copyright © 2011 - |- Template created by O Pregador - |- Powered by Blogger Templates