AJAX - Bài 1 - Bài Học Đầu Tiên

**letulong** · #1 01-19-2010, 10:09 AM

Trước khi bắt đầu học về AJAX, bạn nên chuẩn bị kiến thức cơ bản về:

HTML / XHTML
JavaScript

Nào. Chúng ta bắt đầu:

Chúng ta sẽ tạo ra một ứng dụng AJAX từ đầu. Các ứng dụng sẽ sử dụng hai nút bấm để lấy dữ liệu từ một máy chủ và hiển thị thông tin trong một trang web, mà không cần tải lại các trang đó.

Đầu tiên chúng ta tạo ra một trang HTML nhỏ với một đoạn ngắn <div>. Các <div> sẽ được sử dụng để hiển thị thông tin khác theo yêu cầu từ một máy chủ.

Để xác định phần <div>, chúng tôi sử dụng một id = "test" thuộc tính:

HTML Code:

<html>
<body>

<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>

<body>
</html>

Bây giờ chúng ta thêm hai Nút đơn giản <buttons>. Các nút sẽ gọi một chức năng gọi loadXMLDoc (), khi được Click vào:

HTML Code:

<button type="button" onclick="loadXMLDoc('test1.txt')">Click Me</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button>

Cuối cùng. Chúng ta cần khai báo <script> ở Header là xong:

HTML Code:

<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
</head>

Các bài học tiếp theo sẽ giải thích kịch bản (sử dụng AJAX), và làm thế nào để ứng dụng.

Thân!

**letulong** · #2 02-27-2010, 03:33 PM

File đính kèm ví dụ.

Công cụ bài viết
Hiện bản có thể in Email trang này
Kiểu hiển thị
Dạng hẹp Chuyển sang dạng Hybrid (Lai ghép) Chuyển sang dạng Threaded

The Following User Says Thank You to letulong For This Useful Post:
Nhàn (01-19-2010)

(View-All) Members who have read this thread : 5
haiau_bienxanh, letulong, Nhokpun_it, vmtri66, vuquangbg