DESIGN WEB: Ajax trong JQuery (P1) - phương thức load()

1. load(url, parameters, callback)

Jquery có một số chức năng để thực thi kỹ thuật Ajax. Một trong những hàm phổ biến nhất là hàm load().Bạn sử dụng hàm load() để hiện thị những dữ liệu tải xuống trong một tập hợp các phần tử trực tiếp.

Hàm load() hoạt động như sau:
load(url, parameters, callback)

Url: là địa chỉ của trang nguồn bạn đang cần lấy
Parameters: là một đối tượng lưu giữ các giá trị mà bạn muốn gửi đến máy chủ
Callback: là một hàm cái mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ 1: Trong ví dụ này, chúng ta sẽ sử dụng hàm load () để tải tập tin message.txt từ máy chủ và hiển thị nội dung của nó trong thẻ <div>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
        $("div").load("files/message.txt");
    });
</script>
</head>

<body>
<h1>Sử dụng hàm load()</h1>
Lấy nội dung từ server 
<div></div>

</body>
</html>

Ví dụ 2: Trong ví dụ này chúng ta sẽ sử dụng tham số callback. Sau khi hiển thị dữ liệu xong chúng ta sẽ hiện một câu thông báo ‘Tải dữ liệu thành công’

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
        $("div").load("files/message.txt",callback);
    });
 
 function callback(){
  $("#targetDiv").text("Tải dữ liệu thành công.");
 }
</script>
</head>

<body>
<h1>Sử dụng hàm load()</h1>
Lấy nội dung từ server 
<div></div>
<div id="targetDiv"></div>

</body>
</html>

Nếu bạn gồm nhiều tham số, và muốn gửi những dữ liệu được lưu trong các tham số đó đến máy chủ thì hàm load() sẽ sử dụng phương thức POST, nếu bạn không có tham số nào thì hàm load() sẽ sử dụng phương thức GET

Ví dụ 3: Trong ví dụ này chúng ta sẽ sử dụng tham số parameters và chúng ta sẽ truyền cho nó một tham số có tên data và tham số data có giá trị bằng 1. Trang này sẽ gửi giá trị data = 1 qua một trang khác có tên là poster.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
       $("div").load("poster.php", 
             {data: 1});
    });
</script>
</head>

<body>
<h1>Sử dụng hàm load()</h1>
Lấy nội dung từ server 
<div></div>
</body>
</html>

Tập tin poster.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)