Home Tutorial jQuery jQuery – Bài 8: Ajax
jQuery

jQuery – Bài 8: Ajax

By quangvu
Posted on December 29, 2022
34 min read
0
217

AJAX là từ viết tắt của JavaScript và XML không đồng bộ và công nghệ này giúp chúng tôi tải dữ liệu từ máy chủ mà không cần làm mới trang trình duyệt.

JQuery là một công cụ tuyệt vời cung cấp một tập hợp phong phú các phương pháp AJAX để phát triển ứng dụng web thế hệ tiếp theo.

Đang tải dữ liệu đơn giản

Điều này rất dễ dàng để tải bất kỳ dữ liệu tĩnh hoặc động nào bằng cách sử dụng JQuery AJAX. JQuery cung cấp phương thức load() để thực hiện công việc –

cú pháp

Đây là cú pháp đơn giản cho phương thức load() –

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

Đây là mô tả của tất cả các tham số –

  • URL – URL của tài nguyên phía máy chủ mà yêu cầu được gửi tới. Nó có thể là tập lệnh CGI, ASP, JSP hoặc PHP tạo dữ liệu động hoặc từ cơ sở dữ liệu.
  • dữ liệu – Tham số tùy chọn này đại diện cho một đối tượng có các thuộc tính được tuần tự hóa thành các tham số được mã hóa chính xác để được chuyển đến yêu cầu. Nếu được chỉ định, yêu cầu được thực hiện bằng phương thức POST . Nếu bỏ qua, phương thức GET được sử dụng.
  • gọi lại – Hàm gọi lại được gọi sau khi dữ liệu phản hồi đã được tải vào các phần tử của tập phù hợp. Tham số đầu tiên được truyền cho chức năng này là văn bản phản hồi nhận được từ máy chủ và tham số thứ hai là mã trạng thái.

Ví dụ

Hãy xem xét tệp HTML sau với mã hóa JQuery nhỏ –

Bản thử trực tiếp
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/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 yêu cầu Ajax tới tệp /jquery/result.html URL được chỉ định . Sau khi tải tệp này, tất cả nội dung sẽ được điền vào bên trong <div> được gắn thẻ giai đoạn ID . Giả sử, tệp /jquery/result.html của chúng ta chỉ có một dòng HTML –

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

Khi bạn nhấp vào nút đã cho, thì tệp result.html sẽ được tải.

 

Lấy dữ liệu JSON

Sẽ có trường hợp khi máy chủ trả về chuỗi JSON theo yêu cầu của bạn. Hàm tiện ích JQuery getJSON() phân tích cú pháp chuỗi JSON được trả về và làm cho chuỗi kết quả có sẵn cho hàm gọi lại dưới dạng tham số đầu tiên để thực hiện thêm hành động.

cú pháp

Đây là cú pháp đơn giản cho phương thức getJSON() –

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

Đây là mô tả của tất cả các tham số –

  • URL – URL của tài nguyên phía máy chủ được liên hệ thông qua phương thức GET.
  • data − Một đối tượng có các thuộc tính đóng vai trò là các cặp tên/giá trị được sử dụng để tạo chuỗi truy vấn được nối vào URL hoặc chuỗi truy vấn được định dạng sẵn và mã hóa.
  • gọi lại – Một chức năng được gọi khi yêu cầu hoàn thành. Giá trị dữ liệu thu được từ việc tiêu hóa nội dung phản hồi dưới dạng chuỗi JSON được chuyển làm tham số đầu tiên cho lệnh gọi lại này và trạng thái là tham số thứ hai.

Ví dụ

Hãy xem xét tệp HTML sau với mã hóa JQuery nhỏ –

Bản thử trực tiếp
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/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 JQuery getJSON() khởi tạo một yêu cầu Ajax tới tệp result.json URL được chỉ định . Sau khi tải tệp này, tất cả nội dung sẽ được chuyển đến chức năng gọi lại, chức năng này cuối cùng sẽ được điền vào bên trong <div> được gắn thẻ giai đoạn ID . Giả sử, tệp result.json của chúng tôi có nội dung được định dạng json sau –

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

Khi bạn nhấp vào nút đã cho, thì tệp result.json sẽ được tải.

 

Truyền dữ liệu lên Server

Nhiều lần bạn thu thập thông tin đầu vào từ người dùng và bạn chuyển thông tin đầu vào đó đến máy chủ để xử lý thêm. JQuery AJAX giúp dễ dàng truyền dữ liệu đã thu thập đến máy chủ bằng cách sử dụng tham số dữ liệu của bất kỳ phương thức Ajax khả dụng nào.

Ví dụ

Ví dụ này minh họa cách có thể chuyển đầu vào của người dùng tới một tập lệnh máy chủ web sẽ gửi lại kết quả tương tự và chúng tôi sẽ in tập lệnh đó –

