Tìm hiểu AJAX là gì và cách bạn có thể tạo yêu cầu bài đăng AJAX trong JavaScript bằng cách sử dụng fetch (), xhr và jQuery

Bạn đang xem: ajax đăng yêu cầu javascript

Trong bài viết này, chúng ta sẽ xem xét AJAX là gì, tại sao nó lại quan trọng và cách chúng ta có thể thực hiện một yêu cầu AJAX POST với XHR, fetch () và jQuery.

AJAX là viết tắt của JavaScript và XML không đồng bộ . AJAX là một kỹ thuật trong phát triển web được sử dụng để cập nhật nội dung trên một trang web mà không cần phải tải lại toàn bộ trang.

Trong ứng dụng AJAX, JavaScript được sử dụng để cập nhật theo thời gian thực trên các phần của trang như người dùng tương tác với nó, do đó biến một trang HTML tĩnh khác thành một trang động.

Các ứng dụng web mạng xã hội như Facebook và Twitter sử dụng AJAX để cập nhật nguồn cấp dữ liệu và thông báo của người dùng.

Hãy lấy ứng dụng web Twitter làm ví dụ. Sau một khoảng thời gian cụ thể, ứng dụng Twitter thực hiện yêu cầu AJAX tới máy chủ yêu cầu thông tin mới. Đó là cách người dùng nhận các tweet mới nhất trên nguồn cấp dữ liệu của họ mà không cần phải tải lại trang.

Tất cả điều này diễn ra không đồng bộ; người dùng có thể tiếp tục sử dụng ứng dụng trong khi nó yêu cầu thông tin từ máy chủ web ở chế độ nền. Đó chính xác là lý do tại sao người dùng có thể cuộn qua nguồn cấp dữ liệu của họ và phản ứng với các tweet trong khi nguồn cấp dữ liệu được cập nhật với các tweet mới.

Trong yêu cầu máy khách-máy chủ truyền thống, người dùng sẽ phải tải lại trang để nhận được bất kỳ thông tin mới nào. thông tin từ máy chủ.

Lợi ích của AJAX

AJAX sử dụng JavaScript phía máy khách để tìm nạp và hiển thị nội dung trong nền. Kỹ thuật này cải thiện đáng kể trải nghiệm người dùng, vì trang không phải tải lại mỗi khi cần nội dung mới.

Sử dụng AJAX giúp hiển thị trang nhanh hơn vì nó có thể được sử dụng để chỉ cập nhật các phần của trang cần thay đổi, thay vì tải lại toàn bộ trang.

Điều đó cũng làm giảm tần suất yêu cầu đến máy chủ web, do đó dẫn đến thời gian phản hồi nhanh hơn.

Yêu cầu ĐĂNG là gì?

Khi thực hiện các yêu cầu API từ trình duyệt, hai phương thức HTTP bạn sẽ sử dụng để truyền dữ liệu là GET và POST. Sự khác biệt chính giữa hai phương pháp này nằm ở cách dữ liệu được gửi đến ứng dụng máy chủ web.

HTTP GET chuyển dữ liệu đến ứng dụng máy chủ dưới dạng các cặp tên và giá trị. Các tham số yêu cầu này được thêm vào URL. Ví dụ: sau đây là URL cho một yêu cầu GET chứa hai tham số yêu cầu sẽ được gửi đến máy chủ:

www.mysite.com/id=12&name="chris "

Vì dữ liệu hiển thị trong URL, nên không bao giờ được sử dụng phương thức GET để vận chuyển thông tin nhạy cảm như mật khẩu và chi tiết ngân hàng.

Xem Thêm  Hình ảnh tạo kiểu CSS - khối hiển thị hình ảnh css

Thay vào đó, phương thức POST phải luôn được sử dụng để vận chuyển dữ liệu nhạy cảm. Phương thức POST truyền dữ liệu trong phần thân yêu cầu. Dữ liệu có thể được truyền ở các định dạng JSON và XML.

Cách thực hiện yêu cầu AJAX POST với XHR

Bạn có thể sử dụng đối tượng XMLHttpRequest (XHR) để giao tiếp với máy chủ web bằng kỹ thuật AJAX. Đây là cách cổ điển để thực hiện AJAX, nhưng không phải là cách tốt nhất hiện nay khi API Tìm nạp được hỗ trợ trong các trình duyệt hiện đại. Trong phần tiếp theo, tôi sẽ chỉ cho bạn cách tốt hơn để thực hiện yêu cầu ĐĂNG bằng cách sử dụng fetch () .

Bây giờ, giả sử chúng ta muốn đăng dữ liệu sau (một bài đăng trên blog) lên máy chủ web:

Chúng tôi có thể sử dụng XHR để đăng dữ liệu lên máy chủ web như vậy:

