+1

Chuyện của Ajax

Ajax, chuyện của nó thì bình thường chắc chẳng ai để ý tới làm gì... Cơ mà nếu không có nó thì tin tôi đi, trải nghiệm internet của bạn sẽ như cục shit... :V :V

Cách bạn tạo ra một website:

Trước khi vào bài chính có lẽ mình sẽ trinh bày sơ về cách website hiển thị với người dùng đã nhỉ?

Nếu bạn là người dùng như hiện tại bạn đang truy cập vào blog của mình thì bạn chỉ đơn giản là gõ https://mrsoi.com trên trình duyệt thì bạn đã có thể truy cập, nhưng để hiển thị với bạn là cả một quá trình lớn... Cụ thế sau:

    1. Để trang web tồn tại thì website của mình được lưu ở một máy chủ.
    1. Máy chủ thường có địa chỉ một địa chỉ IP và địa chỉ IP của website mình là 185.199.111.153 (Đây là địa chỉ IP của github)
    1. Khi truy cập vào địa chỉ IP thì máy chủ sẽ trả về các file HTML, CSS và JS.
    1. Sau đó trình duyệt sẽ nhận các file đó và show ra cho chúng ta xem.

Thông thường thì chủ trang web sẽ dùng một domain name(tên miền) để định danh địa chỉ IP đó. (Để nhớ mrsoi.com chắc chắn dễ hơn mấy hàng số như 185.199.111.153 nhỉ... :3 )

Và thông thường thì bạn thực hiện một thao tác gì đó trên website, để thay đổi nội dung hiển thị thì server gửi lại toàn bộ HTML,CSS và JS như vậy. Mới nghe thì thấy bình thường nhưng nghĩ kỹ lại thì đúng là ác mộng.

Ác mộng...?

Bạn thử tương tượng bạn đang lướt twitter và mỗi lần bạn like một cái thì toàn bộ website sẽ load lại... Đúng là ác mộng... :3 Thà như nội dung hiện tại còn ít thì còn nhẹ nhàng chứ nếu như đó là một đống ảnh thì thật kinh dị đúng không nào... :3

Ajax là...

Ajax viết tắt từ Asynchronous Javascript And Xml, Ajax vốn không phải là một ngôn ngữ lập trình mà là sự kết hợp giữa một nhóm các công nghệ với nhau.

Đơn giản có thể hiểu rằng chức năng của Ajax là gửi yêu cầu lên server lấy (hoặc chỉnh sửa) dữ liệu, đồng thời làm thay đổi nội dung hiển thị với người dùng mà không cần load lại trình duyệt cũng như toàn bộ nội dung có sẵn.

Các công nghệ Ajax sử dụng:

  • HTML + CSS trong để hiện thị nội dung trang web. Đơn giản như là cái nút like.
  • DOM để thay đổi dữ liệu HTML.(Bạn có thể đọc bài Những khái niệm cơ bản về DOM ). Còn để ví dụ thì khi bạn bấm nút like thì nút like sẽ tô đậm.
  • XMLHttpRequest dùng để trao đổi dữ liệu với máy chủ. XMLHttpRequest sẽ gửi thông tin được like lên server và server gửi về số like hiện tại.
  • XML thường là định dạng cho dữ liệu truyền. (Hiện nay thì JSON cũng được ưu tiên sử dụng)

Cách Ajax làm việc:

Phần này mình dịch từ W3Schools vì thấy phần nền W3 viết khá ổn:

;

Quá trình làm việc của Ajax sẽ thực hiện qua 7 bước:

  • Giai đoạn 1: Một sự kiện gì đó xãy ra ở trang web. (Có thể là trang được load xong, hoặc một button được click)
  • Giai đoạn 2: Một đối tượng XMLHttpRequest được tạo ra bởi JavaScript.
  • Giai đoạn 3: XMLHttpRequest gửi yêu cầu đến server.
  • Giai đoạn 4: Server xử lý yêu cầu.
  • Giai đoạn 5: Server gửi lại response cho trang web.
  • Giai đoạn 6: Response được đọc bới Javascript.
  • Giai đoạn 7: JavaScript thực hiện thay đổi trang web theo dữ liệu trả về của server. (Như là cập nhật trang)

Một ví dụ về ajax.. :3

Hôm nay tới đây thôi... :3

Blog của Sói: https://mrsoi.com/2019/02/chuyen-cua-ajax/


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí