Hỏi đáp

Xmlhttprequest Là Gì – Sự Khác Biệt Giữa Api Tìm Nạp Và – viettingame

Với lúc nào chúng ta thắc mắc, chuyện gì thực sự ra mắt lúc chúng ta gõ một địa chỉ website (ví dụ: viettingame.com) lên trình duyệt và nhấn Enter?

Trước nhất, trình duyệt sẽ tìm kiếm địa chỉ IP của server ứng với tên miền, sau này là mở kết nối TCP tới server trải qua cổng 80 – cổng mặc định của giao thức HTTP. Nếu server tồn tại và gật đầu kết nối, trình duyệt sẽ gửi yêu cầu dạng GET tới server để lấy thông tin website. Tiếp theo, server phản hồi lại trình duyệt tuân thủ theo đúng kết nối đó. Và sau cùng, trình duyệt xử lý thông tin phản hồi và hiển thị nó lên website.

Đang xem: Xmlhttprequest là gì

Quy trình này được triển khai trọn vẹn dựa trên trình duyệt. Tuy nhiên, nội dung bài viết này sẽ hướng dẫn chúng ta gửi yêu cầu HTTP tới server bằng JavaScript trải qua đối tượng người dùng XMLHttpRequest. Nhưng trước lúc đ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 để hiểu nó là dòng gì trước đã. OK?

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 dạng, là một trong năm chuẩn chỉnh về mạng Internet, được sử dụng để liên hệ thông tin giữa máy hỗ trợ dịch vụ (Web server) và máy sử dụng dịch vụ (Web client). HTTP là một giao thức sử dụng bộ giao thức TCP/IP.

Những phương thức request của HTTP

HTTP hỗ trợ những phương thức request sau:

GET: phương thức này sử dụng để lấy thông tin từ server sử dụng URI. Và phương thức GET chỉ nên sử dụng để lấy thông tin mà không tồn tại tác động khác tới dữ liệu.HEAD: tương tự như GET, nhưng phương thức này chỉ sử dụng để lấy thông tin dòng trạng thái và phần tiêu đề (header).POST: phương thức này sử dụng để gửi dữ liệu từ client lên server, ví dụ: thông tin quý khách hàng, file,…PUT: sử dụng để thay thế dữ liệu hiện tại trên server bằng một dữ liệu mới được tải lên. Nói ngắn gọn thì là upload dữ liệu.DELETE: xoá dữ liệu trên server sử dụng URI.CONNECT: thiết lập một kênh truyền tới server sử dụng URI.OPTIONS: mô tả những tuỳ sắm tiếp xúc tới tài nguyên trên server.TRACE: triển khai một bài test lặp lại vòng lặp thông tin với đường truyền tới tài nguyên đích trên server.

Những status code

Status-code là một vài nguyên gồm 3 chữ số, sử dụng để phân loại phản hồi được gửi về từ server. Với 5 loại status-code là:

1xx: (100, 101) : Nó Tức là yêu cầu đã được gật đầu và tiến trình sẽ được nối tiếp.2xx: (200 – 206) : Nó Tức là hành vi đã được nhận, hiểu và triển khai thành công.3xx: (300 – 307) : Nó Tức là phải triển khai thêm hành vi để hoàn thành yêu cầu.4xx: (400 – 417 ) : Nó Tức là yêu cầu bị sai cú pháp hay là ko thể được hoàn thành.5xx: (500 – 505) : Nó Tức là server ko thể triển khai được yêu cầu.

Xem thêm: Top 10 trò chơi Đá Bóng Offline Cho Pc Cực Hay Nhưng Nhẹ Máy, trò chơi Bóng Đá Offline Hay Cho Pc

Ví dụ về từng status-code, chúng ta thậm chí tìm hiểu thêm tại phía trên.

Gửi HTTP request sử dụng XMLHttpRequest

Thường thì, vì như thế lý do an toàn và đáng tin cậy nên server sẽ chặn những request từ những tên miền khác với “tên miền của server”. Do đó, các bạn sẽ ko thể triển khai gửi HTTP request tới server sử dụng XMLHttpRequest từ localhost. Sau phía trên, mình sẽ sử dụng server chuyên sử dụng để test HTTP request tại: https://httpbin.org/

Ví dụ sau gửi phương thức request dạng GET tới https://httpbin.org/get:

var req = new XMLHttpRequest();req.open(“GET”, “https://httpbin.org/get”, false);req.send(null);console.log(req.status);console.log(req.responseText);

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 lượt thích Mac OS X) AppleWebKit/601.1.46 (KHTML, lượt thích Gecko) Version/9.0 Mobile/13B143 Safari/601.1” }, “origin”: “183.81.50.73”, “url”: “https://httpbin.org/get”}

Trình bày

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

Sau lúc đã mang đối tượng người dùng req, mình sử dụng phương thức open để thông số kỹ thuật cho request. Trong số đó:

Thuộc tính trước tiên là tên kiểu request: GET, HEAD, POST, PUT, DELETE,…Thuộc tính tiếp theo là địa chỉ URL mà mình muốn gửi request tới.

Lúc này, request mới được thông số kỹ thuật. Để gửi request này tới server, mình sẽ sử dụng phương thức send với đối số là toàn thân của request. Trong ví dụ này, mình gửi request kiểu GET nên toàn thân chỉ việc là null.

Hậu quả trả về mang nhiều thuộc tính, nhưng quan trọng nhất là 2 thuộc tính:

