programming javascript

Phương thức nhận javascript

Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta nhập một trang web địa chỉ [ví dụ:. võ công. giáo dục. vn] duyệt duyệt và nhấn Enter?

Đầu tiên, trình duyệt sẽ tìm kiếm địa chỉ IP của máy chủ ứng với tên miền, sau đó là mở kết nối TCP đến máy chủ thông qua cổng 80 - cổng mặc định của 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 dạng GET đến máy chủ để lấy thông tin trang web. Tiếp theo, máy chủ phản hồi lại trình duyệt theo đúng kết nối đó. Và cuối cùng, trình duyệt xử lý phản hồi thông tin phản hồi và hiển thị nó trên trang web

Quá trình này được thực hiện 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 đi vào tìm hiểu cách sử dụng XMLHttpRequest, chúng ta hãy lướt qua một chút về giao thức HTTP để biết nó là cái gì trước đó. ĐƯỢC RỒI?

HTTP là gì?

Theo wikipedia. HTTP - viết tắt của HyperText Transfer Protocol - giao thức truyền tải siêu văn bản, là một tiêu chuẩn trong năm về Internet mạng, được sử dụng để liên hệ thông tin giữa máy cung cấp dịch vụ [máy chủ Web] và máy sử dụng dịch vụ [ . HTTP là một giao thức sử dụng bộ giao thức TCP/IP

Các phương thức yêu cầu của HTTP

HTTP support the following method request

LẤY. this method used to get information from server using URI. Và phương thức GET only nên được sử dụng để lấy thông tin mà không có ảnh hưởng khác đến dữ liệu
CÁI ĐẦU. tương tự như GET, nhưng phương thức này chỉ được sử dụng để lấy thông tin về dòng trạng thái và phần tiêu đề [tiêu đề]
BƯU KIỆN. this method used to send data from client up server,ví dụ. thông tin khách hàng, tập tin,
ĐẶT. dùng để thay thế dữ liệu hiện có trên máy chủ bằng dữ liệu mới được tải lên. Nói ngắn gọn thì là tải lên dữ liệu
XÓA BỎ. xóa dữ liệu trên máy chủ bằng cách sử dụng URI
LIÊN KẾT. setting a channel transfer to server using URI
TÙY CHỌN. miêu tả các tùy chọn giao tiếp đến tài nguyên trên máy chủ
DẤU VẾT. thực hiện một bài 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ủ

Các mã trạng thái

Mã trạng thái là một số nguyên bao gồm 3 chữ số, dùng để phân loại phản hồi được gửi về từ máy chủ. There are 5 type status-code is

1xx. [100, 101]. Nó có nghĩa là yêu cầu đã được chấp nhận và tiến trình sẽ được tiếp tục
2xx. [200 - 206]. Nó có nghĩa là hành động đã được nhận, hiểu và thực hiện thành công
3xx. [300 - 307]. Nó có nghĩa là phải thực hiện thêm hành động để hoàn thành yêu cầu
4xx. [400 - 417 ]. Nó có nghĩa là yêu cầu bị sai cú pháp hoặc không thể hoàn thành
5xx. [500 - 505]. Nó có nghĩa là máy chủ không thể thực hiện được yêu cầu

Cụ thể về từng status-code, bạn có thể tham khảo thêm tại đây

Gửi yêu cầu HTTP sử dụng XMLHttpRequest

Thông thường, vì lý do an toàn nên máy chủ sẽ chặn các yêu cầu từ các tên miền khác với "tên miền của máy chủ". Làm như vậy, bạn sẽ không thể thực hiện việc gửi yêu cầu HTTP đến máy chủ bằng cách sử dụng XMLHttpRequest từ máy chủ cục bộ. Sau đây, mình sẽ sử dụng server chuyên dùng để test HTTP request tại. https. //httpbin. tổ chức/

Ví dụ sau khi gửi định dạng yêu cầu phương thức GET to https. //httpbin. tổ chức/nhận

var req = new XMLHttpRequest[];
req.open["GET", "//httpbin.org/get", false];
req.send[null];
console.log[req.status];
console.log[req.responseText];

Kết quả trả lại là

200
    {
      "args": {},
      "headers": {
        "Accept": "*/*",
        "Accept-Encoding": "gzip, deflate, br",
        "Accept-Language": "en-US,en;q=0.8,vi;q=0.6",
        "Connection": "close",
        "Host": "httpbin.org",
        "Origin": "null",
        "User-Agent": "Mozilla/5.0 [iPhone; CPU iPhone OS 9_1 like Mac OS X] AppleWebKit/601.1.46 [KHTML, like Gecko] Version/9.0 Mobile/13B143 Safari/601.1"
      },
      "origin": "183.81.50.73",
      "url": "//httpbin.org/get"
    }

Giải thích

Trong JavaScript, câu lệnh để tạo mới một đối tượng XMLHttpRequest. var req = new XMLHttpRequest[];

Sau khi đã có đối tượng yêu cầu, mình sử dụng phương thức mở để cấu hình cho yêu cầu. in which

Thuộc tính đầu tiên là tên kiểu yêu cầu. NHẬN, ĐẦU, ĐĂNG, ĐẶT, XÓA,
Thuộc tính tiếp theo là địa chỉ URL mà mình muốn gửi yêu cầu đến
Thuộc tính cuối cùng là đối số kiểu bool, với giá trị false nghĩa là yêu cầu kiểu đồng bộ [đợi cho đến khi nhận được kết quả phản hồi phản hồi] và giá trị true ý nghĩa là kiểu yêu cầu bất đồng bộ [không mong đợi kết quả]

Lúc này, yêu cầu mới được cấu hình. Để gửi yêu cầu này đến máy chủ, mình sẽ sử dụng phương thức gửi với đối số là nội dung của yêu cầu. Trong ví dụ này, mình gửi yêu cầu kiểu GET nên phần thân chỉ cần là null

Kết quả trả về có nhiều thuộc tính, nhưng quan trọng nhất là 2 thuộc tính

trạng thái. chính là mã trạng thái. Kết quả trả lại là 200, chứng tỏ yêu cầu thành công
phản hồiVăn bản. là nội dung phản hồi từ máy chủ. Trong trường hợp này, kết quả trả về là một chuỗi JSON

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

XMLHttpRequest.setRequestHeader[header, value];

Ví dụ, để cấu hình yêu cầu sử dụng body kiểu JSON, bạn có thể đặt tiêu đề "Content-Type"

req.setRequestHeader["Content-Type", "application/json;charset=UTF-8"];

Use XMLHttpRequest with POST method

Ví dụ sau khi gửi yêu cầu phương thức dạng POST

var req = new XMLHttpRequest[];
req.open["POST", "//httpbin.org/post", false];
req.setRequestHeader["Content-Type", "application/json; charset=UTF-8"];

var jsonBody = {
  name: "Lam Pham",
  url: "completejavascript.com",
};
req.send[jsonBody];

console.log[req.status];
console.log[req.responseText];

Kết quả

200
    {
      "args": {},
      "data": "[object Object]",
      "files": {},
      "form": {},
      "headers": {
        "Accept": "*/*",
        "Accept-Encoding": "gzip, deflate, br",
        "Accept-Language": "en-US,en;q=0.8,vi;q=0.6",
        "Connection": "close",
        "Content-Length": "15",
        "Content-Type": "application/json; charset=UTF-8",
        "Host": "httpbin.org",
        "Origin": "null",
        "User-Agent": "Mozilla/5.0 [iPhone; CPU iPhone OS 9_1 like Mac OS X] AppleWebKit/601.1.46 [KHTML, like Gecko] Version/9.0 Mobile/13B143 Safari/601.1"
      },
      "json": null,
      "origin": "183.81.50.73",
      "url": "//httpbin.org/post"
    }

Phần này cũng tương tự như phần sử dụng phương thức GET. Chỉ khác là ở đây, mình sử dụng phương thức setRequestHeader để cấu hình kiểu nội dung là JSON. Khi gửi yêu cầu, thay vì gửi null thì ở đây mình gửi đi một đối tượng JSON

Đối chiếu với các yêu cầu phương thức còn lại như PUT, DELETE, HEAD,. bạn có thể làm tương tự như hai ví dụ trên

XMLHttpRequest với bất đồng bộ request

Trong các ví dụ trên, mình mới chỉ sử dụng yêu cầu đồng bộ. Việc sử dụng yêu cầu đồng bộ dẫn đến chương trình bị dừng lại để đợi cho đến khi có thông tin phản hồi từ máy chủ

Nếu như máy chủ bị lỗi, hoặc việc xử lý yêu cầu mất nhiều thời gian, điều này dẫn đến chương trình sẽ bị dừng hoạt động, trang web sẽ bị đơ

Do đó, chỉ nên sử dụng request đồng bộ với những yêu cầu có thể xử lý nhanh. Nhìn chung, bạn nên sử dụng bất đồng bộ yêu cầu

Như mình đã nói ở trên, để cấu hình yêu cầu là bất đồng bộ, bạn chỉ cần truyền vào đúng thuộc tính thứ 3 của phương thức mở. Ngoài ra, bạn cần phải đăng ký sự kiện tải và truyền vào hàm gọi lại - hàm này được thực thi khi có thông tin phản hồi từ máy chủ

var req = new XMLHttpRequest[];
req.open["GET", "//httpbin.org/get", true];
req.addEventListener["load", function [] {
  console.log[req.status];
  console.log[req.responseText];
}];
req.send[null];
console.log["Sent"];

Kết quả

Sent
    200
    {
      "args": {},
      "headers": {
        "Accept": "*/*",
        "Accept-Encoding": "gzip, deflate, br",
        "Accept-Language": "en-US,en;q=0.8,vi;q=0.6",
        "Connection": "close",
        "Host": "httpbin.org",
        "Origin": "null",
        "User-Agent": "Mozilla/5.0 [iPhone; CPU iPhone OS 9_1 like Mac OS X] AppleWebKit/601.1.46 [KHTML, like Gecko] Version/9.0 Mobile/13B143 Safari/601.1"
      },
      "origin": "183.81.50.73",
      "url": "//httpbin.org/get"
    }

Kết quả cho thấy, dòng lệnh giao diện điều khiển. log['Sent'] được thực hiện ngay sau lệnh req. gửi [không]. And 2 command console. nhật ký [yêu cầu. trạng thái]; . nhật ký [yêu cầu. văn bản phản hồi]; . Đó chính là cách thức hoạt động của XMLHttpRequest bất đồng bộ

Ngoài ra, bạn có thể đăng ký sự kiện lỗi để xử lý trường hợp yêu cầu bị lỗi

________số 8

Tổng kết

Trên đây là một số kiến thức cơ bản về HTTP và cách sử dụng XMLHttpRequest trong JavaScript để gửi yêu cầu HTTP. Mình có thể tóm tắt như sau

HTTP - viết tắt của HyperText Transfer Protocol - giao thức truyền tải siêu văn bản, sử dụng giao thức TCP/IP
HTTP hỗ trợ các yêu cầu phương thức. NHẬN, ĐĂNG, ĐẦU, ĐẶT, XÓA, KẾT NỐI, THEO DÕI, TÙY CHỌN
XMLHttpRequest giúp bạn gửi yêu cầu HTTP đến máy chủ và hỗ trợ hai kiểu yêu cầu. đồng bộ và bất đồng bộ. Nhìn chung, bạn nên sử dụng kiểu bất đồng bộ

Về HTTP và XMLHttpRequest còn rất nhiều thứ, 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

HTTP là gì?

Các phương thức yêu cầu của HTTP

Các mã trạng thái

Gửi yêu cầu HTTP sử dụng XMLHttpRequest

Giải thích

Use XMLHttpRequest with POST method

XMLHttpRequest với bất đồng bộ request

Tổng kết

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề