jQuery Ajax

Hồng Anh

AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ Server mà không cần Refresh trình duyệt.

Nếu bạn cảm thấy mới mẻ với AJAX, mình đề nghị bạn nên truy cập trang: Ajax Tutorial trước khi theo dõi những gì được đề cập trong chương này.

jQuery là một công cụ tuyệt vời cung cấp một tập hợp các phương thức AJAX dồi dào để phát triển ứng dụng web.

Tải dữ liệu một cách đơn giản với jQuery

Nó là thực sự dễ dàng để tải bất kỳ dữ liệu tĩnh hoặc dữ liệu động bởi sử dụng jQuery AJAX. jQuery cung cấp phương thức load() để thực hiện công việc này:

Cú pháp

Sau đây là cú pháp đơn giản cho phương thức load() trong jQuery:

[selector].load( URL, [data], [callback] );

Miêu tả chi tiết về các tham số:

URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script mà tạo dữ liệu động hoặc ra khỏi database

data − tham số tùy ý này biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới Yêu cầu (Request). Nếu được xác định, Request được tạo bởi sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng.

callback − Một hàm callback được gọi sau dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối. tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái.

Ví dụ

Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ:

<html> 
    <head> 
        <title>The jQuery Example</title> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
        <script type="text/javascript" language="javascript"> 
        $(document).ready(function() { 
            $("#driver").click(function(event){ 
                $('#stage').load('./result.html'); 
            }); 
        }); 
        </script> 
    </head> 
<body> 
    <p>Click vào nút để load file result.html −</p> 
    <div id="stage" style="background-color:cc0;"> 
        STAGE 
    </div> 
    <input type="button" id="driver" value="Load Data" /> 
</body> 
</html>

Ở đây, load() khởi tạo một AJAX request tới URL file đã xác định là ./result.html. Sau khi tải file này, tất cả nội dung sẽ được đưa đến vào trong phần tử <div> được tag với ID là stage. Giả sử, ./result.html file chỉ có một dòng HTML như sau:

<h1>THIS IS RESULT...</h1>

Khi bạn click vào nút đã cho, thì khi đó result.html được tải.

Nhận dữ liệu JSON trong jQuery

Có thể sẽ có một tình huống khi Server sẽ trả về chuỗi JSON cho yêu cầu của bạn. Hàm tiện ích jQuery getJSON() phân tích chuỗi JSON đã trả về và tạo chuỗi kết quả có sẵn cho hàm callback như là tham số đầu tiên để thực hiện các hành động khác xa hơn.

Cú pháp

Cú pháp của phương thức getJSON() trong jQuery là:

[selector].getJSON(URL, [data], [callback]);

Dưới đây là miêu tả chi tiết về các tham số:

URL − URL của nguồn Server-Side được kết nối thông qua phương thức GET.

data − Một đối tượng mà các thuộc tính của nó cung cấp cặp name/value được sử dụng để xây dựng một chuỗi truy vấn để được nối kết với URL, hoặc một chuỗi truy vấn được định dạng và được mã hóa trước.

callback − Một hàm được gọi khi Request hoàn thành. Giá trị dữ liệu kết quả từ phân tích thân phải hồi như là một chuỗi jQuery được truyền như là tham số đầu tiên tới callback này, và trạng thái là thứ hai.

Ví dụ

Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ:

<html> 
  <head> 
     <title>The jQuery Example</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
        $(document).ready(function() { 
           $("#driver").click(function(event){ 
              $.getJSON('../result.json', function(jd) { 
                 $('#stage').html('<p> Name: ' + jd.name + '</p>'); 
                 $('#stage').append('<p>Age : ' + jd.age+ '</p>'); 
                 $('#stage').append('<p> Sex: ' + jd.sex+ '</p>'); 
              }); 
           }); 
        }); 
      </script> 
  </head> 
  <body> 
     <p>Click vào nút để load file result.json −</p> 
     <div id="stage" style="background-color:#eee;"> 
        STAGE 
     </div> 
     <input type="button" id="driver" value="Load Data" /> 
  </body> 
</html>

