Hướng dẫn xmlhttprequest javascript - xmlhttprequest javascript
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: completejavascript.com) lên trình duyệt và nhấn Enter?Enter? Show Đầu tiên, trình duyệt sẽ tìm kiếm địa chỉ IP của server ứng với tên miền, sau đó là mở kết nối TCP đến server thông qua cổng 80 - cổng mặc định của giao thức HTTP. Nếu server 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 server để lấy thông tin trang web. Tiếp theo, server 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ý thông tin phản hồi và hiển thị nó lê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 server 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 đã. 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, là một trong năm chuẩn về mạng Internet, được dùng để liên hệ thông tin giữa máy cung cấp 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. Các phương thức request của HTTPHTTP hỗ trợ các phương thức request sau:
Các status codeStatus-code là một số nguyên gồm 3 chữ số, dùng để phân loại phản hồi được gửi về từ server. Có 5 loại status-code là:
Cụ thể về từng status-code, bạn có thể tìm hiểu thêm tại đây. Gửi HTTP request sử dụng XMLHttpRequestThông thường, vì lý do an toàn nên server sẽ chặn các request từ các tên miền khác với "tên miền của server". Do đó, bạn sẽ không thể thực hiện gửi HTTP request đến server sử dụng XMLHttpRequest từ localhost. Sau đây, mình sẽ sử dụng server chuyên dùng để test HTTP request tại: https://httpbin.org/ Ví dụ sau gửi phương thức request dạng GET đến https://httpbin.org/get:
Kết quả trả về là:
Giải thíchTrong JavaScript, câu lệnh để tạo mới một đối tượng XMLHttpRequest: var req = new XMLHttpRequest();.var req = new XMLHttpRequest();. Sau khi đã có đối tượng req, mình sử dụng phương thức open để cấu hình cho request. Trong đó:open để cấu hình cho request. Trong đó:
Lúc này, request mới được cấu hình. Để gửi request này đến server, mình sẽ sử dụng phương thức send với đối số là body của request. Trong ví dụ này, mình gửi request kiểu GET nên body chỉ cần là null.send với đối số là body của request. Trong ví dụ này, mình gửi request kiểu GET nên body 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:
Ngoài ra, nhiều trường hợp bạn phải chèn thêm header cho request thì server mới chấp nhận. Để làm được việc này, bạn có thể sử dụng phương thức setRequestHeader đơn giản như sau:
Ví dụ, để cấu hình request sử dụng body kiểu JSON, bạn có thể set header "Content-Type":
Sử dụng XMLHttpRequest với phương thức POSTVí dụ sau gửi phương thức request dạng POST:
Kết quả:
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 content-type là JSON. Khi gửi request, thay vì gửi null thì ở đây mình gửi đi một đối tượng JSON.setRequestHeader để cấu hình content-type là JSON. Khi gửi request, thay vì gửi null thì ở đây mình gửi đi một đối tượng JSON. Đối với các phương thức request 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 request bất đồng bộTrong các ví dụ trên, mình mới chỉ sử dụng request đồng bộ. Việc sử dụng request đồng bộ dẫn đến chương trình bị dừng lại để chờ cho đến khi có 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 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 request bất đồng bộ. Như mình đã nói ở trên, để cấu hình request là bất đồng bộ, bạn chỉ cần truyền vào true ở thuộc tính thứ 3 của phương thức open. Ngoài ra, bạn cần phải đăng ký sự kiện load và truyền vào hàm callback - hàm này được thực hiện khi có thông tin phản hồi từ server.true ở thuộc tính thứ 3 của phương thức open. Ngoài ra, bạn cần phải đăng ký sự kiện load và truyền vào hàm callback - hàm này được thực hiện khi có thông tin phản hồi từ server.
Kết quả:
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 content-type là JSON. Khi gửi request, thay vì gửi null thì ở đây mình gửi đi một đối tượng JSON.console.log('Sent') được thực hiện ngay sau lệnh req.send(null). Và 2 câu lệnh console.log(req.status); console.log(req.responseText); chỉ được thực hiện khi có thông tin phản hồi về từ server. Đó chính là cách thức hoạt động của XMLHttpRequest bất đồng bộ. Đối với các phương thức request còn lại như PUT, DELETE, HEAD,... bạn có thể làm tương tự như hai ví dụ trên.error để xử lý trường hợp request bị lỗi:
XMLHttpRequest với request bất đồng bộTrong các ví dụ trên, mình mới chỉ sử dụng request đồng bộ. Việc sử dụng request đồng bộ dẫn đến chương trình bị dừng lại để chờ cho đến khi có thông tin phản hồi từ server.
Kết quả cho thấy, dòng lệnh console.log('Sent') được thực hiện ngay sau lệnh req.send(null). Và 2 câu lệnh console.log(req.status); console.log(req.responseText); chỉ được thực hiện khi có thông tin phản hồi về từ server. Đó 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 error để xử lý trường hợp request bị lỗi: Tổng kết
XMLHttpRequest giúp bạn gửi HTTP request đến server và hỗ trợ hai kiểu request: đồng bộ và bất đồng bộ. Nhìn chung, bạn nên sử dụng kiểu bất đồng bộ. |