• Ajax的一个实例及代码



    这是用ajax做的一个小小的应用!当选择menu1的时候,会出来menu里面所有的内容。同理对于menu2.多的不说,代码如下:

    首先是inner.html文件

    <html>
    <head>
    <title>Using mutliple XMLHttpRequest objects</title>
    <script language="javascript">
    var menu;


    function getmenu(menuNumber)
    {
    var XMLHttpRequestObject = false;


    if(window.XMLHttpRequest)
    {
    XMLHttpRequestObject = new XMLHttpRequest();
    XMLHttpRequestObject.overrideMimeType("text/xml");

    else if (window.ActiveXObject)
    {
      XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }


    if(XMLHttpRequestObject)
    {
    XMLHttpRequestObject.open("GET","menus.php?menu="+menuNumber);


    XMLHttpRequestObject.onreadystatechange = function()
    {
    if( XMLHttpRequestObject.readyState == 4 &&XMLHttpRequestObject.status == 200)
    {
    var xmlDocument = XMLHttpRequestObject.responseXML;
    menu = xmlDocument.getElementsByTagName("menuitem");
    listmenu();
    }
    }
    XMLHttpRequestObject.send(null);
    }
    }
    function listmenu()
    {
    var loopIndex;
    var selectControl = document.getElementById('menuList');


    for(loopIndex = 0; loopIndex < menu.length; loopIndex++)
    {
    selectControl.options[loopIndex] = new Option(menu[loopIndex].firstChild.data);
    }
    }


    function setmenu()
    {
    document.getElementById('targetDiv').innerHTML = "You selected  " + menu[document.getElementById('menuList').selectedIndex].firstChild.data;
    }
    </script>
    </head>
    <body>
    <h1>Using multiply XMLHttpRequest objects</h1>


    <form>
    <select size="1" id="menuList"onchange="setmenu()">
    <option>Select a menu item</option>
    </select>
    <br>
    <br>
    <input type="button" value="Select menu 1"onclick = "getmenu('1')">
    <input type="button" value="Select menu 2"onclick = "getmenu('2')">
    </form>


    <div id = "targetDiv" width=100 height=100>
    Your lunch selection  will appear here
    </div>
    </body>
    </html>


    其次就是menus.php文件:

    <?php
    header("Content-type:text/xml");
    if($_GET["menu"] == "1")
    $menuitems = array('Ham','Turkey','Beef');
    if($_GET["menu"] == "2")
    $menuitems = array('Tomato','Cucumber','Rice');


    echo '<?xml version="1.0" ?>';
    echo '<menu>';
    foreach ($menuitems as  $value)
        {
    echo '<menuitem>';
    echo $value;
    echo '</menuitem>';
    }
        echo '</menu>';
    ?>

    这样的代码应该很容易看清楚吧。唯一不好的地方就是本人没写注释!

  • 相关阅读:
    gym 101480 Problem C: Cow Confinement 题解
    Uva 1072 Huffman Codes 题解
    NERC 2015 Hypercube 题解
    ACM ICPC 2017 WF Problem J Son of Pipe Stream题解
    CF Round # 295 (Div. 1)题解
    CF 1444 D Rectangular Polyline 题解
    BZOJ3308 九月的咖啡店
    BZOJ4025 二分图
    BZOJ4000 [TJOI2015]棋盘
    BZOJ3999 [TJOI2015]旅游
  • 原文地址:https://www.cnblogs.com/cmderq/p/9130892.html
Copyright © 2020-2023  润新知