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, resp
Trang 1Bà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
Trang 23 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”
< 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 ) {
}
else if ( window XMLHttpRequest ) {
}
}
function startRequest () {
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 ;
Trang 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 >
Trang 4Cũ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