Cách gọi ajax bằng jQuery

Tải thư viện jQuery(Xem mục  bên dưới).

Nạp thư viện jQuery

<script type="text/javascript" src="jquery.js"></script>

Gọi ajax bằng phương thức sau

<script type="text/javascript">
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   dataType: 'json',
   async: true,
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });
</script>

Các tham số:

• type: POST hoặc GET.
• url: đường dẫn đến file xử lý(server side).
• data: dữ liệu truyền đi.
• dataType: kiểu dữ liệu trả về, bao gồm: xml, json, script, hoặc html.
• async: kiểu gọi: đồng bộ(synchronous) hoặc bất đồng bộ(asynchronous).
• success: hàm callback xử lý dữ liệu trả về.

Để hiểu sự khác nhau của việc gọi đồng bộ và bất đồng bộ, các bạn xem ví dự sau:

<script type="text/javascript">
function checkEmail(email)
{
	var check = false;
	$.ajax({
	   type: 'POST',
	   url: 'check_email.php',
	   data: {email:email},
	   success: function(response){
	   		check = response.check;
	   },
	   dataType:'json'
	});
	
	return check;
}
if(checkEmail('abc@gmail.com'))
{
	alert('Email already exist.');
}
</script>

Trong ví dụ trên chúng ta có hàm checkEmail để kiểm tra một địa chỉ email tồn tại trong cơ sở dữ liệu chưa. Hàm trên luôn luôn trả về false bất kể file check_email.php trả về kết quả thế nào. Lệnh return sẽ được thực hiện trước khi hàm ajax thực hiện xong. Để khắc phục tình trạng này ta thêm tham số async: false khi gọi hàm ajax.

<script type="text/javascript">
function checkEmail(email)
{
	var check = false;
	$.ajax({
	   type: 'POST',
	   url: 'check_email.php',
	   data: {email:email},
           async:false,
	   success: function(response){
	   		check = response.check;
	   },
	   dataType:'json'
	});
	
	return check;
}
</script>