Xử lý HTTP Request

Để gửi một HTTP Request đến server bằng JavaScript, bạn cần tạo một đối tượng của lớp cung cấp tính năng này. Trong IE thì lớp này tồn tại dưới dạng một đối tượng ActiveX có tên là XMLHTTP. Đối tượng này có từ IE 4.0.

var httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

Nếu MSXML được cài đặt thì bạn cũng có thể gọi:

var httpRequest = new ActiveXObject(“Msxml2.XMLHTTP”);

Ở Mozilla, Firefox, Opera 8.0, Safari và các trình duyệt khác thì lớp này có tên là XMLHttpRequest. Đối tượng XMLHttpRequest không phải là một chuẩn của W3C (tương lai có thể được W3C chấp thuận). Đối tượng XMLHttpRequest được hỗ trợ ở IE 5.0+, Safari 1.2+, Mozilla 1.0+/ Firefox, Opera 8.0+ và Netscape 7+.

var httpRequest = new XMLHttpRequest();

Do sự khác biệt này, nên để ứng dụng của bạn chạy trên nhiều trình duyệt thì bạn có thể làm như sau:

if (window.XMLHttpRequest) { // Mozilla, Safari, …

httpRequest = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

}

Do ActiveX trên IE rất nguy hiểm cho người dùng nên nhiều trường hợp tính năng này được mặc định cấm, vì vậy bạn cần kiểm tra trình duyệt của người sử dụng trước khi gọi đối tượng XMLHTTP. Việc kiểm tra này được thực hiện qua giá trị của window.ActiveXObject. Ví dụ:

if (window.ActiveXObject) {

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”)

}

else { …}

Một số phiên bản của trình duyệt Mozilla không làm việc đúng khi nhận đáp trả từ server không có header chứa XML mime-type. Để khắc phục vấn đề này, bạn có thể sử dụng phương thức định nghĩa lại phần header do server gửi đến trong trường hợp nó không phải là text/xml.

httpRequest = new XMLHttpRequest();

httpRequest.overrideMimeType(text/xml) ;

Tiếp theo, bạn cần xác định muốn làm gì sau khi nhận được đáp trả (response) từ server. Giai đoạn này, bạn chỉ cần báo cho đối tượng HTTP request biết hàm JavaScript sẽ làm công việc xử lý đáp trả. Điều này được thực hiện bằng cách thiết lập thuộc tính onreadystatechange của đối tượng thành tên của hàm JavaScript:

httpRequest.onreadystatechange = nameOfTheFunction;

Chú ý không dùng cặp ngoặc đơn () sau tên hàm và không truyền tham số vào hàm đó. Thêm nữa, thay vì trao tên hàm thì bạn có thể sử dụng kĩ thuật định nghĩa hàm động:

httpRequest.onreadystatechange = function() {

// do the thing

};

Sau khi đã khai báo những gì sẽ diễn ra lúc nhận được response, bạn tiến hành gửi request. Bạn cần gọi các phương thức open() và send() của lớp HTTP request:

