Ajax获得站点文件内容实例

一个简单的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>

赞 (0)

相关推荐

  • Ajax获得站点文件内容实例不涉及服务器

    一个简单的Ajax实例:选择一部著作,会通过 Ajax 实时获得相关的名字. 把4个html文件放到 web站点 的同一个文件下. index.html 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>一个简单的不涉及服务器的Ajax实例</title> &

  • Ajax获得站点文件内容实例

    一个简单的Ajax实例:选择一部著作,会通过 Ajax 实时获得相关的名字. 把4个html文件放到 web站点 的同一个文件下. index.html 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>一个简单的不涉及服务器的Ajax实例</title> &

  • Python创建文件和追加文件内容实例

    一.用Python创建一个新文件,内容是从0到9的整数, 每个数字占一行: 复制代码 代码如下: #python >>>f=open('f.txt','w')    # r只读,w可写,a追加 >>>for i in range(0,10):f.write(str(i)+'\n') .  .  . >>> f.close() 二.文件内容追加,从0到9的10个随机整数: 复制代码 代码如下: #python >>>import ran

  • javascript结合ajax读取txt文件内容

    代码很简洁,这里就不多废话了,直接上源码 html代码 复制代码 代码如下: <!doctype html>  <html>   <head>       <meta charset="utf-8"/>       </head>       <body>           <button type="button"  onclick="show()">请求数据

  • Android 读取assets和raw文件内容实例代码

    Android 读取assets和raw文件内容实例代码

    android之文件操作--读取assets和raw文件下的内容 1.分别创建assets文件夹和res/raw文件夹:(要注意的raw文件是在res下new,然后创建一个名字为raw的文件夹) 2.创建两个txt文件,复制到asset和raw文件夹中: 3.实现的效果: 4.实现代码: (1)布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="

  • JS通过ajax动态读取xml文件内容的方法

    本文实例讲述了JS通过ajax动态读取xml文件内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码读取note.xml文件,并填充显示相关字段 HTML文件代码如下 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,

  • jQuery ajax读取本地json文件的实例

    json文件 { "first":[ {"name":"张三","sex":"男"}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅"

  • ajax异步实现文件分片上传实例代码

    前言 使用Ajax上传文件的应用场景颇多,比如上传用户头像.博客文章中插入图片.对认证用户相关身份进行校验等等很多很多.这篇文章主要介绍了关于ajax异步实现文件分片上传的相关内容,下面话不多说了,来一起看看详细的介绍吧 实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS分片上传-极速上传</ti

  • java向文件中追加内容与读写文件内容源码实例代码

    java向文件中追加内容与读写文件内容源码实例代码 向文件尾加入内容有多种方法,常见的方法有两种: RandomAccessFile类可以实现随机访问文件的功能,可以以读写方式打开文件夹的输出流 public void seek(long pos)可以将读写指针移到文件尾,参数Pos表示从文件开头以字节为单位测量的偏移位置,在该位置文件指针. public void write(int pos)将数据写到读写指针后面,完成文件的追加.参数pos表示要写入的Byte 通过FileWrite打开文件

  • php获取ajax的headers方法与内容实例

    1.前端页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"&

随机推荐