Ajax范例：获得站点文件内容

Ajax实例：获得站点文件内容

文章摘自：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实例：获得站点文件内容

Ajax范例：获得站点文件内容

相关推荐