AJAX jQuery

Nhập môn AJAX

Công nghệ AJAX ra đời từ năm 2005, viết tắt của Asynchronous JavaScript and XML, cho phép các trang web ở phía client trao đổi dữ liệu với server mà không làm gián đoạn giao diện người dùng. Các trình duyệt web tương tác với server bằng cách tạo ra các yêu cầu cho trang thông qua hai phương thức là POST và GET. Server xử lí yêu cầu và gửi lại kết quả (HTML, script, css) đến trình duyệt. Mô hình truyền thống như sau:

Nhìn vào mô hình trên chúng ta thấy có hai trở ngại chính là:

Do toàn bộ trang được gửi lại từ server nên tạo ra một gánh nặng không cần thiết. Ví dụ trong Contact Form của chúng ta, mỗi lần người dùng nhập thông tin và nhấn Send thì toàn bộ trang sẽ được gửi đến browser, trong khi chỉ có một vài thông tin người dùng nhập là thay đổi còn phần lớn các thành phần như menu, banner, table,…không đổi.
Cũng vì toàn bộ trang được gửi trở lại từ server nên những cái đã có trong quá trình tương tác trước đó sẽ được thay bằng những cái mới, quá trình thay thế này sẽ làm cho trang cảm giác như “nhấp nháy”, một hiệu ứng gây khó chịu cho người dùng.

Công nghệ AJAX ra đời để giải quyết những trở ngại trên. Một số lợi ích của AJAX:

Cho phép đọc – gửi dữ liệu đến web server
Chỉ một phần trang (được yêu cầu) được gửi trở lại từ web server thay vì toàn bộ trang.

Với AJAX, mô hình trao đổi giữa web browsers và web servers sẽ như sau:

AJAX jQuery

jQuery cung cấp một vài phương thức để thự hiện chức năng AJAX. Với các phương thức này, chúng ta có thể yêu cầu dữ liệu kiểu text, XML, JSON, HTML từ một server từ xa bằng cách dùng HTTP POST và GET – Các phần tử được chọn trong trang có thể nhận trực dữ liệu từ xa mà không cần tải lại toàn bộ trang. Danh sách đầy đủ các phương thức AJAX jQuery có thể tham khảo tại http://api.jquery.com/?s=ajax . Chương này chỉ tìm hiểu các phương thức cơ bản:

load
get
post

Phương thức load

Phương thức load là phương thức đơn giản nhưng rất hiệu quả. load có thể lấy dữ liệu từ server và đặt dữ liệu này trong các phần tử được chọn. Cú pháp:

Phương thức	Chức năng
$(selector).load(URL,data,callback)	Nhận dữ liệu từ URL và đặt trong phần tử selector. data là thông tin kèm theo yêu cầu theo định dạng cặp key/value; callback là hàm sẽ thực thi sau khi phương thức *load* hoàn thành. data và callback là hai tham số tuỳ chọn.

Các ví dụ sau sử dụng server cục bộ (localhost) tại cổng 8080. Gói phần mềm sử dụng là XAMPP v3.2.1 chứa web server Apache, MySQL và nhiều dịch vụ khác:

Ví dụ 1

– Tạo tập tin AJAXData.txt có nội dung sau:


<h2>jQuery and AJAX is FUN!!!</h2>

<p id="p1">This is some text in a paragraph.</p>

– Tạo tập tin AJAX_Load.html có nội dung HTML:


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

<button>Get External Content</button>

Và nội dung jQuery:


$(document).ready(function(){

    $("button").click(function(){

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

    });

});

– Lưu hai tập tin trong thư mục OOP_PHP trong thư mục htdocs (C:\xampp\htdocs\OOP_PHP) của XAMPP.

– Mở Chrome và gõ địa chỉ localhost:8080/OOP_PHP/AJAX_Load.html:

Nhấn nút Get External Content:

Ví dụ 2

