Ajax – Tìm hiểu về XMLHttpRequest

Đối tượng XMLHttpRequest đã xuất hiện khá sớm vào năm 1998, khi Microsoft giới thiệu nó lần đầu trong phiên bản trình duyệt IE 4.0. Tuy nhiên lúc bấy giờ, nó khá hạn chế về chức năng, và sau đó nó đã trở thành một ActiveXObject trong IE 5.0. Việc ứng dụng đối tượng này trở nên phổ biến trong một số dự án của Google, ví dụ như Google Maps và quen thuộc hơn với chúng ta là GMail.

Giới thiệu

Đối tượng XMLHttpRequest là trái tim của lập trình Ajax nghĩa là  XMLHttpRequest chính là đối tượng được dùng để gửi request và nhận response.

Trong các bản Internet Explore 5.0 và 6, XMLHttpRequest thể hiện dưới dạng một ActiveX Object. Còn trong IE 7 về sau và các trình duyệt khác như: FireFox, Safari, Opera, … XMLHttpRequest thể hiện dưới một đối tượng JavaScript được hỗ trợ sẵn. Nên trong mã JavaScript ta phải khởi tạo một XMLHttpRequest bằng cách dùng ActiveX Object và JavaScript Object. Đầu tiên kiểm tra trình duyệt có hỗ trợ ActiveX Object hay không nếu không thì tạo XMLHttpRequest như một JavaScript Object thông thường.

Chú ý     Đối tượng XMLHttpRequest không thể làm việc trên trình duyệt IE 6.0 nếu như ActiveX bị vô hiệu hóa.

Tạo đối tượng XMLHttpRequest

if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera     (1) xmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {try{ xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); //IE 5.x, 6     (2) } catch(e) {} }

(1) Kiểm tra xem trình duyệt có hỗ trợ đối tượng XMLHttpRequest không. Nếu có hỗ trợ thì tạo XMLHttpRequest như một đối tượng JavaScript thông. Các trình duyệt hiện tại đa số đều hỗ trợ đối tượng này nên ta sẽ ưu tiên kiểm tra trước.

(2) Trường hợp trình duyệt không hỗ trợ XMLHttpRequest thì kiểm tra xem trình duyệt có hỗ trợ ActiveX Object hay không, nếu có (Đây chính là Internet Explore 5.x, 6) thì tạo một ActiveX Object thông qua một chuỗi để chỉ định loại ActiveX Object nào, ở đây chính là “Microsoft.XMLHTTP”.

Các phương thức và thuộc tính của XMLHttpRequest

Phương thức:

• open(string method, string url, boolean asynch, string username, string password) hay open(String method, string url): khởi tạo một request đến server.

method: phương thức gửi đi (GET, POST hay PUT)

url: địa chỉ của trang web mà bạn sẽ gọi tới.

asynch: tùy chọn này có nghĩa là bất đồng bộ, với biến này bạn có thể bỏ qua vì giá trị mặc định là true. Nếu chọn false, xử lý sẽ chờ khi nào response được gửi tới mới tiếp tục.

Username, password: sử dụng nếu server yêu cầu.

Ví dụ: Để thực hiện 1 request yêu cầu server trả về nội dung file data.txt nằm trên thư mục chứa trang web trên server thì ta thực hiện như sau:

xmlHttp.open(“get”, “data.txt”, true);

• void send(content): phương thức này thực sự gửi request tới server, nếu request khai báo là bất đồng bộ(asynchronous) thì phương thức này trả về ngay lập tức, ngược lai sẽ chờ cho tới khi nhận được response.

content: có thể là DOM object,  input stream, hay String. Và nội dung của content được gửi như một phần của request.

• void setRequestHeader(string header, string value): dùng để gán giá trị cho một giá trị trong header của HTTP request theo ý muốn. Phương thức này phải được gọi sau phương thức open().
• abort(): Dùng để dừng request.
• getAllResponseHeaders(): Trả về một chuỗi chứa tất cả headers của response. Header bao gồm: Content-Length, Date, and URI.
• getResponseHeader( String header): Nhận vào một tham số thể hiện giá trị của header mà bạn muốn, trả về giá trị dưới dạng chuỗi.

Thuộc tính

• onreadystatechange:  Mỗi lần thuộc tính readyState thay đổi giá trị thì sự kiện readystatechange được phát sinh và hàm xử lí sự kiện onreadystatechange được gọi. Do các browser cài đặt đối tượng XMLHttp khác nhau nên để đảm bảo trang web của mình có thể chạy được trên nhiều browser thì ta chỉ nên dùng các giá trị sau của thuộc tính readyState: 0, 1 và 4

Trong hầu hết các trường hợp, ta chỉ cần xét trường hợp thuộc tính readyState có giá trị là 4, tức là khi toàn bộ dữ liệu từ server đã gởi đến client. Bên dưới sẽ đề cập cụ thể từng giá trị của trạng thái.

• readyState . Trạng thái của request. Có năm giá trị:

0 (Uninitialized):  đối tượng được tạo nhưng phương thức open() chưa được gọi.

1 (Loading): phương thức  open() đã được gọi nhưng request chưa được gửi.

2 (Loaded): Request đã được gửi.

3 (Interactive).   Một phần response được nhận.

4 (Complete): Tất cả dữ liệu được nhận từ response và kết nối được đóng

• responseText:  Response từ server dưới dạng chuỗi.
  • responseXML. Response từ server dưới dạng XML, đối tượng này có thể được phân tích và kiểm tra như một DOM object.
  • status. Trạng thái mã(code) từ server. Ví dụ: 200: OK, 400: Not Found, Bạn có thể tham khảo các mã HTTP Specification để biết chi tiết giá trị của thuộc tính này tại http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10
  • statusText: text ví dụ OK hay Not Found, …

Dùng GET và POST request

• GET request:  khi mục đích là không làm thay đổi trạng thái của server và mô hình dữ liệu của ứng dụng. Như ý nghĩa của nó, mỗi khi bạn thực hiện request này, dữ liệu trả về của nó sẽ như nhau.
• POST request: dữ liệu mà request dạng này gửi cho server có thể được sử dụng để thay đổi trạng thái của ứng dụng; ví dụ như thêm một dòng vào database hoặc xóa thông tin từ server.

 

Một request dạng GET nên được dùng để lấy dữ liệu. Nó có thể cần thiết phải gửi một vài dữ liệu tới server, ví dụ như gửi đi một mã nhân viên để nhận lại thông tin của nhân viên đó. Trong trường hợp dữ liệu được gửi đến server để tạo thay đổi nào đó, bạn nên sử dụng POST.

Tuy nhiên, về mặt bảo mật, người ta thường sử dụng POST thay cho GET, vì việc dùng GET sẽ chuyển dữ liệu thành một chuỗi truy vấn và người dùng có thể nhìn được chuỗi truy vấn này.

(Bài sau: Ví dụ minh họa sử dụng XMLHttpRequest)

https://yinyangit.wordpress.com