jQuery AJAX

assets/uploads/original/2014-04-27-08-44-19-0.jpg assets/uploads/original/2014-04-27-08-43-24-0.jpg DẠY NGHỀ THANH NIÊN NHÀ HÀNG TIỆC CƯỚI HOÀNG LONG CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ TIN HỌC DUY HẰNG
jQuery AJAX

Đăng bởi: Kyle Dang

Ngày đăng: 23/09/2014

Danh mục: Jquery

Bình luận: 0

Tags: Jquery, Ajax, Căn bản, Tutorial

AJAX là gì? 

AJAX = Asynchronous JavaScript và XML. 

Trong ngắn hạn; AJAX là về tải dữ liệu ở chế độ nền và hiển thị nó trên trang web, mà không cần tải lại toàn bộ trang. 

Ví dụ về các ứng dụng sử dụng AJAX: Gmail, Google Maps, Youtube, Facebook và các tab. 

Điều gì về jQuery và AJAX? 

jQuery cung cấp một số phương pháp cho các chức năng AJAX. 

Với các phương pháp jQuery AJAX, bạn có thể yêu cầu văn bản, HTML, XML, JSON hoặc từ một máy chủ từ xa bằng cách sử dụng cả hai HTTP Get và HTTP viết - Và bạn có thể tải các dữ liệu bên ngoài trực tiếp vào các phần tử HTML được chọn của trang web của bạn!

Note

Nếu không có jQuery, AJAX mã hóa có thể là một chút khó khăn! 

Viết mã AJAX thường xuyên có thể là một chút khó khăn, bởi vì các trình duyệt khác nhau có cú pháp khác nhau để thực hiện AJAX. Điều này có nghĩa rằng bạn sẽ phải viết thêm mã để kiểm tra cho các trình duyệt khác nhau. Tuy nhiên, nhóm nghiên cứu jQuery đã được chăm sóc này cho chúng ta, để chúng ta có thể viết các chức năng AJAX chỉ với một dòng mã.

jQuery load() 

Phương thức jQuery load() là một phương pháp AJAX đơn giản, nhưng mạnh mẽ. 

Phương thức load() tải dữ liệu từ một máy chủ và đặt các dữ liệu trở lại vào các yếu tố lựa chọn.

$(selector).load(URL,data,callback);

Tham số URL cần xác định URL mà bạn muốn tải. 

Các tham số dữ liệu tùy chọn xác định một tập hợp các chuỗi truy vấn cặp khóa / giá trị để gửi cùng với yêu cầu. 

Tham số tùy chọn gọi lại là tên của một chức năng được thực hiện sau khi tải () được hoàn thành. 

Dưới đây là nội dung của tập tin ví dụ: "demo_test.txt":

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

 Ví dụ sau tải các nội dung của tập tin "demo_test.txt" vào một thẻ <div>:

$("#div1").load("demo_test.txt");

Nó cũng có thể để thêm một bộ chọn jQuery để tham số URL. 

Ví dụ sau tải nội dung của các phần tử với id = "p1", bên trong các tập tin "demo_test.txt", vào một thẻ <div>:

$("#div1").load("demo_test.txt #p1");

 

Các tham số gọi lại tùy chọn chỉ định một chức năng gọi lại để chạy khi tải () được hoàn thành. Các chức năng gọi lại có thể có các thông số khác nhau: 

  • responseTxt - chứa các nội dung kết quả nếu cuộc gọi thành công 
  • statusTxt - chứa các trạng thái của cuộc gọi 
  • XHR - chứa các đối tượng XMLHttpRequest 

Ví dụ sau đây sẽ hiển thị một hộp cảnh báo sau khi tải () phương pháp hoàn tất. Nếu tải () phương pháp đã thành công, nó sẽ hiển thị "nội dung bên ngoài nạp thành công!", Và nếu không nó sẽ hiển thị một thông báo lỗi:

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

HTTP Yêu cầu: GET so với POST 

Hai phương pháp thường được sử dụng cho một yêu cầu phản ứng giữa máy khách và máy chủ là: GET và POST. 

  • GET - Các yêu cầu dữ liệu từ một nguồn tài nguyên quy định 
  • POST - dữ liệu nộp để được xử lý đến một tài nguyên quy định 
  • GET là cơ bản được sử dụng để chỉ nhận được (lấy) một số dữ liệu từ máy chủ. Lưu ý: Phương pháp GET có thể trả lại dữ liệu lưu trữ. 

POST cũng có thể được sử dụng để lấy dữ liệu từ máy chủ. Tuy nhiên, phương thức POST KHÔNG BAO GIỜ lưu trữ dữ liệu, và thường được sử dụng để gửi dữ liệu cùng với các yêu cầu.

 Để tìm hiểu thêm về GET và POST, và sự khác biệt giữa hai phương pháp, xin vui lòng đọc phương pháp của chúng tôi chương HTTP GET và POST.

jQuery $.get() 

Phương thức $ get () yêu cầu dữ liệu từ máy chủ với một yêu cầu HTTP GET.

$.get(URL,callback);

Tham số URL cần xác định URL bạn muốn yêu cầu. 

Tham số tùy chọn gọi lại là tên của một chức năng được thực hiện nếu yêu cầu thành công. 

Ví dụ sau đây sử dụng $.get () để lấy dữ liệu từ một tập tin trên máy chủ:

 $("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

Tham số đầu tiên của $.get () là địa chỉ chúng tôi muốn yêu cầu ("demo_test.php"). 

Tham số thứ hai là một chức năng gọi lại. Các tham số gọi lại lần đầu tiên tổ chức nội dung của trang được yêu cầu, và tham số thứ hai gọi lại giữ trạng thái của yêu cầu. 

Lời khuyên: Đây là cách các tập tin PHP trông giống như ("demo_test.php"):

 <?php
echo "This is some text from an external ASP file.";
?>

 jQuery $.post()

Phương pháp $ .post () yêu cầu dữ liệu từ máy chủ bằng cách sử dụng một yêu cầu HTTP POST.

$.post(URL,data,callback);

Tham số URL cần xác định URL bạn muốn yêu cầu. 

Các tham số dữ liệu tùy chọn xác định một số dữ liệu để gửi cùng với yêu cầu. 

Tham số tùy chọn gọi lại là tên của một chức năng được thực hiện nếu yêu cầu thành công. 

Ví dụ sau đây sử dụng $ .post () để gửi một số dữ liệu cùng với các yêu cầu:

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

 

Tham số đầu tiên của $ .post() là địa chỉ chúng tôi muốn yêu cầu ("demo_test_post.php"). 

Sau đó chúng tôi vượt qua trong một số dữ liệu để gửi cùng với yêu cầu (tên và thành phố). 

Các kịch bản PHP trong "demo_test_post.php" đọc thông số, xử lý chúng, và trả về kết quả. 

Tham số thứ ba là một chức năng gọi lại. Các tham số gọi lại lần đầu tiên tổ chức nội dung của trang được yêu cầu, và tham số thứ hai gọi lại giữ trạng thái của yêu cầu. 

Lời khuyên: Đây là cách các tập tin PHP trông giống như ("demo_test_post.php"):

<?php
$name = $_POST["name"];
$city = $_POST["city"];
echo "Dear "  . $name . ". ";
echo "Hope you live well in " . $city . ".";
?>