Mẹo nhỏ: Để tìm kiếm chính xác các bài viết của Vuihecungchocopie.vn, hãy search trên Google với cú pháp: "Từ khóa" + "vuihecungchocopie". (Ví dụ: công thức giải rubik 3x3 vuihecungchocopie). Tìm kiếm ngay
12 lượt xem

XMLHttpRequest – Tạo HTTP request đến server trong JavaScript – Complete JavaScript

Bạn đang quan tâm đến XMLHttpRequest – Tạo HTTP request đến server trong JavaScript – Complete JavaScript phải không? Nào hãy cùng Vuihecungchocopie đón xem bài viết này ngay sau đây nhé, vì nó vô cùng thú vị và hay đấy!

Bạn đã bao giờ tự hỏi điều gì sẽ xảy ra khi chúng tôi nhập địa chỉ web (chẳng hạn như completejavascript.com) vào trình duyệt của mình và nhấn enter ?

Đầu tiên, trình duyệt tìm kiếm địa chỉ ip của máy chủ tương ứng với tên miền, sau đó mở kết nối tcp với máy chủ thông qua cổng 80 – cổng mặc định cho giao thức http. Nếu máy chủ tồn tại và chấp nhận kết nối, trình duyệt sẽ gửi yêu cầu nhận đến máy chủ để lấy thông tin trang web. Tiếp theo, máy chủ phản hồi trình duyệt trên kết nối đó. Cuối cùng, trình duyệt xử lý phản hồi và hiển thị nó trên trang web.

Bạn đang xem: Xmlhttprequest là gì

Quá trình này hoàn toàn dựa trên trình duyệt. Tuy nhiên, bài viết này sẽ hướng dẫn bạn gửi yêu cầu http đến máy chủ bằng javascript thông qua đối tượng xmlhttprequest. Nhưng trước khi chúng ta xem cách sử dụng xmlhttprequest, chúng ta hãy xem qua giao thức http và xem nó là gì. Được chứ?

http là gì?

Theo Wikipedia: http – là viết tắt của Hypertext Transfer Protocol – Giao thức truyền siêu văn bản, một trong năm tiêu chuẩn Internet được sử dụng giữa nhà cung cấp dịch vụ (máy chủ web) và máy sử dụng dịch vụ (máy khách web) để truyền thông tin. http là một giao thức sử dụng bộ giao thức tcp / ip.

Phương thức yêu cầu http

http hỗ trợ các phương thức yêu cầu sau:

  • get : Phương pháp này được sử dụng để lấy thông tin từ máy chủ bằng cách sử dụng uri. Và phương thức get chỉ có thể được sử dụng để lấy thông tin và không có tác dụng nào khác đối với dữ liệu.
  • head : tương tự như get, nhưng phương thức này chỉ được sử dụng để lấy thông tin dòng trạng thái
  • post : phương thức này là dùng để Gửi dữ liệu từ máy khách đến máy chủ, ví dụ: thông tin máy khách, tệp, …
  • put : Được sử dụng để thay thế dữ liệu hiện tại trên máy chủ bằng dữ liệu mới được tải lên. Trong ngắn hạn, tải lên dữ liệu.
  • xóa : Sử dụng uri để xóa dữ liệu trên máy chủ.
  • kết nối : Thiết lập kênh tới máy chủ bằng cách sử dụng tiểu.
  • tùy chọn : Mô tả các tùy chọn để giao tiếp với các tài nguyên trên máy chủ.
  • trace : Thực hiện kiểm tra lặp lại vòng lặp thông báo với đường dẫn đến tài nguyên đích trên máy chủ.
XEM THÊM:  &quotWhich one&quot nghĩa là gì và Cách dùng trong Tiếng Anh

Mã trạng thái

mã trạng thái là một số nguyên gồm 3 chữ số phân loại phản hồi do máy chủ gửi lại. Có 5 mã trạng thái:

  • 1xx : (100, 101): Cho biết rằng yêu cầu đã được chấp nhận và tiếp tục xử lý.
  • 2xx : (200 – 206): Cho biết rằng hành động đã được nhận, hiểu và thực thi thành công.
  • 3xx : (300 – 307): Cho biết rằng bạn phải thực hiện thêm hành động để hoàn thành yêu cầu.
  • 4xx : (400 – 417): Cho biết yêu cầu có lỗi cú pháp hoặc không thể hoàn thành.
  • 5xx : (500 – 505): Cho biết máy chủ không thể hoàn thành yêu cầu.

Bạn có thể tìm hiểu thêm về từng mã trạng thái tại đây.

Sử dụng xmlhttprequest để gửi yêu cầu http

Thông thường, vì lý do bảo mật, máy chủ chặn các yêu cầu từ các miền khác với “tên miền của máy chủ”. Vì vậy, bạn sẽ không thể thực hiện các yêu cầu http tới máy chủ bằng cách sử dụng xmlhttprequest từ localhost. Dưới đây, tôi sẽ sử dụng một máy chủ chuyên dụng để kiểm tra các yêu cầu http: https://httpbin.org/

Ví dụ sau gửi một phương thức nhận yêu cầu đến https://httpbin.org/get:

Kết quả là:

Giải thích

Xem thêm: No Pain No Gain Có Nghĩa Là Gì? Và Những điều Cần Biết Về Câu Thành Ngữ – TuhocIELTS.vn

Trong javascript, câu lệnh để tạo một đối tượng xmlhttprequest mới: var req = new xmlhttprequest (); .