Bản thử trực tiếp
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.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>

Đây là mã được viết trong tập lệnh result.php –

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

 

Các phương thức AJAX của JQuery

Bạn đã thấy khái niệm cơ bản về AJAX khi sử dụng JQuery. Bảng sau đây liệt kê tất cả các phương thức JQuery AJAX quan trọng mà bạn có thể sử dụng dựa trên nhu cầu lập trình của mình –

Sơ Không. Phương pháp & Mô tả
1 jQuery.ajax(option)Tải một trang từ xa bằng yêu cầu HTTP.
2 jQuery.ajaxSetup( option )Thiết lập cài đặt chung cho các yêu cầu AJAX.
3 jQuery.get( url, [data], [calback], [type] )Tải một trang từ xa bằng yêu cầu HTTP GET.
4 jQuery.getJSON( url, [data], [calback])Tải dữ liệu JSON bằng yêu cầu HTTP GET.
5 jQuery.getScript( url, [calback] )Tải và thực thi tệp JavaScript bằng yêu cầu HTTP GET.
6 jQuery.post( url, [data], [calback], [type] )Tải một trang từ xa bằng yêu cầu HTTP POST.
7 tải ( url, [data], [calback])Tải HTML từ một tệp từ xa và đưa nó vào DOM.
số 8 tuần tự hóa ( )Tuần tự hóa một tập hợp các phần tử đầu vào thành một chuỗi dữ liệu.
9 tuần tự hóaArray() Sê-ri hóa tất cả các biểu mẫu và thành phần biểu mẫu giống như phương thức .serialize() nhưng trả về cấu trúc dữ liệu JSON để bạn làm việc.

Sự kiện JQuery AJAX

Bạn có thể gọi các phương thức JQuery khác nhau trong vòng đời của tiến trình cuộc gọi AJAX. Dựa trên các sự kiện/giai đoạn khác nhau có sẵn các phương pháp sau –

Bạn có thể xem qua tất cả các Sự kiện AJAX .

STT. Phương pháp & Mô tả
1 ajaxComplete(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn thành.
2 ajaxStart(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX bắt đầu và không có yêu cầu nào đã hoạt động.
3 ajaxError(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX không thành công.
4 ajaxSend(callback) Đính kèm một hàm sẽ được thực thi trước khi gửi yêu cầu AJAX.
5 ajaxStop(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào tất cả các yêu cầu AJAX kết thúc.
6 ajaxSuccess(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn tất thành công.
STT. Phương pháp & Mô tả
1 ajaxComplete(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn thành.
2 ajaxStart(callback)  Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX bắt đầu và không có yêu cầu nào đã hoạt động.
3 ajaxError(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX không thành công.
4 ajaxSend(callback) Đính kèm một hàm sẽ được thực thi trước khi gửi yêu cầu AJAX.
5 ajaxStop(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào tất cả các yêu cầu AJAX kết thúc.
6 ajaxSuccess(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn tất thành công.
STT. Phương pháp & Mô tả
1 ajaxComplete(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn thành.
2 ajaxStart(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX bắt đầu và không có yêu cầu nào đã hoạt động.
3 ajaxError(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX không thành công.
4 ajaxSend(callback) Đính kèm một hàm sẽ được thực thi trước khi gửi yêu cầu AJAX.
5 ajaxStop(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào tất cả các yêu cầu AJAX kết thúc.
6 ajaxSuccess(callback) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn tất thành công.
STT. Phương pháp & Mô tả
1 ajaxComplete(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn thành.
2 ajaxStart(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX bắt đầu và không có yêu cầu nào đã hoạt động.
3 ajaxError(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX không thành công.
4 ajaxSend(gọi lại) Đính kèm một hàm sẽ được thực thi trước khi gửi yêu cầu AJAX.
5 ajaxStop(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào tất cả các yêu cầu AJAX kết thúc.
6 ajaxSuccess(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn tất thành công.
STT. Phương pháp & Mô tả
1 ajaxComplete(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn thành.
2 ajaxStart(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX bắt đầu và không có yêu cầu nào đã hoạt động.
3 ajaxError(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX không thành công.
4 ajaxSend(gọi lại) Đính kèm một hàm sẽ được thực thi trước khi gửi yêu cầu AJAX.
5 ajaxStop(gọi lại) Đính kèm một chức năng sẽ được thực thi bất cứ khi nào tất cả các yêu cầu AJAX kết thúc.
6 axSuccess(gọi lại) ajĐính kèm một chức năng sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn tất thành công.
Load More Related Articles
Load More By quangvu
Load More In jQuery

Check Also

Tự làm web chatGPT đơn giản cho phép dùng nhiều OpenAI key

Trong thời đại công nghệ phát triển như hiện nay, chatbot đang dần trở thành một giải pháp…