DESIGN WEB: Ajax trong JQuery (P5) - Sử dụng toàn bộ sức mạnh của Ajax

Trong phần trước, chúng ta đã thấy một ví dụ trong một số hàm có sẵn của jQuery như load(), get(), post(). Những hàm này tốt cho giải pháp Ajax ngắn gọn nhưng chúng không đáp ứng được đầy đủ. Cái gì nếu bạn muốn thiết lập khoảng thời gian chờ nhận yêu của Ajax. Cài gì nếu bạn muốn kiểm sóat được đối tượng XMLHttpRequest. Điều gì nếu bạn muốn xử lý bất kỳ lỗi nào trả lại do không hoạt động

Để thực hiện điều này và nhiều hơn, jQuery cung cấp đầy đủ trong hàm $.ajax(). Hàm này cho phép bạn truy cập toàn bộ sức mạnh của Ajax trong khi bạn vẫn còn sử dựng jQuery

<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(){
        $.ajax({
            type: "GET",
            url: "files/message.txt",
            success: callback
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the 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>

Cũng giống như phần 3 chúng ta sẽ sử dụng phương thức gửi dữ liệu đến máy chủ bằng phương thức POST. Lúc này chúng ta truyền vào hàm $.ajax() một tham số có tên là ‘data’ để chứa dữ liệu truyền lên server

<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(){
        $.ajax({
            type: "POST",
            url: "poster.php",
            data: {data: 1},
            success: callback
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the server: <div></div>
</body>
</html>

Chúng ta thực hiện tương tự như vậy với phương thức GET của hàm $.ajax()

<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(){
        $.ajax({
            type: "POST",
            url: "poster.php",
            data: {data: 1},
            success: callback
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the server: <div></div>
</body>
</html>

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