Bài 02. Ajax sử dụng Jquery

Có thể nói sự ra đời của JQuery được ví như là tuyệt phẩm thời gian bấy giờ. Bản thân mình bắt đầu sử dụng JQuery từ version 1.4.2 mình đã thấy nó tuyệt vời rồi. Nói chung các ưu điểm của Jquery thì có lẽ các bạn đã biết thì mình cũng không bàn luận về nó nữa nội dung bài này mình muốn luận về JQuery Ajax.

Thực chất thì việc xây dựng những dòng code ajax trong JQuery nó đơn giản hơn rất là nhiều so với việc xây dựng các dòng code trong javascript thuần. Lý do là bởi vì JQuery đã hỗ trợ bạn bằng cách họ xây dựng sẵn cho chúng ta các đối tượng và các hàm. Công việc cảu chúng ra cũng đơng giản hơn đó là truyền các đối số đầu vào và xử lý yêu cầu và trả về kết quả.

Trong JQuery hỗ trợ bạn 3 phương thức thực thi Ajax.

$.get(): Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên server theo phương thức GET
$.post(): Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên server theo phương thức POST
$.ajax() tổng quát. Với hàm này, ta có thể tùy chỉnh cấu hình, thêm bớt các thông số chứ không bị bó hẹp như hai hàm trên.Chỉ cần sử dụng 1 hàm này có thể đáp ứng các yêu cầu về thực thi ajax.

Thì để có thể bắt đầu với JQuery ajax thì đầu tiền bạn cần tải thư viện của JQuery và bạn chèn vào đầu thể head trong file HTML của bạn.

Lưu ý: Các bạn nên đặt thư viện JQuery ở trước các file .js, đoạn mã, hoặc các thư viện khác nếu bản thân nó cũng chạy dựa vào nền tảng của JQuery.

1. Download thư viện Jquery.

Bạn có thể download trực tiếp từ trang https://jquery.com về rồi copy thư viện vào project của bạn. Hoặc bạn cũng có thể sử dụng luôn từ các libraries từ trên mạng.

Google Hosted Libraries: https://developers.google.com/speed/libraries/
CDNJS: https://cdnjs.com/libraries/jquery/
Gibhub : https://github.com/jquery/jquery

Ví du:

1	`script type="text/javascript"` `src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/script`

Lời khuyên: Các bạn cứ download về và copy vào project của mình. Nhỡ đâu một ngày đẹp trời mấy ông này vì một lý do nào đó hoặc bị hasker Việt Nam tấn công cho quay lơ thì ứng dụng của bạn cũng quay lơ theo họ.

2. Cú pháp.

Trong khuôn khổ nội dung bài viết này mình sẽ nói về hàm $.ajax() tổng quát trước.

$.ajax({
    type: '(POST|GET)',
    url: [Đường_dẫn_tới_file[hàm]_xử_lý_phía_sever_side],
    data: [Truyền_biến],
    dataType: [Kiêu_dữ_liệu],
    success: function(html) {
        // Xử lý dữ liệu trả về
        // Hoặc đưa ra thông báo
        // khi thực hiện thành công
    },
    error: function() {
        // Xử lý hoặc đưa ra thông báo 
        //thực hiện thành công
    }
});

Trong đó:

type: Kiểu truyền dữ liệu,có thể là POST hoặc GET.
url: Đường dẫn tới file[hàm] xử lý dữ liệu phía server-side,Tương tự thuộc tính action trong form
data: Tập hợp các biến dữ liệu gửi lên server-side
dataType: Quy định kiểu dữ liệu trả về.
success: Hàm xử lý khi thành công
error: Hàm xử lý khi có lỗi xảy ra

(+) Thuộc tính data chấp nhận hai(hoặc nhiều hơn) kiểu dữ liệu là chuỗi[QUERY_STRING] hoặc mảng.

Ví dụ:

1	`$data =` `'full_name=Nguyến Văn Aage=20city=Hà Nội';`

Hoặc

$data = {
    'full_name' : 'Nguyến Văn A',
    'age'   : 20,
    'city'  : 'Hà Nội'
}

(+) Thuộc tính datatype chấp nhận các kiểu dữ liệu là:

html: Kiểu văn bản có chứa mã HTML
text: Kiểu Văn bản thuần túy
json: Kiểu dữ liệu JSON
xml: Kiểu dữ liệu XML
script: Kiểu này mình chưa dùng bao giờ nên nói thực là chưa biết.
Hoặc kết hợp text/html(Cơ bản là 4 kiểu phía trên)

Ngoài ra nó còn có một số các hàm, tham số khác bạn có thể xem thêm tại http://api.jquery.com/jquery.ajax/

asynchronously: Gửi yêu cầu bất đồng bộ
beforeSend(function): Hàm gọi trước khi thực hiện gửi yêu cầu.
cache: Có cho phép cache hay không. Mặc định là có.
crossDomain: Hiểu một cách nôm na đó là thuật ngữ dùng để chỉ việc tương tác giữa các website khác Origin với nhau.
...vvv

3. Ví dụ đơn giản.

Cũng giống với ví dụ trước bạn cũng tạo ra hai file là.

index.html: File này chưa các điều khiển HTML, Javascript.
result.php: File này sẽ xử lý các yêu cầu(request) và trả về kết quả(response)

File index.html

html
head
titleSimple Ajax Example/title
script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/script
script type="text/javascript"
function xmlhttpPost() {
    $.ajax({
        type : "POST",
        url : "result.php",
        data : {'w':$('input[name=word]').val()},
        dataType:"text",
        success : function (result){
            $('#result').html(result);
        }
    });
}
/script
/head
body
form name="f1"
  p
    labelNhập vào một câu/label
    input name="word" type="text"
    input value="Go" type="button" onclick='JavaScript:xmlhttpPost(); return false;'
  /p
  div id="result"/div
/form
/body
/html

File result.php

?php 
    $w = isset($_POST['w']) ? trim($_POST['w']) : 'Empty';
    echo 'Bạn đã nhập vào câu: strong'.$w.'strong'; die();
?

Xem kết quả

4. Tổng kết.

Trong bài viết này mình đã giới thiệu cơ bản sử dụng JQuery kết hợp với ajax. Độ phức tạp của các câu lệnh còn phụ thuộc vào bài toán. Nhưng có lẽ đây là cách đơng giản để bạn lắm được những kiến thức cơ bản về JQuery ajax.