Ở đây, phương thức tiện ích getJSON() trong jQuery khởi tạo một AJAX Request tới URL file đã xác định là result.json. Sau khi tải file này, tất cả nội dung sẽ được truyền tới hàm callback mà cuối cùng sẽ được đưa đến bên trong phần tử <div> được tag với ID là stage. Giả sử, result.json có nội dung json được định dạng là:

{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}

Truyền dữ liệu tới Server trong jQuery

Nhiều khi bạn thu thập input từ người sử dụng và bạn truyền những input này tới Server để tiến hành xử lý sâu hơn. jQuery AJAX làm nó đủ dễ dàng để truyền các dữ liệu đã thu thập tới Server bởi sử dụng tham số data của bất kỳ phương thức Ajax có sẵn nào.

Ví dụ

Ví dụ này minh họa cách truyền input từ người dùng tới một WebServer mà sẽ gửi kết quả trở lại và chúng ta sẽ in nó ra:

<html> 
  <head> 
     <title>The jQuery Example</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
        $(document).ready(function() { 
           $("#driver").click(function(event){ 
              var name = $("#name").val(); 
              $("#stage").load('/jquery/result.php', {"name":name} ); 
           }); 
        }); 
      </script> 
  </head> 
  <body> 
     <p>Nhập tên của bạn rồi nhấn nút:</p> 
     <input type="input" id="name" size="40" /><br /> 
     <div id="stage" style="background-color:cc0;"> 
        STAGE 
     </div> 
     <input type="button" id="driver" value="Show Result" /> 
  </body> 
</html>

Còn đây là code được viết trong result.php script:

<?php 
if( $_REQUEST["name"] ) 
{ 
    $name = $_REQUEST['name']; 
    echo "Welcome ". $name; 
} 
?>

Bây giờ, bạn có thể nhập bất kỳ text nào vào trong hộp input đã cho và sau đó nhấn nút Show Result để xem những gì bạn đã nhập trong Input box.

Các phương thức jQuery AJAX

Bạn đã thấy khái niệm của AJAX sử dụng jQuery. Bảng sau liệt kê tất cả phương thức jQuery AJAX mà bạn có thể sử dụng tùy theo yêu cầu của bạn:

jQuery.ajax(options): Tải một trang từ xa bởi sử dụng một HTTP Request

jQuery.ajaxSetup(options): Setup các thiết lập global cho AJAX Request

jQuery.get(url, [data], [callback], [type]): Tải một trang từ xa bởi sử dụng một HTTP GET Request

jQuery.getJSON(url, [data], [callback]): Tải dữ liệu JSON bởi sử dụng một HTTP GET Request

jQuery.getScript(url, [callback]): Tải và thực thi một JavaScript file bởi sử dụng một HTTP GET request.

jQuery.post(url, [data], [callback], [type]): Tải một trang từ xa bởi sử dụng một HTTP POST request.

load(url, [data], [callback]): Tải HTML từ một file từ xa và inject nó vào trong DOM.

serialize( ): Sắp xếp theo thứ tự một tập hợp các phần tử input vào trong một chuỗi dữ liệu

serializeArray( ): Xếp theo thứ tự tất cả Form và phần tử Form như phương thức .serialize() nhưng trả về một cấu trúc dữ liệu JSON để bạn làm việc với nó.

Các sự kiện jQuery AJAX

Bạn có thể gọi nhiều phương thức jQuery đa dạng trong suốt vòng đời của tiến trình gọi AJAX. Dựa trên cơ sở các Event/Stage khác nhau, các phương thức sau là có sẵn:

ajaxComplete(callback): Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request hoàn thành

ajaxStart(callback): Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request bắt đầu và không có hoạt động nào sẵn sàng

ajaxError(callback): Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request thất bại

ajaxSend(callback): Đính kèm một hàm để được thực thi trước khi một AJAX Request được gửi

ajaxStop(callback): Đính kèm một hàm để được thực thi bất cứ khi nào tất cả AJAX Request đã kết thúc

ajaxSuccess(callback): Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request kết thúc thành công

Theo tutorialspoint

Bài trước: Xử lý sự kiện trong jQuery

Bài tiếp: Hiệu ứng trong jQuery

Thứ Ba, 24/07/2018 18:15

4,1 ★ 7 👨 1.739