Giả sử từ tập tin AJAXData.txt chúng ta chỉ cần lấy nội dung từ phần tử p có id=”p1″, đoạn mã jQuery trong tập tin AJAX_Load.html được điều chỉnh như sau:


$("button").click(function(){

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

});

Thực thi tập tin AJAX_Load.html

Nhấn nút Get External Content:

Ví dụ 3: sử dụng callback

Phương thức load() có thể sử dụng hàm khác như một tham số (callback) – hàm này sẽ thực thi khi load hoàn thành. Ví dụ đoạn mã jQuery của tập tin AJAX_Load.html được điều chỉnh như sau:


$("button").click(function(){

    $("#div1").load("AJAXData.txt", function(){

       alert("Load completed!");

    });

});

Hàm callback có thể nhận các tham số:


$(selector).load(URL , function( response, status, xhr ){

    if(statusTxt == "success")

        // code

    if(statusTxt == "error")

       // code

 });

response: chứa nội dung kết quả nếu load thành công
status: chứa trạng thái lời gọi (nhận một trong các giá trị success”, “notmodified”, “error”, “timeout”, or “parsererror”)
xhr: chứa đối tượng XMLHttpRequest

Ví dụ đoạn mã jQuery của tập tin AJAX_Load.html được điều chỉnh như sau:


$("button").click(function(){

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

         function(responseTxt, statusTxt, xhr){

            if(statusTxt == "success")

               alert("External content loaded successfully!");

            if(statusTxt == "error")

               alert("Error: " + xhr.status + ": " + xhr.statusText);

     });

});

Ví dụ gửi thông tin kèm theo yêu cầu cần điều chỉnh đoạn mã jQuery của tập tin AJAX_Load.html:


$("button").click(function(){

   $("#div1").load("AJAXjQuery.php",{key:"hello"});

});

Tạo tập tin AJAXjQuery.php có nội dung như sau:


<?php

$key = $_POST['key'];

if ($key == "hello")

   echo "I am hello";

else

   echo "Sorry";

?>

– Thực thi tập tin AJAX_Load.html

Nhấn button:

Phương thức get/post

HTTP (Hypertext Transfer Protocol) là giao thức được thiết kế để giao tiếp giữa client (có thể là web browsers) và server (có thể là một ứng dụng trên máy tính host một website như Apache, IIS). HTTP làm việc theo cơ chế yêu cầu – đáp ứng (request – response) nhằm giao tiếp giữa client và server theo hai phương thức chủ yếu:

GET: yêu cầu dữ liệu từ một nguồn xác định
POST: submit dữ liệu đã được xử lý đến một nguồn cụ thể

Bảng sau sẽ so sánh giữa GET và POST

GET	POST
Sẽ không có gì thay đổi khi nhấn nút back hay reload trang web	Dữ liệu sẽ được gửi lại (re-submitted) server (và trình duyệt sẽ thông báo đến người dùng)
Có thể được bookmark đến trình duyệt	Không thể được bookmark
Dữ liệu có thể được lưu trong bộ nhớ tạm (cache)	Dữ liệu không được lưu trong bộ nhớ cache
Kiểu mã hoá: application/x-www-form-urlencoded	Kiểu mã hoá: application/x-www-form-urlencoded hay multipart/form-data. Dùng mã hoá nhiều phần cho dữ liệu nhị phân
Các tham số có thể được lưu lại trong History của trình duyệt	Các tham số không được lưu lại trong History của trình duyệt
GET gửi dữ liệu bằng cách thêm dữ liệu đến URL nên chiều dài của dữ liệu là hạn chế vì chiều dài của URL là hạn chế (2048 kí tự).	Vì dữ liệu được thêm trong phần thân của thông điệp HTTP nên chiều dài dữ liệu sẽ không hạn chế.
Chỉ cho phép các kí tự mã ASCII	Không hạn chế và chấp nhận cả dữ liệu nhị phân.
Vì dữ liệu là một phần của URL nên sẽ không an toàn vì có thể được thấy bởi mọi người và có thể bị can thiệp để thay đổi nội dung hay chèn mã độc hại. Không nên gửi mật khẩu hay các thông tin nhạy cảm bằng GET.	An toàn hơn vì dữ liệu không được lưu trong History hay các tập tin log ở web server và dữ liệu được lưu trong phần thân thông điệp HTTP nên sẽ không được thấy trong URL.