httpRequest.open(GET, http://www.example.org/some.file, true);

httpRequest.send(null);

Tham số đầu tiên của lời gọi đến open() là phương thức HTTP Request – GET, POST, HEAD hay bất cứ phương thức nào mà bạn muốn sử dụng và phương thức đó cần được server hỗ trợ. Chú ý viết hoa theo quy định của chuẩn HTTP, nếu không thì một số trình duyệt như Firefox có thể không xử lý request.

Tham số thứ hai là địa chỉ URL của trang mà bạn gửi request đến. Do thiết lập bảo mật, bạn không thể gọi các trang trên tên miền của bên thứ ba. Chú ý là nếu bạn không gọi đúng tên miền trên tất cả các trang thì bạn sẽ nhận được thông báo permission denied khi gọi open().

Tham số thứ ba xác lập request có bất đối xứng hay không (asynchronous). Nếu TRUE, thì việc thực thi hàm JavaScript sẽ tiếp tục trong khi response của server chưa đến. Đây là chữ A trong AJAX.

Tham số gửi đến phương thức send() có thể là bất cứ dữ liệu nào mà bạn muốn gửi tới server nếu bạn dùng phương thức POST để gửi request. Dữ liệu sẽ có dạng của một chuỗi truy vấn:

name=value&anothername=othervalue&so=on

Đối tượng XMLHttpRequest có một tập các thuộc tính dùng chung trên tất cả các môi trường hỗ trợ. Dưới đây là danh sách các thuộc tính chủ yếu của đối tượng này.

Xử lý Server Response

Chú ý khi gửi request, bạn cung cấp tên của hàm JavaScript được thiết kế để xử lý response.

httpRequest.onreadystatechange = nameOfTheFunction;

Hãy xem hàm này nên làm gì. Đầu tiên, hàm cần kiểm tra trạng thái của request. Nếu trạng thái có giá trị là 4, nghĩa là ứng dụng của bạn đã nhận được response đầy đủ từ server và đó là dấu hiệu tốt để bạn tiếp tục xử lý nó.

if (httpRequest.readyState == 4) {

// không xảy ra vấn đề gì và bạn đã nhận được response

} else {

// chưa sẵn sàng

}

Tiếp theo cần kiểm tra mã trạng thái của HTTP server response. Tất cả các mã có thể thàm khảo ở site của W3C. Trong bài viết này, chúng ta quan tâm đến response 200 (OK).

if (httpRequest.status == 200) {

// trạng thái response trả lại dấu hiệu tốt!

} else {

// có vấn đề trong việc tiếp nhận và xử lý request,

// ví dụ 404 (Not Found)

// hay 500 (Internal Server Error)

}

Sau khi đã kiểm tra trạng thái của request và mã trạng thái của HTTP response, việc xử lý dữ liệu mà server gửi tới tùy ở bạn. Bạn có hai lựa chọn:

• httpRequest.responseText – trả lại dưới dạng chuỗi văn bản

• httpRequest.responseXML – trả lại dưới dạng đối tượng XMLDocument và bạn có thể duyệt bằng cách sử dụng các hàm JavaScript DOM

Ví dụ với Text Response

Chúng ta sẽ xây dựng một ví dụ đơn giản. Các mã JavaScript gửi request đến một trang HTML, test.html. Trang này chứa dòng “Im a test”, sau đó chúng ta dùng alert() để gửi ra nội dung của file đó.

style=”cursor: pointer; text-decoration: underline”

onclick=”makeRequest(test.html)”>

Trong ví dụ này, người dùng kích chuột vào liên kết “Make a request” trên trình duyệt, việc này sẽ gọi hàm makeRequest() cùng với một tham số – cái tên test.html của file HTML trong cùng thư mục. Sau đó request được thực hiện.

Tiếp theo, bạn xác định hàm alertContents() sẽ xử lý trường hợp onreadystatechange. alertContents() kiểm tra xem response đã nhận được hay chưa và nếu OK thì nó sẽ thực thi alert() để gửi ra nội dung của file test.html.

Ví dụ với XML Response

Ví dụ vừa khảo sát minh họa cho cách dùng thuộc tính reponseText của đối tượng request. Ví dụ dưới đây sẽ minh họa cho thuộc tính responseXML.

Việc đầu tiên là chuẩn bị trang XML sẽ được dùng cho request về sau. Trang dưới có tên là test.xml:

Im a test.

Trong dòng mã của ví dụ trên chúng ta chỉ cần thay dòng request bằng:

…

onclick=”makeRequest(test.xml)”>

…

Sau đó trong alertContents() chúng ta cần thay dòng alert(httpRequest.responseText); với:

var xmldoc = httpRequest.responseXML;

var root_node = xmldoc.getElementsByTagName(root).item(0);

alert(root_node.firstChild.data);

responseXML lấy giúp chúng ta đối tượng XMLDocument và chúng ta sẽ dùng các phương thức DOM để truy cập một số dữ liệu có trong trang XML.