Hello! Ajax!

导读：
　　來撰寫您第一個Ajax程式，使用非同步的方式向伺服端取得文字檔案，並加以顯示，首先請準備一個HTML網頁：
　　HelloAjaxEx-1.html
　　
　　
　　
　　
　　 <script type="text/javascript" src="HelloAjaxEx-1.js"></script>
　　
　　
　　
　　
　　
　　這個HTML網頁會取得JavaScript檔案，而按下按鈕後，會執行startRequest()函式，JavaScript檔案如下所示：
　　HelloAjaxEx-1.js var xmlHttp;
　　function createXMLHttpRequest() {
　　if(window.XMLHttpRequest) {
　　xmlHttp = new XMLHttpRequest();
　　}
　　else if(window.ActiveXObject) {
　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　}
　　function startRequest() {
　　createXMLHttpRequest();
　　xmlHttp.onreadystatechange = handleStateChange;
　　xmlHttp.open("GET", "HelloAjaxEx-1.txt");
　　xmlHttp.send(null);
　　}
　　function handleStateChange() {
　　if(xmlHttp.readyState == 4) {
　　if(xmlHttp.status == 200) {
　　alert("伺服端回應：" + xmlHttp.responseText);
　　}
　　}
　　}
　　在startRequest()中會建立XMLHttpRequest，並發出非同步請求取得HelloAjaxEx-1.txt，在當中只是簡單的文字訊息，注意如果當中要撰寫中文，則文字檔案必須儲存為UTF8，假設HelloAjaxEx1.txt如下撰寫：
　　HelloAjaxEx1.txt 這是非同步請求的回應文字
　　您可以按下 鏈結來觀看結果。
　　您可以結合DOM來顯示取得的回應文字，不必使用對話方塊或重清（Refresh）網頁，例如在網頁中設定一個

：
　　HelloAjaxEx-2.html
　　
　　
　　
　　
　　<script type="text/javascript" src="HelloAjaxEx-2.js"></script>
　　
　　
　　
　　
　　

　　

　　
　　
　　
　　而HelloAjaxEx-2.js可以改寫如下：
　　HelloAjaxEx-2.js var xmlHttp;
　　function createXMLHttpRequest() {
　　if(window.XMLHttpRequest) {
　　xmlHttp = new XMLHttpRequest();
　　}
　　else if(window.ActiveXObject) {
　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　}
　　function startRequest() {
　　createXMLHttpRequest();
　　xmlHttp.onreadystatechange = handleStateChange;
　　xmlHttp.open("GET", "HelloAjaxEx-2.txt");
　　xmlHttp.send(null);
　　}
　　function handleStateChange() {
　　if(xmlHttp.readyState == 4) {
　　if(xmlHttp.status == 200) {
　　 document.getElementById("response").innerHTML =
　　 xmlHttp.responseText;
　　}
　　}
　　}
　　在這邊為了簡化範例，直接使用DOM物件的innerHTML屬性，您可以按 鏈結觀看結果。
　　Trackback: http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=1511605

本文转自
http://blog.youkuaiyun.com/caterpillar_here/archive/2007/02/18/1511605.aspx