BossFTP
21-12-2008, 20:12
Tình hình là spam hoài mỏi tay quá, làm cái tut chơi ^_^
----------------
Bài viết này dành cho những ai muốn áp dụng ajax nhanh, gọn, lẹ mà lại không cần phải bỏ ra hàng giờ nghiên cứu về ajax.
Tìm hiểu về AJAX tại đây :) (http://www.google.com/search?hl=en&q=ajax&btnG=Google+Search&aq=f&oq=)
AJAX thực dụng
Demo: http://www.bossftp.com/file/ajax/
Download demo: http://www.bossftp.com/file/ajax/ajax.zip
Em sẽ làm thử một ví dụ đơn giản: Người dùng click vào một trong hai nút GET và POST, ajax sẽ tạo request gửi lên server, sau đó in kết quả ra màn hình.
Các bạn tạo file ajax.js có nội dung như sau:
function create_ajax() {
ajax=window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
ajax.onreadystatechange=function() {
if(ajax.readyState==4&&ajax.status==200) {
do_ajax(ajax.responseText);
}
};
return ajax;
}
function ajax_get(ajax, request) {
ajax.open("GET", request, true);
ajax.send("");
}
function ajax_post(ajax, file, post_str) {
ajax.open("POST", file, true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(post_str);
}
Giải thích:
create_ajax: tạo ra một đối tượng ajax,
ajax_get: gửi request theo phương thức GET (<form method="get">)
ajax_post: gửi request theo phương thức POST (<form method="post">)
trong đó:
ajax: giá trị trả về của hàm create_ajax
request: yêu cầu theo phương thức GET (get.php?var=value&var2=value2)
file, post_str: file thực thi trên server (.php, .asp, .html, ...) và các biến (post.php, var=value&var2=value2)
do_ajax: hàm xử lý kết quả trả về (in ra màn hình document.write, thông báo alert)
Để sử dụng ajax, các bạn chỉ cần xác định: phương thức gọi (get hay post), file cần gọi, các biến cần gọi, hàm xử lý kết quả trả về.
Trong ví dụ này, hàm do_ajax sẽ in ra màn hình thông qua div id msg_board
function do_ajax(str) {
msg_board.innerHTML=str;
}
Đây là code HTML mẫu để gọi ajax:
<html>
<head>
<title>Simple Ajax</title>
</head>
<body>
<script src="ajax.js"></script>
<script>
function do_ajax(str) {
msg_board.innerHTML=str;
}
function get() {
msg_board.innerHTML="Please wait while getting...";
aj=create_ajax();
ajax_get(aj, "file.php?var1=some&var2=thing");
}
function post() {
msg_board.innerHTML="Please wait while posting...";
aj=create_ajax();
ajax_post(aj, "file.php", "var1=some&var2=thing");
}
</script>
<input type="button" onclick="get();" value="GET" />
<input type="button" onclick="post();" value="POST" />
<div id="msg_board">Text here</div>
</body>
</html>
Thấy chỗ nào chưa ổn các bác góp ý giùm em ^_^
----------------
Bài viết này dành cho những ai muốn áp dụng ajax nhanh, gọn, lẹ mà lại không cần phải bỏ ra hàng giờ nghiên cứu về ajax.
Tìm hiểu về AJAX tại đây :) (http://www.google.com/search?hl=en&q=ajax&btnG=Google+Search&aq=f&oq=)
AJAX thực dụng
Demo: http://www.bossftp.com/file/ajax/
Download demo: http://www.bossftp.com/file/ajax/ajax.zip
Em sẽ làm thử một ví dụ đơn giản: Người dùng click vào một trong hai nút GET và POST, ajax sẽ tạo request gửi lên server, sau đó in kết quả ra màn hình.
Các bạn tạo file ajax.js có nội dung như sau:
function create_ajax() {
ajax=window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
ajax.onreadystatechange=function() {
if(ajax.readyState==4&&ajax.status==200) {
do_ajax(ajax.responseText);
}
};
return ajax;
}
function ajax_get(ajax, request) {
ajax.open("GET", request, true);
ajax.send("");
}
function ajax_post(ajax, file, post_str) {
ajax.open("POST", file, true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(post_str);
}
Giải thích:
create_ajax: tạo ra một đối tượng ajax,
ajax_get: gửi request theo phương thức GET (<form method="get">)
ajax_post: gửi request theo phương thức POST (<form method="post">)
trong đó:
ajax: giá trị trả về của hàm create_ajax
request: yêu cầu theo phương thức GET (get.php?var=value&var2=value2)
file, post_str: file thực thi trên server (.php, .asp, .html, ...) và các biến (post.php, var=value&var2=value2)
do_ajax: hàm xử lý kết quả trả về (in ra màn hình document.write, thông báo alert)
Để sử dụng ajax, các bạn chỉ cần xác định: phương thức gọi (get hay post), file cần gọi, các biến cần gọi, hàm xử lý kết quả trả về.
Trong ví dụ này, hàm do_ajax sẽ in ra màn hình thông qua div id msg_board
function do_ajax(str) {
msg_board.innerHTML=str;
}
Đây là code HTML mẫu để gọi ajax:
<html>
<head>
<title>Simple Ajax</title>
</head>
<body>
<script src="ajax.js"></script>
<script>
function do_ajax(str) {
msg_board.innerHTML=str;
}
function get() {
msg_board.innerHTML="Please wait while getting...";
aj=create_ajax();
ajax_get(aj, "file.php?var1=some&var2=thing");
}
function post() {
msg_board.innerHTML="Please wait while posting...";
aj=create_ajax();
ajax_post(aj, "file.php", "var1=some&var2=thing");
}
</script>
<input type="button" onclick="get();" value="GET" />
<input type="button" onclick="post();" value="POST" />
<div id="msg_board">Text here</div>
</body>
</html>
Thấy chỗ nào chưa ổn các bác góp ý giùm em ^_^