JavaScript AJAX 教學 - JS 與伺服器的互動 By 彭彭 23 #網頁前端工程入門

9. Ajax 教學
    電腦中的路徑:桌面\www\網頁檔案
    對應的網址:http://127.0.0.1:1127/網頁檔案

    主頁 http://127.0.0.1:1127/page.htm
    資料頁 http://127.0.0.1:1127/popular.htm
    資料頁 http://127.0.0.1:1127/latest.htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>Ajax 教學</title>
    <script type="text/javascript">
    //alert("hello");
    function getData(pageName){
        // Ajax:XMLHttpRequest 物件專門用來和伺服器做連綫
        var req = new XMLHttpRequest();
        // 連綫的方法get,連綫的網址
        req.open("get","http://127.0.0.1:1127/" + pageName);
        // 利用load事件,偵測連綫的狀態結束
        req.onload = function(){
            var content = document.getElementById("content");
            // 連綫完成 做連綫後的處理 (取得伺服器的回應responseText)
            content.innerHTML = this.responseText;
        }
        req.send(); // 送出連綫
    }
    </script>
</head>
<!-- 網頁初始化 首頁的顯示 -->
<body  onload="getData('popular.htm');">

    <div>
        <button onclick="getData('popular.htm');">florencekwok1</button>
        <button onclick="getData('latest.htm');">florencekwok2</button>
    </div>
    <hr />
    <div id = "content"></div>
    </body>

</html>