Thông tin tài liệu
AJAX – Tương lai của Web 2.0 Collection by traibingo 1 Bài 20: Xử lí các response của server - Dùng thuộc tính innerHTML tạo nội dung động XMLHttpRequest cung cấp hai thuộc tính để truy cập vào response của server. Thuộc tính đầu tiên, responseText, chỉ đơn giản là cung cấp response dưới dạng một biến string. Thuộc tính thứ hai, responseXML, cung cấp response dưới dạng đối tượng XML. Truy cập response dưới dạng text đơn giản rất thuận lợi cho các trường hợp sử dụng đơn giản, chẳng hạn như hiển thị response trong một alert hay response là một cấu trúc đơn giản thông báo thành công hay bị lỗi. Dùng thuộc tính innerHTML để tạo nội dung động Truy cập vào response như một đoạn text đơn giản không thật mềm dẻo và linh động. Các đoạn text không có cấu trúc và rất khó phân tách một cách logic với JavaScript. Và rất khó khăn khi dùng các response dạng text để tạo nội dung động cho các trang web. Thuộc tính responseText trở nên hữu ích nếu ta dùng nó chung với thuộc tính innerHTML của các phần tử HTML. Thuộc tính innerHTML không phải là một chuẩn, đầu tiên nó được đưa ra trong Internet Explorer và sau đó xuất hiện trong nhiều trình duyệt khác. Nó đơn giản là một xâu kí tự biểu diễn nội dung giữa một thẻ mở và thẻ đóng. Bằng cách dùng kết hợp responseText và innerHTML, server có thể đưa ra các đoạn mã HTML sẽ được hiển thị bởi các trình duyệt qua thuộc tính innerHTML. Ví dụ sau sẽ chỉ ra cách dùng hàm tìm kiếm sử dụng XMLHttpRequest, các thuộc tính responseText, và innerHTML của các phần tử HTML. Khi nhấn vào nút bấm sẽ khởi tạo một thao tác tìm kiếm trên server. Server sẽ trả về một bảng kết quả. Trình duyệt xử lí response bằng cách thiết lập thuộc tính innerHTML của phần tử div bằng giá trị của thuộc tính responseText của XMLHttpRequest. 1. Khi nhấn vào nút tìm kiếm, sẽ gọi đến hàm startRequest, đầu tiên nó gọi đến hàm createXMLHttpRequest để tạo một thể hiện của XMLHttpRequest. 2. Hàm startRequest thiết lập hàm callback với hàm handleStateChange. AJAX – Tương lai của Web 2.0 Collection by traibingo 2 3. Hàm startRequest tiếp tục sử dụng phương thức open() để thiết lập phương thức yêu cầu (GET) và tài nguyên đích cũng như việc thực hiện yêu cầu không đồng bộ. 4. Các yêu cầu sau đó được gửi bằng phương thức send() của XMLHttpRequest. 5. Mỗi lần trạng thái nội tại của XMLHttpRequest thay đổi, hàm handleStateChange được gọi. Mỗi lần nhận một response (được chỉ báo bởi thuộc tính readyState có giá trị là 4), thuộc tính innerHTML của các phần tử div được thiết lập bằng thuộc tính responseText của XMLHttpRequest. Ví dụ Code xem bài viết dưới. innerHTML.html PHP Code: <!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>Using responseText with innerHTML</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”, “innerHTML.xml”, true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { document.getElementById(“results”).innerHTML = xmlHttp.responseText; AJAX – Tương lai của Web 2.0 Collection by traibingo 3 } } } </script> </head> <body> <form action=”#”> <input type=”button” value=”Search for Today’s Activities” onclick=”startRequest();”/> </form> <div id=”results”></div> </body> </html> innerHTML.xml PHP Code: <table border=“1″> <tbody> <tr> <th>Activity Name</th> <th>Location</th> <th>Time</th> </tr> <tr> <td>Waterskiing</td> <td>Dock #1</td> <td>9:00 AM</td> </tr> <tr> <td>Volleyball</td> <td>East Court</td> <td>2:00 PM</td> </tr> <tr> <td>Hiking</td> <td>Trail 3</td> <td>3:30 PM</td> </tr> </tbody> </table> AJAX – Tương lai của Web 2.0 Collection by traibingo 4 Cũng phải nói thêm một chút: Dùng responseText và innerHTML làm đơn giản quá hóa việc chỉnh sửa nội dung trang web động. Cách tiếp cận này cũng có những nhược điểm, đó là innerHTML không phải là một thuộc tính chuẩn của HTML. Tuy nhiên hầu hết các trình duyệt đều hỗ trợ thuộc tính này!!! Đây là 7 trang và demo của nó mà theo tôi là tuyệt vời nhất để học thực hành AJAX. Các bạn có thể download hoặc copy script từ những trang này. http://leftlogic.com/info/articles/jquery_spy http://leftlogic.com/jquery_spy/spy.html http://prototype-window.xilinus.com/ http://prototype-window.xilinus.com/samples.html http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/ http://www.dustindiaz.com/ajax-contact-form/ http://www.dustindiaz.com/testJax/ http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed- content/ http://www.ajaxlessons.com/demo/workshop2.html http://techfoolery.com/archives/2006/08/11/2021/ http://techfoolery.com/examples/scroller/ http://orangoo.com/labs/GreyBox/ http://orangoo.com/labs/greybox/examples.html Đây là file hướng dẫn làm project về ajax! Chỉ là bước đầu về ajax không dùng server side script, chỉ là html + javascript và kiến thức về xml thôi. Post thêm thằng XML & XML DOM + Ví dụ cho đủ bộ để có thể làm AJAX một cách đơn giản. Click to save . http://www.masugadesign.com/the-lab/scripts/unobtrusive -ajax- star-rating-bar/ http://www.dustindiaz.com /ajax- contact-form/ http://www.dustindiaz.com/testJax/ http://www.ajaxlessons.com/2006/02/18 /ajax- workshop-2-building-tabbed-. if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { document.getElementById(“results”).innerHTML = xmlHttp.responseText; AJAX – Tương lai của Web 2.0 Collection by
Ngày đăng: 24/12/2013, 01:17
Xem thêm: Tài liệu AJAX toàn tập part 10 doc, Tài liệu AJAX toàn tập part 10 doc
