这是用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. 【转载】SpringBoot系列——Swagger2

    微服务学习二:springboot与swagger2的集成:https://www.cnblogs.com/fengli9998/p/7522973.html 注:需要在启动类加 @EnableSwa ...

  2. 第一册:lesson seventy three.

    原文: The way to King Street. Last week Mrs. Mills went to London. She does not know London very well, ...

  3. 【转载】Sqlserver阻止保存要求重新创建表的更改

    在Sqlserver创建完表table后,后续维护过程中有时候需要往表格中新增字段,在表设计窗体中新增字段后保存,有时候会直接抛出错误信息,提示“不允许保存更改,您所做的更改要求删除并重新创建以下表” ...

  4. mysql中的prepare介绍和应用

    简单的用set或者declare语句定义变量,然后直接作为sql的表名是不行的,mysql会把变量名当作表名.在其他的sql数据库中也是如此,mssql的解决方法是将整条sql语句作为变量,其中穿插变 ...

  5. 元类实现ORM

    1. ORM是什么 ORM 是 python编程语言后端web框架 Django的核心思想,"Object Relational Mapping",即对象-关系映射,简称ORM. ...

  6. 空间、域名与IP之间的关系？

    空间说白了就是服务器里面你可以使用的一个地方,在这里你可以放置数据和程序.最常用的就是放置您的网站程序和相关的所有文档和图片文件等等.这个放置你的网站文件的空间所在的服务器会有一个电信部门分配的固定编 ...

  7. html5基础！！

    A:HTML5 不基于 SGML,所以不需要引用 DTD: B: HTML 4.01 基于 SGML,而HTML5不基于SGML: DTD可定义合法的XML文档构建模块,它使用一系列合法的元素来定义文 ...

  8. laravel常见异常解决

    requested URL not found http://stackoverflow.com/questions/21458080/the-requested-url-projectname-us ...

  9. laravel中请求用例$request可用的一些方法小结

    laravel中$request可用的一些方法小结 1,请求方法的获取 $method = $request->method(); 2,检测请求方法 $res = $request->is ...

  10. 3;XHTML排列清单控制标记

    1.无序号条例式清单<ul> 2.有序号条例式清单<ol> 3.无序列表和有序列表的结合应用 4.叙述式清单<dl> 排列清单控制标记可以创建一般的列表.编号列表或 ...