Hướng dẫn xmlhttprequest nodejs

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- XMLHttpRequest

Interface XMLHttpRequest trong Javascript được thiết kế để đọc các nguồn dữ liệu từ một URL. Cái tên của nó có thể gây ra sự nhầm lẫn rằng nó chỉ có thể đọc các nguồn dữ liệu text/xml, thực tế nó có thể đọc mọi thứ từ một URL.

XMLHttpRequest được thiết kế để đọc nguồn dữ liệu từ URL một cách đồng bộ (synchronous) hoặc không đồng bộ (asynchronous). Đọc dữ liệu một cách không đồng bộ giúp người dùng vẫn có thể thao tác với trình duyệt trong quá trình XMLHttpRequest đang đọc nguồn dữ liệu từ xa.

Nếu bạn muốn đọc các tập tin trên máy tính người dùng, thì FileReader chính là thứ bạn cần, nó được thiết kế tương tự như XMLHttpRequest.

Constructor

// Create a XMLHttpRequest object:

var xhr = new XMLHttpRequest();

Properties

Property	Mô tả
readyState	Trả về một con số, mô tả trạng thái của yêu cầu (request).
timeout	Chỉ định thời gian tối đa để nhận được tín hiệu trả lời, nếu không nhận được trong khoảng thời gian đó, coi như yêu cầu thất bại và tự động bị ngừng lại.
withCredentials	Giá trị của nó là true hoặc false (Mặc định là false). Nếu true nghĩa là yêu cầu này có thể sử dụng cookies, authorization headers, tuy nhiên nó vẫn phải tuân thủ chính sách cùng nguồn gốc.
responseType	Chỉ định kiểu dữ liệu mà bạn muốn nhận được. Giá trị mặc định là "text". (Xem các giá trị có thể của thuộc tính này bên dưới)
response	Trả về một đối tượng ArrayBuffer, Blob, Document, hoặc DOM String, phụ thuộc vào giá trị của XMLHttpRequest.responseType, chứa toàn bộ thân nội dung của response.
responseText	Trả về một DOM String chứa nội dung của đáp ứng (response) dưới dạng văn bản, hoặc null nếu yêu cầu (request) không thành công hoặc yêu cầu không được gửi đi.
responseURL	Trả về một serialized URL của đáp ứng (response) hoặc một chuỗi rỗng nếu URL là null.
responseXML	Trả về một đối tượng Document chứa đáp ứng của yêu cầu, hoặc null nếu yêu cầu không thành công, hoặc yêu cầu không được gửi đi, hoặc không thể phân tích (parse) thành XML hoặc HTML.
status	Trả về một con số mô tả trạng thái đáp ứng của yêu cầu.
statusText	Trả về một DOM String chứa chuỗi nội dung đáp ứng được trả về bởi Http Server. Chẳng hạn "200 OK".

readyState

Các giá trị có thể của readyState:

Trạng thái	Giá trị	Mô tả
UNSENT	0	XMLHttpRequest đã được tạo ra. Nhưng chưa gọi phương thức open().
OPENED	1	open() đã được gọi.
HEADERS_RECEIVED	2	send() đã được gọi, và đã có thông tin headers & status.
LOADING	3	Đang tải; responseText chứa một phần dữ liệu.
DONE	4	Quá trình đọc dữ liệu đã hoàn thành.

responseType

Các giá trị có thể của responseType:

Giá trị	Mô tả
""	Nếu không chỉ định giá trị cho responseType, hoặc giá trị rỗng, nó coi như có giá trị là "text".
"arraybuffer"	Đáp ứng (response) sẽ là một ArrayBuffer chứa dữ liệu nhị phân (binary data).
"blob"	Đáp ứng sẽ là một đối tượng Blob chứa dữ liệu nhị phân.
"document"	Đáp ứng sẽ là một HTML Document hoặc XMLDocument, tương ứng với kiểu MIME (MIME type) của dữ liệu nhận được.
"json"	Đáp ứng sẽ là một đối tượng JavaScript được tạo ra bằng cách phân tích nội dung nhận được như là một JSON.
"text"	Đáp ứng sẽ là một văn bản trong một đối tượng DOMString.

Events

Trong quá trình gửi một yêu cầu để đọc một nguồn dữ liệu từ một URL, XMLHttpRequest sẽ phát ra (fire) các sự kiện được mô tả trong interface ProgressEvent.

Chú ý: Các sự kiện được đánh dấu bởi (?) là tiêu chuẩn thử nghiệm, nó chưa được hỗ trợ bởi hầu hết các trình duyệt.

	Event	Mô tả
