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

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

index.html

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>一个简单的不涉及服务器的Ajax实例</title>
  5. <script type="text/javascript">
  6. // 声明一个引用 XMLHttpRequest 的变量
  7. var xhr = null;
  8. // 选择一个著作时调用的函数
  9. function updateCharacters() {
  10. var selectShow = document.getElementById("selShow").value;
  11. if (selectShow == "") {
  12. document.getElementById("divCharacters").innerHTML = "";
  13. return ;
  14. }
  15. // 实例化一个 XMLHttpRequest 对象
  16. if (window.XMLHttpRequest) {
  17. // 非IE
  18. xhr = new XMLHttpRequest();
  19. } else {
  20. // IE
  21. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  22. }
  23. xhr.onreadystatechange = callbackHandler;
  24. url = selectShow + ".html";
  25. xhr.open("post", url, true);
  26. xhr.send(null);
  27. }
  28. // this is the function that will repeatedly be called by our
  29. // XMLHttpRequest object during the life cycle of request
  30. function callbackHandler() {
  31. if (xhr.readyState == 4) {
  32. document.getElementById("divCharacters").innerHTML = xhr.responseText;
  33. }
  34. }
  35. </script>
  36. </head>
  37. <body>
  38. 我们的第一个Ajax实例
  39. <br></br>
  40. 选择一个名著：
  41. <br>
  42. <select onchange="updateCharacters();" id="selShow">
  43. <option value=""></option>
  44. <option value="xyj">西游记</option>
  45. <option value="hlm">红楼梦</option>
  46. <option value="shz">水浒传</option>
  47. <option value="sgyy">三国演义</option>
  48. </select>
  49. <br></br>
  50. 返回，名著中主要任务：
  51. <br>
  52. <div id="divCharacters">
  53. <select>
  54. </select>
  55. </div>
  56. </body>
  57. </html>

xyj.html

  1. <select>
  2. <option>唐僧</option>
  3. <option>孙悟空</option>
  4. <option>猪八戒</option>
  5. <option>唐僧</option>
  6. <option>观音姐姐</option>
  7. <option>西天如来</option>
  8. </select>

hlm.html

  1. <select>
  2. <option>贾宝玉</option>
  3. <option>林黛玉</option>
  4. <option>薛宝钗</option>
  5. </select>

shz.html

  1. <select>
  2. <option>林冲</option>
  3. <option>李逵</option>
  4. <option>宋江</option>
  5. <option>时迁</option>
  6. </select>

sgyy.html

  1. <select>
  2. <option>刘备</option>
  3. <option>关羽</option>
  4. <option>张飞</option>
  5. <option>曹操</option>
  6. <option>小乔</option>
  7. <option>诸葛亮</option>
  8. </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. [Everyday Mathematics]20150218

    设 $A,B$ 是 $n$ 阶复方阵, 适合 $$\bex A^2B+BA^2=2ABA. \eex$$ 试证: 存在 $k\in\bbZ^+$, 使得 $(AB-BA)^k=0$.

  2. Linux man命令数字含义

    1,用户在shell环境中可以操作的命令或可执行文件   2,系统内核可调用的函数与工具等,即由内核提供的函数. 如open,write之类的(通过这个,可以很方便的查到调用这个函数时需要加什么头文件 ...

  3. python27+django1.9创建app的视图及实现动态页面

    一.简易静态视图 views文件里写: from django.http import HttpResponse def hello(request): return HttpResponse(&qu ...

  4. Nodejs_day01

    helloworld.txt的内容: 我是nodejs 阻塞式调用 var fs = require('fs'); var data = fs.readFileSync('helloworld.txt ...

  5. Chapter9：顺序容器

    现代C++程序应该使用标准库容器,而不是更原始的数据结构,例如内置数组. 新标准库容器的性能几乎肯定与最精心优化过的同类数据结构一样好. 当我们用一个对象来初始化容器时,或将一个对象插入到容器中时,实 ...

  6. 【IDE】SharpDevelop

    SharpDevelop 这个轻型的开发工具支持多种程序语言,包括C#.java以及VB.NET,同时还支持多种语言界面,象任何爱好者开发的工具一样.这个编辑器的界面风格类似于Office XP以及V ...

  7. Spark connect to Database

    Cannect to Cassandra: 用spark-cassandra-connector, 注意spark,cassandra和connector的版本要配套,Cassandra至少要版本2以 ...

  8. Shell Scipt 命令行带参数，输出log

    命令行带参数,以及字符串参数放到ssh命令里可以这么放: #!/bin/bash        这行保证运行bash可以这样: ./data.sh if [ $# != 4 ]; then echo ...

  9. jsp页面元素和内置对象

    java server pages其根本是一个简化的servlet设计.实现了在java当中使用html标签.javaEE标准 一.页面元素 1.静态内容 html.js.css相关标签元素. 2.指 ...

  10. Fedora 14 x64 试用手记

    欢迎大家给我投票: http://2010blog.51cto.com/350944 刊登在: http://os.51cto.com/art/201011/235506.htm FC14桌面使用体验 ...