Ajax執行個體：獲得網站檔案內容

最後更新：2013-11-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章摘自：Ajax執行個體：獲得網站檔案內容

一個簡單的Ajax執行個體：選擇一部著作，會通過 Ajax 即時獲得相關的名字。

把4個html檔案放到 web網站的同一個檔案下。

index.html

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>一個簡單的不涉及伺服器的Ajax執行個體</title>        <script type="text/javascript">            // 聲明一個引用 XMLHttpRequest 的變數            var xhr = null;            // 選擇一個著作時調用的函數            function updateCharacters() {                var selectShow = document.getElementById("selShow").value;                if (selectShow == "") {                    document.getElementById("divCharacters").innerHTML = "";                    return ;                }                // 執行個體化一個 XMLHttpRequest 對象                if (window.XMLHttpRequest) {                    // 非IE                    xhr = new XMLHttpRequest();                } else {                    // IE                    xhr = new ActiveXObject("Microsoft.XMLHTTP");                }                xhr.onreadystatechange = callbackHandler;                url = selectShow + ".html";                xhr.open("post", url, true);                xhr.send(null);            }            // this is the function that will repeatedly be called by our             // XMLHttpRequest object during the life cycle of request            function callbackHandler() {                if (xhr.readyState == 4) {                    document.getElementById("divCharacters").innerHTML = xhr.responseText;                }            }        </script>    </head>    <body>        我們的第一個Ajax執行個體        <br></br>        選擇一個名著：        <br>        <select onchange="updateCharacters();" id="selShow">            <option value=""></option>            <option value="xyj">西遊記</option>            <option value="hlm">紅樓夢</option>            <option value="shz">水滸傳</option>            <option value="sgyy">三國演義</option>        </select>        <br></br>        返回，名著中主要任務：        <br>        <div id="divCharacters">            <select>            </select>        </div>    </body></html>

xyj.html

<select>    <option>唐僧</option>    <option>孫悟空</option>    <option>豬八戒</option>    <option>唐僧</option>    <option>觀音姐姐</option>    <option>西天如來</option></select>

hlm.html

<select>    <option>賈寶玉</option>    <option>林黛玉</option>    <option>薛寶釵</option></select>

shz.html

<select>    <option>林沖</option>    <option>李逵</option>    <option>宋江</option>    <option>時遷</option></select>

sgyy.html

<select>    <option>劉備</option>    <option>關羽</option>    <option>張飛</option>    <option>曹操</option>    <option>小喬</option>    <option>諸葛亮</option></select>

文章摘自：Ajax執行個體：獲得網站檔案內容

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More