AJAX，這個技術是透過 JavaScript 中的 XMLHttpRequest 物件去呼叫後端 server code 並動態改變前端的網頁，讓網頁不需要 refresh。
AJAX 的技術並不複雜，大概掌握幾個重點即可：
- XMLHttpRequest 物件將資料傳遞到後端 server 的方式，可分為 POST 與 GET。
- 從 server 回傳的資料可以是 plain text 或是 XML。
- 前端網頁 DOM 的處理........(這其實跟 AJAX 已經沒有太大關係了)
jQuery 與 AJAX 的搭配
直接寫 pure XMLHttpRequest 的程式碼真的太累了，光是 cross browser 的問題就可以搞死人了......不過還好 jQuery 都幫大家處理好啦!
以下用的範例程式來說明：(demo)
ajax01.html
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
//取得 button 物件並註冊 click 事件
$("#btnAJAX").click(function(){
//取得使用者輸入的值
var intValue = $("#txtValue").val();
/* 以 POST 的方式送出 request
傳入參數 : value
參數值 = intValue
callback function 為 function(result){...} */
$.post("server01.php", {value : intValue}, function(result){
$("#spnMain").html("server 端回傳結果 = " + result);
});
});
});
-->
</script>
</head>
<body>
請輸入整數值，server 會計算其平方值並回傳：<p />
<input type="text" id="txtValue" /> <input type="button" id="btnAJAX" value="從 server 端取得結果" /><p />
<span id="spnMain"></span>
</body>
</html>
server01.php
<?php
if(isset($_POST["value"]))
echo $_POST["value"] * $_POST["value"];
else
echo "0";
?>
從上面的範例可以看出，透過 jQuery 物件的 post() 方法就可以直接享受到 AJAX 的好處囉! 當然，也可以用 get() 的方式來達到 AJAX 的效果。
此外，callback function 的部份比較需要注意的就是參數的傳遞了，在 jQuery 中可以允許使用一般的方式或是 context 的方式傳入參數，以下用範例說明：(demo)
ajax02.html
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
<!--
//測試函式
function testFunc(intVal) {
alert("final value is " + (intVal * 2 + 10));
} //end function
$(document).ready(function(){
//取得 button 物件並註冊 click 事件
$("#btnAJAX").click(function(){
//取得使用者輸入的值
var intValue = $("#txtValue").val();
/* 以 POST 的方式送出 request
傳入參數 : value
參數值 = intValue
callback function 為 function(result){...} */
$.post("server.php", {value : intValue}, function(result){
//直接呼叫 function
testFunc(result);
//使用 jQuery context 的方式呼叫 function
testFunc.apply(this, [result]);
});
});
});
-->
</script>
</head>
<body>
請輸入整數值，server 會計算其平方值並回傳：<p />
<input type="text" id="txtValue" /> <input type="button" id="btnAJAX" value="從 server 端取得結果" /><p />
<span id="spnMain"></span>
</body>
</html>
參考資料
沒有留言:
張貼留言