(Có thể tham khảo thêm về giao thức HTTP tại https://www.w3schools.com/tags/ref_httpmethods.asp )

jQuery cung cấp hai phương thức $.get() và $.post() tương ứng với HTTP GET và HTTP POST.

Phương thức $_get()

Yêu cầu dữ liệu từ server dùng HTTP GET. Cú pháp:

Phương thức	Chức năng
$.get(URL,callback)	Nhận dữ liệu từ nguồn URL. callback là hàm sẽ thực thi sau khi phương thức *get* thực thi thành công. Hàm callback có thể có hai tham số là *status* là trạng thái yêu cầu và *data* là nội dung của trang được yêu cầu.

Ví dụ nội dung tập tin AJAX_Load.html như sau:

Mã HTML


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

<div id="demo"> </div>

<button>Get External Content</button>

Mã jQuery


$(document).ready(function(){

     $("button").click(function(){

        $.get("AJAXjQuery.php",function(data, status){

          if(status=="success")

             $("#demo").append(data);

          else

             $("#demo").append("<h2>ERROR!</h2>");

       });

    });
  
});

Nội dung tập tin AJAXjQuery.php đơn giản như sau:


<h2>Hello World!</h2>

Thực thi tập tin AJAX_Load.html

Nhấn nút

Phương thức $_post()

Yêu cầu dữ liệu từ server dùng HTTP POST. Cú pháp:

Phương thức	Chức năng
$.post(URL,data,callback)	Nhận dữ liệu từ nguồn URL. data là dữ liệu gửi kèm theo yêu cầu, callback là hàm sẽ thực thi sau khi phương thức *post* thực thi thành công. Hàm callback có thể có hai tham số là *status* là trạng thái yêu cầu và *data* là nội dung của trang được yêu cầu.

Ví dụ nội dung tập tin AJAX_Load.html như sau:

Mã HTML


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

<div id="demo"> </div>

<button>Get External Content</button>

Mã jQuery


$(document).ready(function(){

   $("button").click(function(){

        $.post("AJAXjQuery.php",

             {FirstName:"Ngoc",LastName:"Minh"},

                  function(data, status){

                     if(status=="success")

                       $("#demo").append(data);

                     else

                      $("#demo").append("<h2>ERROR!</h2>");

           });

    });

});

Nội dung tập tin AJAXjQuery.php đơn giản như sau:


<h2>Hello World!

<?php

   $fname = $_POST['FirstName'];

   $lname = $_POST['LastName'];

   echo $fname." ".$lname;

?>

</h2>

Thực thi tập tin AJAX_Load.html

Nhấn nút

Xem thêm:

< Học jQuery

Trần Ngọc Minh Notes

Stay hungry, stay foolish!

AJAX jQuery

Nhập môn AJAX

AJAX jQuery

Phương thức load

Phương thức get/post

Phương thức $_get()

Phương thức $_post()

Trần Ngọc Minh

Ý kiến bài viết Hủy trả lời

BÀI MỚI NHẤT

Trần Ngọc Minh Notes

Stay hungry, stay foolish!

AJAX jQuery

Nhập môn AJAX

AJAX jQuery

Phương thức load

Phương thức get/post

Phương thức $_get()

Phương thức $_post()

Chia sẻ:

Thích bài này:

Related

Trần Ngọc Minh

Ý kiến bài viết Hủy trả lời

BÀI MỚI NHẤT