07/09/2018, 15:20

Giới thiệu về AJAX trong JavaScript

AJAX được xem như là giải pháp dành cho nhà phát triển, bởi vì bạn có thể: Đọc dữ liệu từ máy chủ web – sau khi trang đã tải Cập nhật trang web mà không cần tải lại trang Gửi dữ liệu đến một máy chủ web – trong nền Ví dụ về AJAX: Giải thích ví dụ ...

AJAX được xem như là giải pháp dành cho nhà phát triển, bởi vì bạn có thể:

  • Đọc dữ liệu từ máy chủ web – sau khi trang đã tải
  • Cập nhật trang web mà không cần tải lại trang
  • Gửi dữ liệu đến một máy chủ web – trong nền

Ví dụ về AJAX:

Giải thích ví dụ trên

Trang HTML:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

Trang HTML chứa một phần <div> và một <button>. Phần <div> được sử dụng để hiển thị thông tin từ máy chủ. Nút <button> sẽ gọi một hàm (nếu nó được nhấp vào). Hàm yêu cầu dữ liệu từ một máy chủ web và hiển thị:

Hàm loadDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

AJAX là gì?

AJAX = Asynchronous JavaScript And XML (không đồng bộ JavaScript và XML). Đây không phải là một ngôn ngữ lập trình.

AJAX chỉ sử dụng một sự kết hợp của:

  • Một trình duyệt được xây dựng trong XMLHttpRequest đối tượng (để yêu cầu dữ liệu từ một máy chủ web)
  • JavaScript và HTML DOM (để hiển thị hoặc sử dụng dữ liệu)

AJAX là một tên gây hiểu nhầm. Các ứng dụng AJAX có thể sử dụng XML để vận chuyển dữ liệu, nhưng phổ biến như nhau để truyền dữ liệu dưới dạng văn bản thuần hoặc văn bản JSON.

AJAX cho phép các trang web được cập nhật không đồng bộ bằng cách trao đổi dữ liệu với một máy chủ web đằng sau hậu trường. Điều này có nghĩa là có thể cập nhật các phần của một trang web mà không cần tải lại toàn bộ trang.

Cách thức AJAX hoạt động

  1. Một sự kiện xảy ra trong một trang web (trang được tải, một nút được nhấp vào)
  2. Một đối tượng XMLHttpRequest được tạo bằng JavaScript
  3. Đối tượng XMLHttpRequest gửi yêu cầu đến một máy chủ web
  4. Máy chủ xử lý yêu cầu
  5. Máy chủ gửi phản hồi về trang web
  6. Phản hồi đã được đọc bởi JavaScript
  7. Hành động thích hợp (như cập nhật trang) được thực hiện bởi JavaScript
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
Bài liên quan

Giới thiệu về JSON trong JavaScript

JSON được viết tắt của JavaScript Object Notation. JSON là một cú pháp để lưu trữ và trao đổi dữ liệu. JSON là văn bản, được viết bằng ký hiệu đối tượng JavaScript. Trao đổi dữ liệu Khi trao đổi dữ liệu giữa trình duyệt và máy chủ, dữ liệu chỉ có thể là văn ...

Vũ Văn Thanh viết 15:20 ngày 07/09/2018

Giới thiệu về AJAX trong JavaScript

AJAX được xem như là giải pháp dành cho nhà phát triển, bởi vì bạn có thể: Đọc dữ liệu từ máy chủ web – sau khi trang đã tải Cập nhật trang web mà không cần tải lại trang Gửi dữ liệu đến một máy chủ web – trong nền Ví dụ về AJAX: Giải thích ví dụ ...

Bùi Văn Nam viết 15:20 ngày 07/09/2018

Giới thiệu về Promise trong JavaScript (ES6)

Xin chào mọi người, Chắc hẳn trong mỗi người lập trình viên chúng ta, Khi lập trình với ngôn ngữ Javascript đều thấy được một vấn đề là Bất đồng bộ. Để giải quyết vấn đề này, cách cơ bản nhất là chúng ta sử dụng Callback. Nhưng có một vấn đề xảy ra, đó là việc sử dụng qua nhiều callback dẫn dến ...

Trịnh Tiến Mạnh viết 15:51 ngày 12/08/2018

Giới thiệu về Ajax và Ajax jquery trong rails

Nếu muốn thay đổi một phần tử trên trang web, tôi phải gửi một request mới đến server và nó sẽ trả về response với toàn bộ nội dung của trang bao gồm phần tử mà tôi muốn cập nhật nội dung mới. Như vậy, trình duyệt phải tải lại cả trang, trong khi tôi chỉ muốn cập nhật một phần tử duy nhất. AJAX ...

Bùi Văn Nam viết 15:18 ngày 12/08/2018

Giới thiệu về Arel trong Rails

Trước đây, khi xây dựng các ứng dụng web có kết tới cơ sở dữ liệu, mình thường phải tự viết những câu lệnh SQL bằng tay, chỉ định rõ những cột cần lấy dữ liệu, phải viết rất nhiều câu lệnh để xử lý việc CRUD,.. Điều này cực kỳ nhàm chán gây khó để maintenance hay tìm bug khi có lỗi xảy ra. Rồi ...

Tạ Quốc Bảo viết 13:52 ngày 12/08/2018
0