Chúng tôi đã bắt đầu bằng cách chuyển đổi đối tượng thành chuỗi JSON để được chuyển qua HTTP. Sau đó, chúng tôi tạo một đối tượng xhr từ lớp XMLHttpRequest .

Sau đó, chúng tôi đã mở yêu cầu bằng cách gọi phương thức open () , chuyển các tùy chọn sau:

  • 'POST' : phương thức yêu cầu; chúng tôi đang đăng dữ liệu lên máy chủ
  • url : đây là URL của máy chủ tới nơi chúng tôi đăng tài nguyên lên
  • true : yêu cầu trình duyệt chạy mã không đồng bộ

Chúng tôi đã tiến hành đặt tiêu đề yêu cầu, cho máy chủ biết cách xử lý dữ liệu mà chúng tôi gửi qua. Sau đó, chúng tôi gửi nội dung yêu cầu của mình.

Khi yêu cầu được hoàn tất thành công, hàm onload sẽ được gọi. Bên trong chức năng này, chúng tôi đã thực hiện kiểm tra if để đảm bảo rằng tài nguyên đã được tạo thành công trên máy chủ (như được chỉ ra bởi trạng thái 201) trước khi ghi thông báo vào bảng điều khiển.

Bạn cũng có thể truy cập trực tiếp các giá trị từ một biểu mẫu trong trang, như vậy:

Tại đây, chúng tôi lấy các giá trị trực tiếp từ giao diện người dùng và hiển thị thông báo phản hồi cho người dùng nếu tài nguyên được tạo thành công.

Cách thực hiện yêu cầu AJAX POST với fetch ()

Một cách khác để thực hiện lệnh gọi AJAX trong JavaScript là sử dụng phương thức fetch () . fetch () là một phương thức tiện ích API được tích hợp trong môi trường trình duyệt web. Đó là một API mới hơn XMLHttpRequest , với các tính năng hiện đại giúp dễ sử dụng hơn. Tôi khuyên bạn nên sử dụng fetch () cho AJAX.

Đoạn mã sau tạo yêu cầu ĐĂNG tới máy chủ bằng cách sử dụng fetch () :

fetch () nhận URL máy chủ và một đối tượng chứa các tùy chọn như phương thức HTTP , nội dung yêu cầu và tiêu đề yêu cầu. Chấp nhận cho biết loại phản hồi nào từ máy chủ mà máy khách có thể chấp nhận. Content-Type cho biết định dạng dữ liệu của yêu cầu hoặc phản hồi hiện tại. Vì yêu cầu của chúng tôi có tải trọng, chúng tôi phải sử dụng tiêu đề yêu cầu loại nội dung.

Khi yêu cầu được thực thi thành công trên máy chủ, chúng tôi xâu chuỗi các phương thức then () catch () để xử lý phản hồi và lỗi của máy chủ tương ứng.

Xem Thêm  Cách căn giữa A Div trong CSS (bốn cách khác nhau) - căn chỉnh để trung tâm css

Phương thức then () đầu tiên chỉ đơn giản là chuyển đổi dữ liệu phản hồi thành một đối tượng JavaScript và trả về đối tượng. Trong phương thức then () sau đây, chúng tôi kiểm tra trạng thái và ghi thông báo thành công vào bảng điều khiển.

Nếu gặp bất kỳ lỗi nào trong chuỗi, nó sẽ được xử lý bởi catch () .

Cách thực hiện yêu cầu AJAX POST với jQuery

Cho đến nay, chúng tôi chỉ sử dụng các API Web của trình duyệt để thực hiện các yêu cầu AJAX.

Chúng tôi cũng có thể thực hiện một yêu cầu AJAX bằng cách sử dụng một thư viện như jQuery. Yêu cầu POST trong jQuery được thực thi bằng hàm post () .

Tôi sẽ chỉ cho bạn cách sử dụng jQuery để thực thi một yêu cầu AJAX, nhưng thành thật mà nói với API Tìm nạp JavaScript mới, thực sự không cần phải nhập toàn bộ thư viện như jQuery chỉ dành cho AJAX.

Bây giờ, hãy thực hiện yêu cầu POST bằng jQuery thay thế:

post () có bốn đối số: URL, nội dung yêu cầu, hàm gọi lại và định dạng dữ liệu.

Khi yêu cầu được hoàn tất thành công, hàm gọi lại được chuyển đến post () sẽ được gọi. Hàm này nhận phản hồi và trạng thái từ yêu cầu bài đăng, cả hai đều là đối số.

Trong chức năng gọi lại, chúng tôi kiểm tra trạng thái yêu cầu và ghi thông báo vào bảng điều khiển.

Kết luận

