这是用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>';

?>

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

Ajax的一个实例及代码的更多相关文章

  1. Nodejs 之Ajax的一个实例（sql单条件查询&并显示在Browser端界面上）

    1.Broswer端的Ajax <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  2. C#程序只允许运行一个实例的解决方案

    最近在做winform的程序中,需要只能打开一个程序,如果已经存在,则激活该程序的窗口,并显示在最前端.在网上google了一哈,找到了很多的解决方案.这里我整理了3种方案,并经过了测试,现和朋友们分 ...

  3. .NET运用AJAX 总结及其实例

    1.AJAX简介 (1.没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的 ...

  4. C#[Win32&WinCE&WM]应用程序只能运行一个实例:MutexHelper

    前言 在开发应用程序时,通常只让程序运行一个实例.所以,就要判断程序是否已经运行. 下面是我自己在项目中使用到,封装好的帮助类.有 普通的 C# 应用程序 和 Windows CE 和 Windows ...

  5. 转 C# 只允许运行一个实例

    来源:http://blog.csdn.net/jin20000/article/details/3136791 互斥进程(程序), 简单点说,就是在系统中只能有该程序的一个实例运行. 现在很多软件都 ...

  6. JavaBean 基础概念、使用实例及代码分析

    JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ...

  7. C# 只启动一个实例完全解决方案

    工作上经常会遇到"程序只能启动一个实例"这样的需求. 我想,这样的需求应该很普遍,所以没打算去动脑筋,去找谷歌问下就得了,用下来发现,不是这里不爽就是那里不行. 先说下我详细的几点 ...

  8. Ajax实现异步操作实例_针对XML格式的请求数据

    js分类中有一节[原生js异步请求,XML解析]主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析,今天我将用一个实例来说明具体要如何操作. 前台的参数类型也是XML使 ...

  9. Python使用MySQL数据库的方法以及一个实例

    使用环境:Windows+python3.4+MySQL5.5+Navicat 一.创建连接 1.准备工作,想要使用Python操作MySQL,首先需要安装MySQL-Python的包,在Python ...

随机推荐

  1. Java设计模式学习记录-观察者模式

    前言 观察者模式也是对象行为模式的一种,又叫做发表-订阅(Publish/Subscribe)模式.模型-视图(Model/View)模式. 咱们目前用的最多的就是各种MQ(Message Queue ...

  2. SHELL脚本--变量(基础)

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$ ...

  3. Perl回调函数和闭包

    在Perl中,子程序的引用常用来做回调函数(callback).闭包(closure),特别是匿名子程序. 回调函数(callback) 关于什么是回调函数,见一文搞懂:词法作用域.动态作用域.回调函 ...

  4. 基于 LWIP 建立 TCP Server 与主机通信实验

    LWIP 版本:2.0.3 上一篇文章是写如何将 LWIP 移植到板子上,今天晚上记录基于 LWIP 实现与主机的网络通信. 先是打开了原子的实验例程,大概浏览了一遍,觉得 TCP 网络网络通信也就是 ...

  5. Linux--Introduction and Basic commands(Part one)

    Welcome to Linux world! Introduction and Basic commands--Part one J.C 2018.3.11 Chapter 1 What Is Li ...

  6. SQL去除数据库表中tab、空格、回车符等特殊字符的解决方法

    按照ASCII码, SELECT char(64) 例如64 对应 @,则 ), 'kk'); 则结果为 abckkqq.com 依此类推, 去掉其他特殊符号,参考ASCII码对照表, 去掉tab符号 ...

  7. 动态编程（Dynamic Programming）

    本文素材来自视频,请自备梯子观看:What Is Dynamic Programming and How To Use It Dynamic Programming:动态编程分为如下几步: 将复杂问题 ...

  8. Integer Partition（hdu4658）2013 Multi-University Training Contest 6 整数拆分二

    Integer Partition Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...

  9. js高级：event，事件冒泡，事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  10. node实现简单的群体聊天工具

    一.使用的node模块 1.express当做服务器 2.socket.io 前后通信的桥梁 3.opn默认打开浏览器的模块(本质上用不到) 难点:前后通信 源码地址:https://github.c ...