Tìm hiểu tổng quan về JQuery Ajax

Bài đăng này đã không được cập nhật trong 8 năm

1. AJAX là gì ?

Ajax = Asynchoronous JavaScript và XML

Nói ngắn gọn , Ajax là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang.Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến server và xử lý dữ liệu server trả về.

Lấy một ví dụ như sau : khi một người dùng viết một nhận xét trên bài viết đăng trên trang Facebook. Sau khi người dùng gửi nhận xét thành công trang Facebook mà người đó đang truy cập cần phải được cập nhật để hiển thị nhận xét vừa mới được tạo ra này. Nếu load lại toàn bộ trang mà người dùng đang truy cập thì sẽ không hiệu quả do tất cả những gì chúng ta muốn là hiển thị nhận xét mới được tạo ra, Ajax được tạo ra để giải quyết vấn đề này, thay vì tải lại toàn bộ trang trình duyệt sẽ chỉ l những phần được thay đổi để tiết kiệm thời gian chờ đợi một lượng thông tin lớn về từ server .

Một số ứng dụng sử dụng Ajax như : Gmail , Google Maps , Youtube , Facebook …

2. JQuery Ajax

Jquery cung cấp một số phương thức để thực hiện các chức năng ajax. Chúng ta có thể yêu cầu các text, HTML, XML và JSON từ server sử dụng cả giao thức HTTP GET và HTTP POST, chúng ta cũng có thể lấy dữ liệu từ bên ngoài trực tiếp vào trong phần tử được chọn.

a, Phương thức jquery load ()

Phương thức load() lấy dữ liệu từ server và trả dữ liệu cho phần tử được chọn.

Cú pháp:


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

URL: mà bạn muốn lấy dữ liệu.
Data: cặp key/value gửi đi cùng với yêu cầu.
Callback: tên của hàm sẽ được thực thi sau khi phương thức load hoàn thành.

Ví dụ : Ta có file demo_test.txt


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

Load nội dung của file "demo_test.txt" vào trong một div với id = div1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt");
    });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

b, Phương thức Post trong JQuery Ajax

Có tác dụng lấy dữ liệu từ server bằng phương thức HTTP POST REQUEST

Cú pháp:


$(selector).post(URL,data,function(data,status,xhr),dataType)

url: required , đường dẫn đến file cần lấy thông tin
data: không bắt buộc ,là một đối tượng object gồm các key : value sẽ gửi lên server
function(data, status , xhr): là function sẽ xử lý khi thực hiện thành công với các parameters:
- data : bao gồm các dữ liệu trả về từ request
- status : gồm trạng thái request (“success” , “notmodified” , “error” , “timeout” , or “parsererror”)
- xhr : gồm các đối tượng XMLHttpRequest
dataType: là dạng dữ liệu trả về. (text, json, script, xml,html,jsonp )

Ví dụ : Ta có file "demo_test_post.asp"

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

Tham số đầu tiên của $ .post () là URL nhận request ("demo_test_post.asp)
Tham số thứ hai là data :gửi dữ liệu name và city thông qua phương thức post . Trang "demo_test_post.asp" đọc các dữ liệu , xử lý chúng, và trả về một kết quả.
Tham số thứ hai là một function call back, tham số callback đầu tiên data lưu nội dung của các trang yêu cầu, và tham số thứ hai status giữ trạng thái của yêu cầu.Sau khi request được trả về status là success

c, Phương thức Get trong Jquery Ajax

Là phương pháp lấy dữ liệu từ server bằng phương thức HTTP GET

Tương tự như phương thức Post , phương thức get có cú pháp là :


$.get(URL,data,function(data,status,xhr),dataType)

Ví dụ :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test.asp", function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

Tham số đầu tiên của $ .get () là URL file nhận request ( "demo_test.asp").
Tham số thứ hai là một function call back, tham số callback đầu tiên data lưu nội dung của các trang yêu cầu, và tham số thứ hai status giữ trạng thái của yêu cầu.Sau khi request được trả về status là success .

Thank you for reading !!

Mục lục