Học ajax cơ bản

Học ajax cơ bản
5 (100%) 2 votes

Nếu bạn xác định làm web thì bắt buộc bạn phải biết kỹ thuật Ajax, nó rất quan trọng cho dù bây giờ bạn chưa hiểu được tầm quan trọng của nó thì mình cũng khuyên bạn nên làm được nó. Trong bài viết này mình sẽ giúp bạn hiểu một cách tổng quan nhất về cơ chế Ajax.

Vậy nó hoạt động thế nào? Cần những hàm nào trong jQuery?

1. Ajax là gì?

Ajax là Asynchronous JavaScript and XML một nhóm công nghệ web nó giúp chúng ta load không đồng bộ trên một trang web. Ví dụ khi bạn xem một tin tức thì sẽ thường thấy trạng thái của trình duyệt xoay xoay nhưng có cái ô comment bên dưới khi bạn bình luận thì nó hiện ra ngay, nó không tải lại toàn bộ trang mà chỉ thay đổi tại cái khu vực mà bạn thấy thôi. Đấy đại khái nó là như thế.

Học ajax cơ bản
Học ajax cơ bản

 

2. Học ajax cơ bản

Dưới đây mình sẽ hướng dẫn bạn tạo một ứng dụng ajax đơn giản là khi click vào button VIEW sau 5s thì hiển thị 1 đoạn text lên. Chú ý là các bạn có thể thực hiện việc ajax này bằng javascript thuần (sử dụng các phương thức trong lớp XMLHttpRequest) hoặc sử dụng thư viện jQuery cái mà cũng được viết bằng js. Trong ví dụ này mình cùng các bạn đi thực hiện nó thông qua jQuery. Nếu bạn muốn tìm hểu thêm cách thực hiện bằng js thuần thì xem thêm ở đây https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest và https://hieusensei.com/ajax-voi-javascript-va-jquery .

Đầu tiên chúng ta include thư việc jQuery, mình gọi như thế này là mặc định nó sẽ include version mới nhất

Sau đó thêm đoạn này vào thẻ body:

Sponsored by dotrinh

Download  Free Premium 1200 Japanese Phrase  App for Android

Thẻ dev đầu tiên chúng ta để hiển thị kết quả trang php trả về, button thứ 2 là nút để bạn click

Và bây giờ đến đoạn quan trọng, bạn cho đoan script này vào bên trong thẻ head (trước thẻ body)

Ở đây chúng ta cần đảm bảo rằng trang của chúng ta đã load hết nên chúng ta đặt code bên trong hàm này

Sau đó chúng ta sẽ tạo một event click chuột vào button view, vậy khi button view được click thì chúng ta sẽ xử lý cái gì?

  • khai báo 1 biến có nội dung là “xin chao”

  • Sử dụng hàm ajax để gửi biến ấy sang cho file php xử lý, trong hàm này cần các tham số như:

  • url: tức là nơi sẽ xử lý dữ liệu.

  • type: chính là phương thức đẩy dữ liệu đi (POST hoặc GET)

  • data: dữ liệu nào sẽ được đẩy sang, ở đây chúng ta đấy biến data_test sang và cần gán nó vào 1 tham số string để sang bên php chúng ta có thể lấy giá trị string bằng cách $_POST[‘string’] nếu type là post còn $_GET[‘string’] với type là get.

  • Hàm success sẽ thực hiện khi chúng ta thực hiện thành công. Ở đây nếu thành công chúng ta hẹn giờ 5s để nó set content cho thẻ có id là #ajaxphp-results

  • Hàm error sẽ thực hiện khi công việc thất bại. ở đây chúng ta đơn giản chỉ console.log ra thôi, cái này bạn phải nhấn F12 mới thấy được.

Đây là code đầy đủ trang html

 3. Xử lý php

Còn đây là nội dung file controller.php, file này có nhiệm vụ mã hóa sang dạng json và hiển thị (giống như return đối với hàm) nó ra để cho bên hàm success hoặc error của ajax dễ xử lý.

Rất đơn giản phải không ạ? Nếu bạn chưa hiểu chỗ nào hãy comment bên dưới chúng ta cùng thảo luận :)

DEMO

Các bài viết không xem thì tiếc:

Chia sẻ là sexy

Đô Trịnh

Một lập trình viên vui vẻ, hòa đồng, luôn sống tích cực và anh ấy quay tay khỏe và khéo trong môn bi lắc :)

Bình luận qua khung của website

8 Bình luận trong bài "Học ajax cơ bản"

Nhận thông báo:
avatar
Sắp xếp theo::   Mới nhất | Cũ nhất | Thích nhiều nhất
Thang Vu
Khách đến chơi nhà

Link demo chết rồi bạn ơi!

Thach Le
Khách đến chơi nhà

Mình không rành PHP lắm nên cho mình hỏi là bạn xử lý data gửi lên như thế nào và trả lại gì vậy (kết quả :D)

truongbt
Khách đến chơi nhà

Ajax là load không đồng bộ. vậy load không đông bộ là gì a ơi, nó khác gì với load đồng bộ.
em chưa phân biệt được. mong chỉ bảo

wpDiscuz