Kinh Nghiệm SEO

Chủ Nhật, 17 tháng 10, 2010

Ajax trong JQuery (P7) - Xử lý Ajax timeouts

Đôi khi, bạn có thể không muốn chờ một quá trình Ajax hoàn thành nếu nó diễn ra qua lâu, ví dụ: nguồn tài nguyên của bạn đang cố gắn lấy từ máy chủ không hề tồn tại

Bạn có thể thiết lập một thời gian chờ trong vài giây với thuộc tính timeout của hàm $.ajax(). Ví dụ, chỉ đợi trong vòng 10s

<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: "poster1.php",
            data: {data: 1},
            success: callback,
   timeout: 10,
   error: err
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
   
   function err(xhr, reason, ex)
      {
        $("div").text(reason);
      }
</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>

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

Ajax trong JQuery (P6) - Xử lý lỗi của Ajax

Thỉnh thoàng, một vài điều gì đó gây ra lỗi khi chúng ta làm việc với Ajax. Ví dụ, tài nguyên bạn cố gắng tải về từ máy chủ không có hoặc không kết nối được với internet

Hàm $.ajax cho phép chúng ta xử lý những lỗi đó bằng cách gọi một hàm khác, cái mà sẽ được gọi khi một lỗi xảy ra.

Hàm phản hồi error được truyền qua 3 phần: đối tượng XMLHttpRequest một chuỗi có chứa mô tả lỗi và một đối tượng ngoại lệ

<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: "poster1.php",
            data: {data: 1},
            success: callback,
   error: err
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
   
   function err(xhr, reason, ex)
      {
        $("div").text(reason);
      }
</script>
</head>

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

Tập tin poster.php

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)

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)

Ajax trong JQuery (P4) - Sử dụng $.get( ) để gửi dữ liện đến Server

Bạn có thể muốn kiểm soát nhiều hơn khi phương thức POST hoặc GET được sử dụng, và bạn có thể muốn lấy bằng tay dữ liệu được tải về thoát khỏi sự tải về không cần thiết. Để làm điều này, jQuery cung cấp 2 phương thức $.get và $.post. Các chức năng này cho phép bạn giao tiếp với máy chủ sử dụng phương thức POST và GET. Và chúng cho phép bạn truy cập mà không tự động nạp nó vào phần tử nào hết

<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(  ){
       $.get("poster.php", {data: 1},
       function(data){
         $("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>

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

Ajax trong JQuery (P3) - Sử dụng $.post( ) để gửi dữ liện đến Server

Hàm load() thì hữu ích cho việc lấy dữ liệu từ quá trình Ajax đưa vào trong các phần tử. Nó sử dụng phương thức GET để giao tiếp với máy chủ, trừ khi bạn ép nó chuyển dữ liệu vào bằng phương thức POST

Bạn có thể muốn kiểm soát nhiều hơn khi phương thức POST hoặc GET được sử dụng, và bạn có thể muốn lấy bằng tay dữ liệu được tải về thoát khỏi sự tải về không cần thiết. Để làm điều này, jQuery cung cấp 2 phương thức $.get và $.post. Các chức năng này cho phép bạn giao tiếp với máy chủ sử dụng phương thức POST và GET. Và chúng cho phép bạn truy cập mà không tự động nạp nó vào phần tử nào hết

<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(  ){
       $.post("poster.php", {data: 1},
       function(data){
         $("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>

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

Ajax trong JQuery (P2) - Gửi dữ liệu từ Form đến Server

jQuery có một hàm đặc biệt nó giúp bạn đưa dữ liệu từ Form đến máy chủ qua hàm load() đó là hàm serializeArray()

Hàm này sẽ không có các tham số, nó tạo ra một đối tượng lưu trữ các thuộc tính của Form sau khi các bạn đã cung cấp tên Form cho nó. Hàm serializeArray() giúp bạn dể dàng gửi toàn bộ dữ liệu của form đến server.

Ví dụ 4: Trong ví dụ này chúng ta sẽ để người sử dụng nhập giá trị 1 hay 2 vào ô textbox và sau đó gửi dữ liệu này đến trang poster.php trên server. Và sau đó chúng ta sẽ nhận được giá trị trả về

<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>
      function checker()
      {
    $("div").load("poster.php",  
    $("#targetForm").serializeArray(  ));
      }
</script>
</head>

<body>
  <h1>Using the jQuery serializeArray(  ) function</h1>
  <form id="targetForm">
  Enter a 1 or 2: 
  <input type="text" name="data" id="data"></input>
   <input type="text" name="data1" id="data1"></input>
  <input type = "button" value="Check data" onclick="checker(  )"></input>
  </form>
  <br>
  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>

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

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)