AJAX là một công nghệ web hiện đại được sử dụng để cập nhật nội dung trang một cách không đồng bộ. Điều này có nghĩa là người dùng vẫn có thể tương tác với một trang trong khi ứng dụng sử dụng JavaScript để tìm nạp thông tin từ máy chủ và cập nhật trang.

Trong bài viết này, chúng tôi đã xem xét ba cách để thực hiện yêu cầu đăng AJAX trong một ứng dụng web. Chúng tôi đã sử dụng đối tượng XMLHttpRequest , phương thức tìm nạp và jQuery.

fetch () sử dụng các tính năng JavaScript hiện đại như các hứa hẹn, tôi thực sự khuyên bạn nên sử dụng nó thay cho các tùy chọn khác. Điều này là do bạn phải học và sử dụng các cấu trúc hứa hẹn như then () , catch () async / await .

Với sự sẵn có của các API gốc như fetch () XMLHttpRequest , không cần phải nhập toàn bộ thư viện như jQuery chỉ để thực hiện các yêu cầu AJAX trong ứng dụng của bạn .


Xem thêm những thông tin liên quan đến chủ đề ajax đăng yêu cầu javascript

Easy JavaScript – How to Create a Basic AJAX Request (47)

  • Tác giả: Nazmus Nasir
  • Ngày đăng: 2017-05-13
  • Đánh giá: 4 ⭐ ( 8552 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Welcome to the 47th Easy JavaScript tutorial, part of EasyProgramming.net. I gave you a brief intro to what AJAX is and showed you a quick example at the end. Today we’re going to cover one of those examples and create a very basic AJAX event on your webpage. Here you will click a button and using AJAX, your web page will update with content located in another file.

    One thing you will need to know is that you can only run this from a web server. You can’t open the file directly on your browser and try it, it won’t work. That’s why I’m using brackets because it allows for a preview.

    You can find the file I’m using on our website, be sure to download it to follow along!

    For more information, please visit https://www.EasyProgramming.net to view my other programming tutorials! Find videos of C++ tutorials, Excel tutorials, and JavaScript Tutorials.

    I hope you enjoy the video and if you have any questions, please ask in the comments below. If you have any requests feel free to let me know. Thanks for watching and remember to subscribe!

    JavaScript LearnProgramming EasyProgramming CORS AJAX JSON
    ———–

    Subscribe on YouTube: https://www.youtube.com/c/nazmusnasir
    Support me on Patreon: https://www.patreon.com/nazmus
    Follow me on Twitter: https://twitter.com/NazmusN
    Like me on Facebook: https://www.facebook.com/EasyProgrammingNet
    Follow me on Google+: https://plus.google.com/+NazmusNasir
    Check out my Github: https://github.com/naztronaut

JSF 2.3 – Thực hiện một yêu cầu AJAX bằng các hàm phạm vi toàn cầu

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 7072 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đôi khi, có thể hữu ích khi đóng gói các yêu cầu AJAX trong các hàm JavaScript được đặt trong phạm vi toàn cầu JavaScript theo cách mà chúng ta có thể gọi chúng bằng tên, không có đối số…

Trần Ngọc Minh Notes

  • Tác giả: ngocminhtran.com
  • Đánh giá: 4 ⭐ ( 6693 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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…

Yêu cầu PHP Post so với JavaScript Ajax

  • Tác giả: vi.turkishprogress.org
  • Đánh giá: 4 ⭐ ( 2703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã tham gia phát triển web với cả mã phía máy chủ amd của máy khách và đã sử dụng JavaScript Ajaxto để nhận và thao tác dữ liệu cùng với các tập lệnh PHP. Tuy nhiên, tôi nhận thấy rằng mạng …

AJAX Cơ Bản Cho Lập Trình Viên Front-end

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 2706 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này nhằm mục đích giới thiệu, làm quen và tìm hiểu cách thức hoạt động của Ajax, một kỹ thuật cần thiết với các lập trình viên Front-end.

Javascript là gì? Những điều cơ bản nhất về Javascript

  • Tác giả: arena.fpt.edu.vn
  • Đánh giá: 3 ⭐ ( 9843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn chưa biết thì Javascript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Hãy cùng FPT Arena tìm hiểu chi tiết về Javascript nhé

Hướng dẫn – Jquery AJAX tải dữ liệu khi được yêu cầu

  • Tác giả: vnxf.vn
  • Đánh giá: 5 ⭐ ( 2505 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Jquery AJAX tải dữ liệu khi được yêu cầu

    Bài viết này sẽ hướng dẫn các bạn sử dụng Jquery AJAX để tải dữ liệu khi người dùng yêu cầu.

    Nếu bạn nào mới làm…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  HTML Div - Thẻ Div là gì và Cách tạo kiểu bằng CSS - div css hay html

By ads_php