AJAX – Tương lai của Web 2.0 Collection by traibingo 1 Bài 15: Đối tượng XMLHttpRequest - Gửi các request. Bây giờ ta sẽ thảo luận xem cách sử dụng đối tượng XMLHttpRequest. Ở các phần trước đã đề cập đến cách tạo đối tượng này, bây giờ ta sẽ chỉ ra làm thế nào để gửi request tới server và xử lí các response từ server. Request đơn giản nhất là một request mà không chứa một thông tin nào cả, tức là các form tham số truy vấn hay form gửi dữ liệu là trống. Trong thực tế thì luôn gửi các request mang thông tin đến server. Các bước cơ bản để gửi request dùng đối tượng XMLHttpRequest là: 1. Dùng một tham chiếu tới một thể hiện của XMLHttpRequest, có thể bằng cách tạo mới hay truy cập vào một biến có thể hiện của XMLHttpRequest. 2. Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của XMLHttpRequest. Ta hoàn thành việc này bằng cách thiết lập thuộc tính onreadystatechange của đối tượng với một con trỏ về một hàm JavaScript. 3. Gán các thuộc tính của request. Phương thức open() của đối tượng XMLHttpRequest được gán về request trạng thái đợi. Phương thức open() có ba tham số: một biến string chỉ báo (thường dùng GET hay POST), một biến string biểu diễn địa chỉ URL của tài nguyên, một biến boolean chỉ báo request sẽ là bất đồng bộ. 4. Gửi request tới server. Phương thức send() sẽ truyền request để yêu cầu tài nguyên. Phương thức send() chấp nhận một tham số, thông thường là một biến kiểu string hay một đối tượng DOM. Tham số này được truyền tới địa chỉ URL đích như là một phần của request. Khi truyển tham số cho send(), phải đảm bảo rằng kiểu phương thức được gán trong open() là POST. Sử dụng null khi không có dữ liệu nào được gửi với request. Có thể diễn giải các bước trên như sau: cần một thể hiện của đối tượng XMLHttpRequest, chỉ ra xem nó cần làm gì khi thay đổi trạng thái, khi nào thì gửi các request và gửi như thế nào, và cuối cùng là định hướng XMLHttpRequest để truyền request. Ta xét khái niệm con trỏ hàm, nó cũng gần giống con trỏ dữ liệu, ngoại trừ thay vì trỏ vào dữ liệu thì nó trỏ vào một hàm. Trong JavaScript, tất cả các hàm đều được định địa chỉ trong bộ nhớ và có thể tham chiếu bằng tên hàm. Điều này cho ta một cách truyền tham số qua con trỏ hàm rất linh động và mềm dẻo hay lưu trữ một con trỏ hàm trong một thuộc tính của lớp. Đối với đối tượng XMLHttpRequest, thuộc tính onreadystatechange lưu trữ một con trỏ tới hàm callback. Hàm callback được gọi khi trạng thái nội tại của đối tượng XMLHttpRequest thay đổi. Khi một lời gọi bất đồng bộ được tạo ra, request được truyền đi, và script tiếp tục xử lí ngay lập tức – nó sẽ không đợi request được đáp ứng để tiếp tục. Mỗi lần request được gửi đi, thuộc tính readyState của đối tượng sẽ thay đổi. AJAX – Tương lai của Web 2.0 Collection by traibingo 2 Ví dụ về một Request đơn giản Trong ví dụ này, có một trang HTML với một nút bấm. Khi nhấn vào nút bấm, sẽ khởi tạo một request bất đồng bộ gửi tới server. Server sẽ đáp ứng bằng cách gửi một file text đơn giản. Response được hiển thị nội dung trên một cửa sổ alert. simpleRequest.html Trích: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <title>Simple XMLHttpRequest</title> <script type=“text/javascript”> var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(“GET”, “simpleResponse.xml”, true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert(“The server replied with:” + xmlHttp.responseText); } } } </script> </head> <body> <form action=”#”> <input type=”button” value=”Start Basic Asynchronous Request” onclick=”startRequest();”/> AJAX – Tương lai của Web 2.0 Collection by traibingo 3 </form> </body> </html> File response của server, simpleResponse.xml, chứa một dòng text duy nhất. Khi nhấn vào nút bấm trên trang HTML sẽ trả về một hộp alert với nội dung của file simpleResponse.xml. Request tới server được gửi một cách bất đồng bộ, cho phép trình duyệt tiếp tục đáp ứng người dùng trong khi chờ đợi response của server phía background (còn được gọi là AjaxEngine). Nếu một thao tác bất đồng bộ được chọn và nếu response của server cần vài giây để trả về, trình duyệt sẽ không thể đáp ứng người dùng trong thời gian đợi. Sự bất đồng bộ có thể cải thiện tình trạng này bằng cách tránh hiển thị khi trình duyệt bị tê liệt và không thể đáp ứng người dùng. Điều này cho phép người dùng tiếp tục làm việc trong khi server tiếp tục làm việc với request trước trong background. Khả năng liên lạc với server; không có lỗi ngắt; với luồng làm việc của người dùng đã mở ra rất nhiều kỹ thuật cải thiện cho phía người dùng. Một ứng dụng, chẳng hạn như chứng thực dữ liệu nhập từ người dùng. Khi một người dùng điền vào một trường dữ liệu trên form nhập, trình duyệt có thể định kỳ liên tục gửi các form giá trị tới server để kiểm chứng mà không cần ngắt quãng quá trình điền dữ liệu vào form nhập. Nếu nhập dữ liệu không đúng, người dùng có thể ngay lập tức được thông báo, trước khi form thực sự được gửi đến server để xử lí, điều này tiết kiệm được thời gian và giảm quá trình nạp dữ liệu trên server, nội dung của form sẽ không được nạp lại sau một form đệ trình không thành công. Vấn đề bảo mật: Bất kỳ một công nghệ nào dựa trên nền tảng trình duyệt sẽ không trọn vẹn nếu bỏ qua vấn đề bảo mật. Đối tượng XMLHttpRequest được xử lí bảo mật theo mô hình “sandbox” của trình duyệt. Sức mạnh của phương pháp bảo mật giới hạn này tùy thuộc vào từng trình duyệt. Internet Explorer hiển thị một cảnh báo tình trạng một nguy cơ không an toàn có thể tồn tại và cho phép người dùng sự lựa chọn có tiếp tục với request đó nữa hay không. Trình duyệt Firefox sẽ dừng request lại và hiển thị thông điệp lỗi trên JavaScript. Bài sau chúng ta sẽ cùng nhau thảo luận về: DOM Level 3 và DOM để kết thúc phần: Đối tượng XMLHttpRequest. Đồng thời có tổng kết luôn. Bài 16: Đối tượng XMLHttpRequest - DOM Level 3 và DOM. DOM Level 3 AJAX – Tương lai của Web 2.0 Collection by traibingo 4 Các giải pháp đã thảo luận ở trên không phải là các chuẩn. Mặc dù XMLHttpRequest đã được hỗ trợ rất rộng, song vẫn có thể thấy một số sự khác biệt với từng trình duyệt. Nhiều người tin rằng Ajax dựa vào sự hỗ trợ của W3C; tuy nhiên thực tế không phải vậy. W3C đã bắt đầu chú trọng vào điều này và một chuẩn mới được công bố: DOM Level 3 Load and Save Specification. Đặc tả này được thiết kế như một platform độc lập với các ngôn ngữ để thay đối nội dung một tàiliệu DOM với XML. Phiên bản 1.0 được giới thiệu vào tháng 4/2004, nhưng hiện thời chưa trình duyệt nào thực hiện theo nó DOM DOM là một đặc tả của W3C cho một platform độc lập với ngôn ngữ lập trình để truy cập và sửa đổi nội dung và cấu trúc của tài liệu. Một cách hiểu khác, nó là một cách thông dụng để biểu diễn và thao tác một tàiliệu HTML hay XML. Một điều quan trọng cần lưu ý là thiết kế của DOM dựa trên đặc tả của Object Management Group, cho phép sử dụng với bất kỳ ngôn ngữ lập trình nào. Ban đầu DOM được thiết kế để làm cho JavaScript linh động với các trình duyệt, sau đó nó phát triển ra khỏi giới hạn này. DOM là một mô hình đối tượng trong ngữ cảnh hướng đối tượng. DOM xác định các đối tượng cần thiết để biểu diễn và thay đổi tài liệu, các hành vi và thuộc tính của các đối tượng này, và mối liên hệ giữa các đối tượng. Có thể coi DOM như một cây biểu diễn dữ liệu và cấu trúc của trang web, mặc dù thực tế nó có thể không theo cách như vậy. Simple Table Trích: <table> <tbody> <tr> <td>Foo</td> <td>Bar</td> </tr> </tbody> </table> Có thể biểu diễn theo DOM của bảng trên. Lợi thế của đặc tả DOM là nó cung cấp một chuẩn để tương tác với tài liệu. Không có DOM, không thể thực thi được Ajax. DOM không chỉ cho phép duyệt và chỉnh sửa nội dung, mà còn làm cho trang web trở thành các trang động. Kết luận cho các loạt bài về: Đối tượng XMLHttpRequest Chúng ta vừa xem xét các kỹ thuật cơ bản và là “trái tim” của Ajax, đối tượng XMLHttpRequest.Với sự kết hợp giữa JavaScript và một số thao tác DOM, Ajax cho phép một mức độ tương tác chưa từng có từ trước đến nay. Với XMLHttpRequest ta không còn đợi quá trình tái nạp trang web và sự đồng bộ với server nữa. AJAX – Tương lai của Web 2.0 Collection by traibingo 5 Trong phần sau chúng ta sẽ cùng nhau nghiên cứu về: Gửi các request và xử lý response Sau đó mới đến: Kỹ thuật lập trình với AJAX. . sửa đổi nội dung và cấu trúc của tài liệu. Một cách hiểu khác, nó là một cách thông dụng để biểu diễn và thao tác một tài liệu HTML hay XML. Một điều quan. thay đổi tài liệu, các hành vi và thuộc tính của các đối tượng này, và mối liên hệ giữa các đối tượng. Có thể coi DOM như một cây biểu diễn dữ liệu và cấu