一个简单的Ajax实例：选择一部著作，会通过 Ajax 实时获得相关的名字。

把4个html文件放到 web站点 的同一个文件下。

index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>一个简单的不涉及服务器的Ajax实例</title>

<script type="text/javascript">

// 声明一个引用 XMLHttpRequest 的变量

var xhr = null;

// 选择一个著作时调用的函数

function updateCharacters() {

var selectShow = document.getElementById("selShow").value;

if (selectShow == "") {

document.getElementById("divCharacters").innerHTML = "";

return ;

}

// 实例化一个 XMLHttpRequest 对象

if (window.XMLHttpRequest) {

// 非IE

xhr = new XMLHttpRequest();

} else {

// IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.onreadystatechange = callbackHandler;

url = selectShow + ".html";

xhr.open("post", url, true);

xhr.send(null);

}

// this is the function that will repeatedly be called by our

// XMLHttpRequest object during the life cycle of request

function callbackHandler() {

if (xhr.readyState == 4) {

document.getElementById("divCharacters").innerHTML = xhr.responseText;

}

}

</script>

</head>

<body>

我们的第一个Ajax实例

<br></br>

选择一个名著：

<br>

<select onchange="updateCharacters();" id="selShow">

<option value=""></option>

<option value="xyj">西游记</option>

<option value="hlm">红楼梦</option>

<option value="shz">水浒传</option>

<option value="sgyy">三国演义</option>

</select>

<br></br>

返回，名著中主要任务：

<br>

<div id="divCharacters">

<select>

</select>

</div>

</body>

</html>

xyj.html

<select>

<option>唐僧</option>

<option>孙悟空</option>

<option>猪八戒</option>

<option>唐僧</option>

<option>观音姐姐</option>

<option>西天如来</option>

</select>

hlm.html

<select>

<option>贾宝玉</option>

<option>林黛玉</option>

<option>薛宝钗</option>

</select>

shz.html

<select>

<option>林冲</option>

<option>李逵</option>

<option>宋江</option>

<option>时迁</option>

</select>

sgyy.html

<select>

<option>刘备</option>

<option>关羽</option>

<option>张飞</option>

<option>曹操</option>

<option>小乔</option>

<option>诸葛亮</option>

</select>

Ajax获得站点文件内容实例的更多相关文章

  1. Linux 查看文件内容的命令

    转载自:新浪博客 (观看档案内容 : cat, tac, more, less, head, tail, nl, 刚刚我们提到的都只是在于显示档案的外观,或者是移动与复制一个档案或目录而已,那么如果我 ...

  2. Linux 文件内容查看工具介绍-cat,less,more,tail,head

    Linux 文件内容查看工具介绍 作者:北南南北来自:LinuxSir.Org摘要: 本文讲述几种常用文件内容的查看工具,比如cat.more.less.head.tail等,把这些工具最常用的参数. ...

  3. linux tail 命令详解！Linux 文件内容查看工具介绍

    转:http://blog.csdn.net/carzyer/article/details/4759593 1.cat 显示文件连接文件内容的工具: cat 是一个文本文件查看和连接工具.查看一个文 ...

  4. Java解析文件内容

    本文主要实现对.chk文件的解析,将其内容读出来,存入到一个Map中,文件内容实例为: A0500220140828.CHK A05002 |34622511 |373532879 |3 识别分隔符| ...

  5. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  6. Java 实例 - 读取文件内容

    原文作者:菜鸟教程 原文链接:Java 实例 - 读取文件内容(建议前往原文以获得最佳体验) 按行读取文本文件 import java.io.*; public class Main { public ...

  7. JS通过ajax动态读取xml文件内容

    http://www.sharejs.com/codes/javascript/8178 HTML文件代码如下 <!DOCTYPE html> <html> <head& ...

  8. php+原生ajax实现图片文件上传功能实例

    html+js 代码 <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传文件</title> ...

  9. 原生AJAX入门讲解（含实例）

    相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...

随机推荐

  1. N人报数第M人出列游戏问题（约瑟夫问题）

    这是一道华为的机试题,后来才知道也叫约瑟夫问题,题目是这样的:有n个人围成一圈,玩一个游戏,规则为将该n个人编号为1,2,......n, 从编号为1的人开始依次循环报数,报道第m的时候将第m个人从队 ...

  2. 使用命令行设置svn忽略列表

    Windows 上的 TortoiseSVN 设置 svn 的忽略列表是非常方便的,但是在Mac OS X上,好用的图形化 svn 客户端都有点儿贵,比如 Versions 和 CornerStone ...

  3. SORT UNIQUE|AGGREGATE|GROUP BY|ORDER BY|JOIN

    相信做oracle开发和管理的朋友对sort肯定不会陌生,大家通常都遇到这样那样的排序性能问题,所以我写这一系列关于sort的文章告诉大家在oracle里面sort是怎么一回事以及如果调整sort获得 ...

  4. SpringMVC + Spring + MyBatis 学习笔记：为MyBatis增加打印SQL功能 (最简化配置)

    系统:WIN8.1 数据库:Oracle 11GR2 开发工具:MyEclipse 8.6 框架:Spring3.2.9.SpringMVC3.2.9.MyBatis3.2.8 1.以下jar包拷贝到 ...

  5. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  6. MapReduce阅读

    1.mongodb权威指南6.4章 2.百科:http://baike.baidu.com/link?url=fl9FwgNq7gtFLwJ-GuKsJ25Uk-wnhgDjEwkKd8-5hoIkh ...

  7. 第三百五十二天 how can I 坚持

    如果要是今年找不到对象,明年去回济南, 怎么感觉那么不舍呢.生活总是有太多的无奈啊. 今天加了一天,倒是没感觉,只是感觉生活太空虚. 或许遗憾只是因为自己太懦弱.怎么说呢,还是那句话,经历的就会成长, ...

  8. java.io.IOException: Messenger was closed

    程序运行一段时间后抛出异常java.io.IOException: Messenger was closed,不知道是啥原因? ———————————————————————————————————— ...

  9. 【125】固定IP的电脑配置无线路由

    标题所提到的情况即为有些电脑是用静态IP上网的,与普通的宽带连接稍微有些不同,例如我的电脑的静态IP设置是这样的: 只有按照上面的设置才可以正常上网,因此在配置无线路由器的时候也要用到上面的内容,废话 ...

  10. Axis2与Web项目整合

    一.说明: 上一篇介绍了通过使用Axis2来发布和调用WebService,但是是把WebService发布在Axis2提供的项目中,如果我们需要在自己的Web项目中来使用Axis2发布WebServ ...