摘要:Javascript AJAX機制--"XMLHttpRequest"
繼前篇的JQery AJAX機制--"$.post"，順便就把Javascript的AJAX技術順便寫一下好了
(迷之聲:美好的星期五下班不回家，寫甚麼鬼文章阿!!)
不囉嗦，還是直接用實例說明比較快。
Client Side：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var xmlhttp;
function createxmlhttp() {
//IE
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
//Firefox
xmlhttp = new XMLHttpRequest;
}
xmlhttp.onreadystatechange = ajax;
xmlhttp.open("get", location.href + '?a=1', true)
xmlhttp.send(null)
}
function ajax() {
//0未初始化 1正在載入 2己載入 3互動中 4完成
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.getElementById('showtxt').innerHTML = xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="button" />
<div id="showtxt"></div>
</form>
</body>
</html>
首先我們在建立XMLHttpRequest 物件的事情會遇到，因為瀏覽器不同，而且不同的語法
(寫前端的人真的很辛苦，常常要配合工具)，因此我在JS上判斷了一下，取得XMLHttpRequest
物件之後，我們要向遠端某個網址要求資料，這裡我說明一下open()內帶的三個參數，
參數一：Htpp的方法，有get、post(本例用get說明)。
參數二：向哪個url取得資料。
參數三：是不是非同步。
由於本範例是用get的方式，因此send用null，由於我在server side要讓讀者能感覺出ajax的fu，
我帶個一個參數 ? a=1給這個要求取得資料的網址 。
在open以及send之前，我們需要一個函式處理 "當ajax完成了之後傳回的資料的後續動作"，
因此在xmlhttp.onreadystatechange我設定=ajax這個js funtcion去處理後續的動作，
讓我們來看看ajax這支function，我們的xmlhttp會有四種狀態(通常我們都是處理完成的狀態)
0:xmlhttp尚未初始化(還沒呼叫open)
1:xmlhttp載入中(open完了，尚未呼叫send)
2:xmlhttp已經載入了。
3:xmlhttp互動中。
4:完全完成。
server處理結束之後，會回傳一個處理結果，但這個結果可能成功或是失敗(成功的狀態=200)
判斷為200後再去做後續的處理。
PS.值得注意的是我們只能取在同一個domain的資料，跨網域似乎就不行了(不知道能不能放個crossdomain.xml)就抓得到
這部分就要再去測試看看就知道了 ^_^。
Server Side：
Protected Sub form1_Load(sender As Object, e As System.EventArgs) Handles form1.Load
If Not String.IsNullOrEmpty(Request("a")) Then
Response.Write("馬久里，你還不趕快下班")
Response.End()
End If
End Sub
瀏覽畫面:
如此就完成了Javascript的AJAX了，至於用post的方法，之後再補上一篇了，美好的星期五要趕快下班才行。