status: đó là status-code. Hậu quả trả về là 200, chứng tỏ request thành công.

Ngoài ra, nhiều trường hợp chúng ta phải chèn thêm header cho request thì server mới gật đầu. Để làm được việc này, chúng ta thậm chí sử dụng phương thức setRequestHeader giản dị như sau:

Sử dụng XMLHttpRequest với phương thức POST

Ví dụ sau gửi phương thức request dạng POST tới https://httpbin.org/post:

var req = new XMLHttpRequest();req.open(“POST”, “https://httpbin.org/post”, false);req.setRequestHeader(“Nội dung-Type”, “application/json; charset=UTF-8”);var jsonBody = { “name” : “Lam Pham”, “url” : “viettingame.com”};req.send(jsonBody);console.log(req.status);console.log(req.responseText);

200{ “args”: {}, “data”: ““, “files”: {}, “form”: {}, “headers”: { “Accept”: “*/*”, “Accept-Encoding”: “gzip, deflate, br”, “Accept-Language”: “en-US,en;q=0.8,vi;q=0.6”, “Connection”: “close”, “Nội dung-Length”: “15”, “Nội dung-Type”: “application/json; charset=UTF-8”, “Host”: “httpbin.org”, “Origin”: “null”, “User-Agent”: “Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 lượt thích Mac OS X) AppleWebKit/601.1.46 (KHTML, lượt thích Gecko) Version/9.0 Mobile/13B143 Safari/601.1” }, “json”: null, “origin”: “183.81.50.73”, “url”: “https://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à ở phía trên, mình sử dụng phương thức setRequestHeader để thông số kỹ thuật content-type là JSON. Lúc gửi request, thay vì như thế gửi null thì ở phía trên mình gửi đi một đối tượng người dùng JSON.

So với những phương thức request sót lại như PUT, DELETE, HEAD,… chúng ta thậm chí làm tương tự như hai ví dụ trên.

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

Trong số ví dụ trên, mình mới chỉ sử dụng request đồng nhất. Việc sử dụng request đồng nhất kéo theo chương trình bị tạm dừng để chờ cho tới lúc mang thông tin phản hồi từ server.

Nếu như server bị lỗi, hoặc việc xử lý request mất nhiều thời hạn, điều này kéo theo chương trình sẽ bị ngừng hoạt động và sinh hoạt, website sẽ bị đơ.

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

Như mình đã nói ở trên, để thông số kỹ thuật request là bất đồng nhất, chúng ta chỉ việc truyền vào true ở thuộc tính thứ 3 của phương thức open. Ngoài ra, bạn phải đăng ký sự khiếu nại load và truyền vào hàm callback – hàm này được triển khai lúc mang thông tin phản hồi từ server.

var req = new XMLHttpRequest();req.open(“GET”, “https://httpbin.org/get”, true);req.addEventListener(“load”, function(){ console.log(req.status); console.log(req.responseText);});req.send(null);console.log(“Sent”);

Sent200{ “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 lượt thích Mac OS X) AppleWebKit/601.1.46 (KHTML, lượt thích Gecko) Version/9.0 Mobile/13B143 Safari/601.1” }, “origin”: “183.81.50.73”, “url”: “https://httpbin.org/get”}
Hậu quả cho thấy, dòng lệnh console.log(“Sent”) được triển khai ngay sau lệnh req.send(null). Và 2 câu lệnh console.log(req.status); console.log(req.responseText); chỉ được triển khai lúc mang thông tin phản hồi về từ server. Đó đó là phương pháp hoạt động và sinh hoạt của XMLHttpRequest bất đồng nhất.

Ngoài ra, chúng ta thậm chí đăng ký sự khiếu nại error để xử lý trường hợp request bị lỗi:

var req = new XMLHttpRequest();req.open(“GET”, “https://httpbin.org/get”, true);req.addEventListener(“load”, function(){ console.log(req.status); console.log(req.responseText);});req.addEventListener(“error”, function(){ console.log(“Error occurred!”);})req.send(null);console.log(“Sent”);

Tổng kết

Trên phía trên là một vài kỹ năng cơ bạn dạng về HTTP và cách sử dụng XMLHttpRequest trong JavaScript để gửi HTTP request. Mình thậm chí 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 dạng, sử dụng giao thức TCP/IPHTTP hỗ trợ những phương thức request: GET, POST, HEAD, PUT, DELETE, CONNECT, TRACE, OPTIONS.XMLHttpRequest giúp cho bạn gửi HTTP request tới server và hỗ trợ hai kiểu request: đồng nhất và bất đồng nhất. Nhìn chung, chúng ta nên sử dụng kiểu bất đồng nhất.

Xem thêm: trò chơi Meat Tourtière

Về HTTP và XMLHttpRequest còn rất nhiều thứ, nội dung bài viết này chỉ tìm ra những kỹ năng cơ bạn dạng nhất. Chúng ta thậm chí tự tìm hiểu thêm trên Internet.

Xin chào và hẹn hội ngộ chúng ta ở nội dung bài viết tiếp theo, thân ái!

Tìm hiểu thêm

★ Nếu như bạn thấy nội dung bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông tin lúc mang nội dung bài viết tiên tiến nhất nhé:

Về Viettingame.com

Viettingame.com - Chuyên trang web tổng hợp những thông tin hữu ích trên internet như thông tin về game, tin tổng hợp
Xem tất cả các bài viết của Viettingame.com →

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *