Bài 20: Xử lí các response của server - Dùng thuộc tính innerHTML tạo nội dung động

nguyenac

Administrator
Thành viên BQT
18/11/08
22.554
1
38
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.
  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
HTML:
<!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;
}
}
}
</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
HTML:
<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>
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.
Mã:
[SIZE=2]http://leftlogic.com/info/articles/jquery_spy
http://leftlogic.com/jquery_spy/spy.html[/SIZE] [SIZE=2]http://prototype-window.xilinus.com/
http://prototype-window.xilinus.com/samples.html[/SIZE] [SIZE=2]http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/[/SIZE] [SIZE=2]http://www.dustindiaz.com/ajax-contact-form/
http://www.dustindiaz.com/testJax/[/SIZE] [SIZE=2]http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/
http://www.ajaxlessons.com/demo/workshop2.html[/SIZE] [SIZE=2]http://techfoolery.com/archives/2006/08/11/2021/
http://techfoolery.com/examples/scroller/[/SIZE] [SIZE=2]http://orangoo.com/labs/GreyBox/
http://orangoo.com/labs/greybox/examples.html[/SIZE]
 

Facebook Comment

Find Diễn đàn Công nghệ thông tin và truyền thông on mobile

Thành viên trực tuyến

Không có thành viên trực tuyến.

Thống kê diễn đàn

Chủ đề
31.023
Bài viết
33.076
Unanswered questions
2
Answered questions
2
Thành viên
5.956
Thành viên mới
tienchiase

Mobile app users
0
Latest mobile user

Tài nguyên mới

Mobile app for XenForo 2 by Appify