Sau khi lấy được đối tượng yêu cầu, tôi sử dụng phương thức mở để định cấu hình yêu cầu. Trong đó:

  • Thuộc tính đầu tiên là tên loại yêu cầu: get, head, post, put, delete,
  • Thuộc tính tiếp theo là url tôi muốn để gửi yêu cầu địa chỉ đến.
  • Thuộc tính cuối cùng là tham số bool, giá trị của false có nghĩa là yêu cầu là đồng bộ (đợi cho đến khi nhận được kết quả. Phản hồi), giá trị của true nghĩa là Yêu cầu không đồng bộ (không đợi kết quả trả về mà hãy tiếp tục thực hiện lệnh sau, kết quả trả về sẽ được xử lý trong hàm gọi lại).
XEM THÊM:  Sa bàn là gì? Phân loại các lĩnh vực cần sử dụng sa bàn

Yêu cầu mới hiện đã được định cấu hình. Để gửi yêu cầu này đến máy chủ, tôi sẽ sử dụng phương thức send và tham số body của yêu cầu. Trong trường hợp này, tôi đang gửi một yêu cầu thuộc loại get , vì vậy phần nội dung chỉ cần là null .

Kết quả có nhiều thuộc tính, nhưng hai thuộc tính quan trọng nhất:

  • status : là mã trạng thái của chính nó. Kết quả trả về là 200, cho thấy yêu cầu đã thành công.
  • văn bản phản hồi : là nội dung phản hồi của máy chủ. Trong trường hợp này, trả về là một chuỗi json.

Ngoài ra, trong nhiều trường hợp, bạn phải chèn tiêu đề để máy chủ chấp nhận yêu cầu. Để làm điều này, bạn có thể sử dụng phương pháp setrequestheader đơn giản như sau:

Ví dụ: để định cấu hình yêu cầu sử dụng json body, bạn có thể đặt tiêu đề “content-type”:

Sử dụng xmlhttprequest và phương thức đăng

Ví dụ sau gửi một phương thức yêu cầu bài đăng:

Kết quả:

Phần này tương tự như sử dụng phương thức get. Sự khác biệt duy nhất là ở đây tôi sử dụng phương thức setrequestheader để định cấu hình content-type thành json. Khi gửi yêu cầu, ở đây tôi gửi một đối tượng json thay vì gửi null .

Đối với các phương thức yêu cầu khác như put, delete, head, v.v., bạn có thể thực hiện như hai ví dụ ở trên.

xmlhttprequest với yêu cầu không đồng bộ

Xem thêm: Mega.nz là gì?

Trong ví dụ trên, tôi chỉ sử dụng các yêu cầu đồng bộ. Việc sử dụng một yêu cầu đồng bộ khiến chương trình ngừng chờ phản hồi từ máy chủ.

XEM THÊM:  Polaris là gì

Nếu máy chủ gặp sự cố hoặc nếu mất nhiều thời gian để xử lý yêu cầu, điều này sẽ khiến chương trình ngừng hoạt động và trang web sẽ lạ .

Do đó, các yêu cầu đồng bộ chỉ nên được sử dụng cho các yêu cầu có thể được xử lý nhanh chóng. Nói chung, bạn nên sử dụng các yêu cầu không đồng bộ.

Giống như tôi đã nói ở trên, để định cấu hình yêu cầu không đồng bộ, bạn chỉ cần chuyển true vào thuộc tính thứ ba của phương thức open . Bạn cũng cần đăng ký sự kiện tải và chuyển hàm gọi lại – hàm này được thực thi khi có phản hồi từ máy chủ.

Kết quả:

Kết quả cho thấy lệnh console.log (‘sent’) được thực thi sau lệnh req.send (null) . và hai câu lệnh console.log (req.status); console.log (req.responsetext); sẽ chỉ được thực thi nếu có phản hồi từ máy chủ. Đây là cách xmlhttprequest không đồng bộ hoạt động.

Ngoài ra, bạn có thể đăng ký sự kiện error để xử lý các yêu cầu không thành công:

Tóm tắt

Trên đây là một số khái niệm cơ bản về http và cách gửi yêu cầu http bằng xmlhttprequest trong javascript. Tôi có thể tóm tắt như sau:

  • http – là viết tắt của Hypertext Transfer Protocol – Giao thức truyền siêu văn bản, sử dụng giao thức tcp / ip
  • http hỗ trợ các phương thức yêu cầu: get, post, head, put, delete, connect, trace, options .
  • xmlhttprequest giúp bạn gửi các yêu cầu http đến máy chủ và hỗ trợ hai loại yêu cầu: đồng bộ và không đồng bộ. Nói chung, bạn nên sử dụng kiểu không đồng bộ.

Có rất nhiều điều về http và xmlhttprequest, bài viết này chỉ đưa ra những kiến ​​thức cơ bản nhất. Bạn có thể tự tìm hiểu thêm trên internet.

Xin chào thân mến, hẹn gặp lại trong bài viết tiếp theo của chúng tôi!

Xem thêm: Mắt bị vàng là gì? Nguyên nhân nào khiến mắt bị vàng? | Medlatec

Tham khảo

  • http và biểu mẫu
  • http – yêu cầu
  • http – mã trạng thái

Công khai: VUIHECUNGCHOCOPIE.VN là trang web Tổng hợp Ẩm Thực - Game hay và Thủ Thuật hàng đầu VN, thuộc Chocopie Vietnam. Mời thính giả đón xem.

Chúng tôi trân trọng cảm ơn quý độc giả luôn ủng hộ và tin tưởng!

Trả lời

Email của bạn sẽ không được hiển thị công khai.