?	loadstart	Cho biết quá trình tải (load) dữ liệu đã bắt đầu. Sự kiện này luôn luôn phát ra đầu tiên.
	progress	Sự kiện này phát ra nhiều lần khi dữ liệu đang được tải, cho phép truy cập vào dữ liệu trung gian.
?	error	Sự kiện phát ra khi quá trình tải dữ liệu bị lỗi.
?	abort	Sự kiện phát ra khi việc tải dữ liệu bị hủy bỏ bởi việc gọi phương thức abort() (Phương thức của cả hai XMLHttpRequest & FileReader).
	load	Sự kiện phát ra khi tất cả các dữ liệu đã được tải (load) thành công.
?	loadend	Sự kiện phát ra khi đối tượng đã truyền tải xong dữ liệu. Luôn luôn phát ra sau sự kiện error, abort, hoặc load.

• TODO Link?

Handlers

Chú ý: Các bộ điều khiển (handler) được đánh dấu bởi (?) là một tiêu chuẩn thử nghiệm nó chưa được hỗ trợ bởi hầu hết các trình duyệt.

	Handler	Mô tả
	onreadystatechange(event)	Một bộ xử lý (Handler), nó được gọi khi thuộc tính (property) readyState thay đổi.
?	onloadstart(progressEvt)	Một bộ xử lý (handler) cho sự kiện loadstart.
	onprogress(progressEvt)	Một bộ xử lý (handler) cho sự kiện progress.
?	onerror(progressEvt)	Một bộ xử lý (handler) cho sự kiện error.
?	onabort(progressEvt)	Một bộ xử lý (handler) cho sự kiện abort.
	onload(progressEvt)	Một bộ xử lý (handler) cho sự kiện load.
?	onloadend(progressEvt)	Một bộ xử lý (handler) cho sự kiện loadend.

Các bước để làm việc với XMLHttpRequest

2- Các ví dụ với XMLHttpRequest

Ví dụ sử dụng XMLHttpResponse để đọc nguồn dữ liệu XML cho bởi một URL.

xhr-example.html

    
    
    


    
XMLHttpRequest example
    Reset 


    Click Me
    


    

xhr-example.js

function clickHandler(evt) {
    var URL= "https://ex1.o7planning.com/_testdatas_/simple-xml-data.xml";
    // var URL= "https://ex1.o7planning.com/_testdatas_/triceratops.png";
    resetLog();

    // Create XMLHttpRequest.
    let xhr = new XMLHttpRequest(); 
    appendLog("URL: " + URL);
    appendLog("\n\n");

    xhr.onprogress = function(progressEvent) {
        appendLog("onprogress! " + progressEvent);
    }
    // readyState (State of request):
    // 0 - XMLHttpRequest.UNSENT
    // 1 - XMLHttpRequest.OPENED
    // 2 - XMLHttpRequest.HEADERS_RECEIVED
    // 3 - XMLHttpRequest.LOADING
    // 4 - XMLHttpRequest.DONE
    xhr.onreadystatechange = function(event)  {
        appendLog("onreadystatechange! readyState = " + xhr.readyState);
        appendLog(" status = " + xhr.status);
        appendLog(" statusText = " + xhr.statusText);
    }
    xhr.onload = function(progressEvent) {
        appendLog("onload!");
        appendLog(" status = " + xhr.status);
        appendLog(" statusText = " + xhr.statusText);
        
        appendLog(" ------ xhr.responseText ------: ");
        appendLog(xhr.responseText);

        appendLog(" ------ xhr.responseXML -------: ");
        appendLog(xhr.responseXML); // [object XMLDocument]

        // Convert XMLDocument to String.
        var xmlString = (new XMLSerializer()).serializeToString(xhr.responseXML);
        appendLog(xmlString);
    } 
    xhr.onerror = function(progressEvent) {
        appendLog("onerror!");
        appendLog("Has Error!");
    }
    let async = true;
    // Initialize It.
    xhr.open("GET", URL, async);

    // Send it (Without body data)
    xhr.send();
}
function resetLog() {
    document.getElementById('textarea-log').value = "";
}
function appendLog(msg) {
    document.getElementById('textarea-log').value += "\n" + msg;
}

Trong ví dụ trên tôi không đề cập tới cách làm thế nào để phân tích nội dung XML (XMLDocument), nếu bạn quan tâm có thể tham khảo các bài viết khác dưới đây: