AJAX toàn tập part 10

Bài 20: Xử lí các response của server - Dùng thuộc tính innerHTML tạo nội dung độngXMLHttpRequest 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...
Nội dung trích xuất từ tài liệu:
AJAX toàn tập part 10AJAX – Tương lai của Web 2.0 Bài 20: Xử lí các response của server - Dùng thuộc tính innerHTML tạo nội dung độngXMLHttpRequest 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ạngmộ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áctrường hợp sử dụng đơn giản, chẳng hạn như hiển thị response trong một alert hayresponse 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 độngTruy 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ớiJavaScript. Và rất khó khăn khi dùng các response dạng text để tạo nội dung độngcho 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ínhinnerHTML của các phần tử HTML. Thuộc tính innerHTML không phải là mộtchuẩn, đầu tiên nó được đưa ra trong Internet Explorer và sau đó xuất hiện trongnhiề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ộtthẻ mở và thẻ đóng. Bằng cách dùng kết hợp responseText và innerHTML, servercó thể đưa ra các đoạn mã HTML sẽ được hiển thị bởi các trình duyệt qua thuộctí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ộctính responseText, và innerHTML của các phần tử HTML. Khi nhấn vào nút bấmsẽ 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.Collection by traibingo 1AJAX – Tương lai của Web 2.0 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.htmlPHP Code:Using responseText with innerHTMLvar 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;Collection by traibingo 2AJAX – Tương lai của Web 2.0}}}innerHTML.xmlPHP Code:Activity NameLocationTimeWaterskiingDock #19:00 AMVolleyballEast Court2:00 PMHikingTrail 33:30 PMCollection by traibingo 3AJAX – Tương lai của Web 2.0Cũng phải nói thêm một chút: Dùng responseText và innerHTML làm đơn giảnquá 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ữngnhượ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ànhAJAX. Các bạn có thể download hoặc copy script từ những trang này.http://leftlogic.com/info/articles/jquery_spyhttp://leftlogic.com/jquery_spy/spy.htmlhttp://prototype-window.xilinus.com/http://prototype-window.xilinus.com/samples.htmlhttp://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.htmlhttp://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ộ để ...