脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → Ajax获得站点文件内容

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

 更新时间：2014年05月15日 10:22:59   作者：  
选择一部著作，会通过 Ajax 实时获得相关的名字，一个简单的不涉及服务器的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>
您可能感兴趣的文章:

相关文章

  • Ajax提交post请求案例分析

    Ajax提交post请求案例分析

    这篇文章主要介绍了Ajax提交post请求,结合具体案例形式分析了ajax提交post请求相关原理、用法及操作注意事项,需要的朋友可以参考下
    2019-07-07
  • json格式的Ajax提交示例代码

    json格式的Ajax提交示例代码

    这篇文章主要介绍了json格式的Ajax提交，需要引入一些jar包及js包，示例代码如下
    2014-08-08
  • 浅析Asp.net MVC 中Ajax的使用

    浅析Asp.net MVC 中Ajax的使用

    在ASP.NET MVC beta中我们可以使用Ajax.BeginForm, Ajax.ActionLink来进行Ajax调用，同样我们也可以使用一些支持Ajax 框架如jQuery来简化对ajax的调用。
    2015-09-09
  • IE下Ajax提交乱码的快速解决方法

    IE下Ajax提交乱码的快速解决方法

    下面小编就为大家带来一篇IE下Ajax提交乱码的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • ajax post下载flask文件流以及中文文件名问题

    ajax post下载flask文件流以及中文文件名问题

    这篇文章主要介绍了ajax post下载flask文件流以及中文文件名问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 解决ajax返回验证的时候总是弹出error错误的方法

    解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 基于Ajax的聊天机器人功能的实现

    基于Ajax的聊天机器人功能的实现

    这篇文章主要介绍了基于Ajax的聊天机器人,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • 初学者必看的Ajax总结篇

    初学者必看的Ajax总结篇

    本文主要总结整理Ajax的一些常用的基础知识，非常适合初学者。需要的朋友可以参考借鉴，下面来一起学习学习吧。
    2017-01-01
  • Ajax二级联动菜单实现原理及代码

    Ajax二级联动菜单实现原理及代码

    二级联动菜单,一个多么方便且实用的用户交互功能，有需求的朋友可以参考下本文，或许对你的菜单知识深入学习有帮助，好了，闲话不多说，看代码吧
    2013-01-01
  • ajax实现上传图片保存到后台并读取的实例

    ajax实现上传图片保存到后台并读取的实例

    下面小编就为大家分享一篇ajax实现上传图片保存到后台并读取的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01

最新评论