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>';
?>
这样的代码应该很容易看清楚吧。唯一不好的地方就是本人没写注释!
Ajax的一个实例及代码的更多相关文章
- Nodejs 之Ajax的一个实例(sql单条件查询&并显示在Browser端界面上)
1.Broswer端的Ajax <!DOCTYPE html> <html> <head lang="en"> <meta charset ...
- C#程序只允许运行一个实例的解决方案
最近在做winform的程序中,需要只能打开一个程序,如果已经存在,则激活该程序的窗口,并显示在最前端.在网上google了一哈,找到了很多的解决方案.这里我整理了3种方案,并经过了测试,现和朋友们分 ...
- .NET运用AJAX 总结及其实例
1.AJAX简介 (1.没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的 ...
- C#[Win32&WinCE&WM]应用程序只能运行一个实例:MutexHelper
前言 在开发应用程序时,通常只让程序运行一个实例.所以,就要判断程序是否已经运行. 下面是我自己在项目中使用到,封装好的帮助类.有 普通的 C# 应用程序 和 Windows CE 和 Windows ...
- 转 C# 只允许运行一个实例
来源:http://blog.csdn.net/jin20000/article/details/3136791 互斥进程(程序), 简单点说,就是在系统中只能有该程序的一个实例运行. 现在很多软件都 ...
- JavaBean 基础概念、使用实例及代码分析
JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ...
- C# 只启动一个实例完全解决方案
工作上经常会遇到"程序只能启动一个实例"这样的需求. 我想,这样的需求应该很普遍,所以没打算去动脑筋,去找谷歌问下就得了,用下来发现,不是这里不爽就是那里不行. 先说下我详细的几点 ...
- Ajax实现异步操作实例_针对XML格式的请求数据
js分类中有一节[原生js异步请求,XML解析]主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析,今天我将用一个实例来说明具体要如何操作. 前台的参数类型也是XML使 ...
- Python使用MySQL数据库的方法以及一个实例
使用环境:Windows+python3.4+MySQL5.5+Navicat 一.创建连接 1.准备工作,想要使用Python操作MySQL,首先需要安装MySQL-Python的包,在Python ...
随机推荐
- java节假日
public class CalendarTest { //节假日列表 private static List<Calendar> holidayList = new ArrayList& ...
- Java设计模式学习记录-状态模式
前言 状态模式是一种行为模式,用于解决系统中复杂的对象状态转换以及各个状态下的封装等问题.状态模式是将一个对象的状态从该对象中分离出来,封装到专门的状态类中,使得对象的状态可以灵活多变.这样在客户端使 ...
- QT 完美实现圆形按钮
QT 版本:5.6.0 官方的按钮有些普通,如果我们想要换成自己喜欢的按钮而却无从下手,那么请继续往下阅读(皮一下). 首先,可以在网络上搜索一下自己喜欢的按钮图形(或者可以自行绘制),我以下面的图形 ...
- 在vue中配置flow类型检查
flow中文文档:https://zhenyong.github.io/flowtype/docs/objects.html#_ 1.安装flow npm install --save-dev flo ...
- 验证码图片二值化问题 BitmapData 怎么解决
对不起,这算是一篇求助啦,先上图,防止不清楚,放大了一点,下面是图片,上面是没有二值化的,下面是二值化之后的,我其实不懂什么是二值化啦,就是一定范围变黑,变白 问题: 为什么我的结果上面还是有很多彩色 ...
- git中的忽略配置文件中没有忽略该文件,却提交不到服务器上。
解决方法:在被忽略项目上单击右键
- Python多线程的简单实现(生产者消费者模型)
__author__ = "JentZhang" import time, threading, queue q = queue.Queue(maxsize=) # 声明队列 de ...
- c#连接oracle数据库 DBHelper
闲着没事自己写了一个OracleHelper类,希望大神给点建议优化 using System; using System.Collections.Generic; using System.Linq ...
- Http(s)与后台交互方式
前言 Http(s)是前后端交互的主要方式之一,交互技术主要有:Ajax(XMLHttpRequest).Fetch.地址跳转(window.open.location.href).Http(s)与后 ...
- 清除float影响
条件: 父元素中有子元素float的话,可能就会影响父元素的高度,从而影响布局: 解决方案: 1.直接给父元素定高: 弊端:必须知道父元素的高: 2. 父元素使用overflow属性值为hidden解 ...