这是用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. Angular2入门：TypeScript的接口

  2. python实战学习之numpy学习

    numpy基础要点 1.生成数组 np.array([]) 2.变量的类型 numpy.ndarray 3.数据的类型 int8,float64,float32,bool等 4.数据的类型转换 x.a ...

  3. sed修炼系列(二)：sed武功心法(info sed翻译+注解)

    sed系列文章: sed修炼系列(一):花拳绣腿之入门篇sed修炼系列(二):武功心法(info sed翻译+注解)sed修炼系列(三):sed高级应用之实现窗口滑动技术sed修炼系列(四):sed中 ...

  4. python模块之random

    python的随机数模块为random模块,可以产生随机的整数或浮点数.但是这是伪随机数,python解释器会维护一些种子数,然后根据算法算出随机数.linux维护了一个熵池,这个熵池收集噪音的信息, ...

  5. 南大算法设计与分析课程复习笔记(1) L1 - Model of computation

    一.计算模型 1.1 定义: 我们在思考和处理算法的时候是机器无关.实现语言无关的.所有的算法运行在一种“抽象的机器”之上,这就是计算模型. 1.2 种类 图灵机是最有名的计算模型,本课使用更简单更合 ...

  6. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  7. [转]angular使用Md5加密

    本文转自:https://www.cnblogs.com/waitingbar/p/7527928.html 一.现象 用户登录时需要记住密码的功能,在前端需要对密码进行加密处理,增加安全性 二解决 ...

  8. mediainfo使用

    1.linux安装mediainfo     yum  install  mediainfo(epel源安装) 2.输出文件信息到xml文件 mediainfo --OUTPUT=XML -f ftp ...

  9. 如何在Promise链中共享变量？

    译者按: 使用Promise写过异步代码的话,会发现在Promise链中共享变量是一个非常头疼的问题,这也是Async/Await胜过Promise的一点,我们在Async/Await替代Promis ...

  10. h5网页水印SDK的实现代码示例

    在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源.如我们常用的钉钉软件,聊天背景就会有你的名字.那么如何实现网页水印效果呢? 网页水印SDK,实现思路 1.能更具获取 ...