jQuery Ajax

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.

Quảng cáo

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 on the button to load result.html file −</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.

Quảng cáo

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 on the button to load result.json file −</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"
}

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

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>Enter your name and click on the button:</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:

STT	Phương thức & Miêu tả
1	jQuery.ajax( options ) Tải một trang từ xa bởi sử dụng một HTTP Request
2	jQuery.ajaxSetup( options ) Setup các thiết lập global cho AJAX Request
3	jQuery.get( url, [data], [callback], [type] ) Tải một trang từ xa bởi sử dụng một HTTP GET Request
4	jQuery.getJSON( url, [data], [callback] ) Tải dữ liệu JSON bởi sử dụng một HTTP GET Request
5	jQuery.getScript( url, [callback] ) Tải và thực thi một JavaScript file bởi sử dụng một HTTP GET request.
6	jQuery.post( url, [data], [callback], [type] ) Tải một trang từ xa bởi sử dụng một HTTP POST request.
7	load( url, [data], [callback] ) Tải HTML từ một file từ xa và inject nó vào trong DOM.
8	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
9	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:

Bạn truy cập vào trang sau để xem tất cả AJAX Event trong jQuery.

STT	Phương thức & Miêu tả
1	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
2	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
3	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
4	ajaxSend( callback ) Đính kèm một hàm để được thực thi trước khi một AJAX Request được gửi
5	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
6	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

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học jQuery khác tại VietJack:

Trang trước

Trang sau