Gốc > Thế giới Tin học > Lập trình > Javascript >
Ví dụ đầu tiên về Ajax
Mô tả ví dụ: Trang web sẽ có 2 input dạng text, khi ta viết vào ô Name thì ô Time sẽ hiện lên giờ hiện tại. Ví dụ này ta dùng asp và ajax
Lưu ý: Phải chạy trên server, nếu cài IIS (dùng localhost) thì bạn tạo 2 file trong thư mục wwwroot là: test1.htm và test2.asp. Nội dung của 2 file như sau:
test1.htm
Lê Khắc Thành Đạt @ 13:41 29/06/2011
Số lượt xem: 563
AJAX là gì ? Ví dụ đầu tiên về Ajax
Cái tên AJAX có thể khá lạ lẫm so với nhiều người nhưng khi bạn tìm hiểu nó bạn sẽ thấy nó chỉ là sự kết hợp của những ngôn ngữ cũ mà thôi. AJAX - "Asynchronous JavaScript and XML" - nghĩa là "JavaScript và XML không đồng bộ" là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet (rich Internet application). Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 nãm trước. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ.
- HTML
- Mô hình DOM (Document Object Model)
- Đối tượng XMLHttpRequest
- XML
Chúng ta hãy cùng so sánh nó với các ứng dụng web truyền thống
- HTML
- Mô hình DOM (Document Object Model)
- Đối tượng XMLHttpRequest
- XML
Chúng ta hãy cùng so sánh nó với các ứng dụng web truyền thống
Ví dụ đầu tiên về Ajax
Mô tả ví dụ: Trang web sẽ có 2 input dạng text, khi ta viết vào ô Name thì ô Time sẽ hiện lên giờ hiện tại. Ví dụ này ta dùng asp và ajax
Lưu ý: Phải chạy trên server, nếu cài IIS (dùng localhost) thì bạn tạo 2 file trong thư mục wwwroot là: test1.htm và test2.asp. Nội dung của 2 file như sau:
test1.htm
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript">
function ajaxFunction(num) {
var xmlHttp,url;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText;
}
}
url="test2.asp";
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="myForm"> Name:
<input type="text" onkeyup="ajaxFunction(this.value)" name="username" >
Time: <input type="text" name="time" >
</form>
</body>
</html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript">
function ajaxFunction(num) {
var xmlHttp,url;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText;
}
}
url="test2.asp";
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="myForm"> Name:
<input type="text" onkeyup="ajaxFunction(this.value)" name="username" >
Time: <input type="text" name="time" >
</form>
</body>
</html>
test2.asp
<%response.Expires=-1%> <%=now()%>
Sau khi lưu chúng vào thư mục gốc (mặc định khi cài IIS là wwwroot) bạn gõ trong trình duyệt: http://localhost/test1.htm
Sau đó nhập thử một kí tự bất kì vào ô Name và nhận kết quả bên ô time
Demo: http://robovt.com/2009/data/tut/ajax-demo.htm
Sau đó nhập thử một kí tự bất kì vào ô Name và nhận kết quả bên ô time
Demo: http://robovt.com/2009/data/tut/ajax-demo.htm
Chúc bạn thành công!
Lê Khắc Thành Đạt @ 13:41 29/06/2011
Số lượt xem: 563
Số lượt thích:
0 người
- [JavaScript] Xây dựng 1 Rich Text Editor (29/06/11)
Các ý kiến mới nhất