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技术实现在自己Blog上聚合并显示朋友Blog的最新文章

    有时候,你的Blog可能需要这样的功能: 在自己Blog上聚合并显示朋友Blog的最新文章,这样方便自己及时了解朋友的消息,另外,也方便访问者找到和本Blog相关的blog和文章. 这个功能你可以叫它"Blog聚合"或者"Blog联播",目前,实现这样功能的软件或服务都有限制:比如,Terac Sinfonia.Lilina.MXNA虽然功能都很强大,但是需要安装,不能自由定制,不能嵌入到Blog侧边栏.另一方面,目前提供这样服务的BSP只能聚合本系统内的用户,限制

  • iframe式ajax调用示例代码

    iframe式ajax调用示例代码

    1.新建 a.html 复制代码 代码如下: <!doctype html> <html> <head> <meta charset='utf-8'> <title>iframe式ajax调用</title> </head> <body> <form action='b.php' method='post' name='' id='' target='formTarget'> <input t

  • Ajax 无刷新在注册用户名时判断是否为空是否被使用

    复制代码 代码如下: var xmlHttp; uName() //用户名失去焦点时 { if(all.uname.=="") { all.l1.innerHTML="不能为空!"; setTimeout("close(1)",1500); return; } else { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlHttp.onreadystatechange=de

  • Ajax动态加载数据库示例

    复制代码 代码如下: <!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"> <head> <title></title

  • 告别AJAX实现无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法.现在整理出来分享给大家. 第一种: (html页面) 复制代码 代码如下: <!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="utf-8">    <title>无刷新提交表单</title>    <style type

  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单

    首先是数据库的设计.分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id. 数据库有内容后,就可以开始写代码,进行二级联动的实现. 先在后台php获取所有pid为0的数据,保存到$cate中,然后在第一层的<select>中用foreach循环输出. Html代码: 复制代码 代码如下: <select name="type" s

  • Ajax 给 XMLHttpReq.onreadystatechange传递参数

    Ajax 给 XMLHttpReq.onreadystatechange传递参数 通过: xmlhttp.onreadystatechange= function(){xx(123)}; or xmlhttp.onreadystatechange= new Function("xx(123)"); 就可以了. 复制代码 代码如下: Ajax 给 XMLHttpReq.onreadystatechange传递参数 通过: xmlhttp.onreadystatechange= funct

  • ajax跨域请求js拒绝访问的解决方法

    求解决办法 复制代码 代码如下: ajax{ url :"http://xxxx/app", type:"POST"; dataType:"json", } 不能用jsonp 因为jsonp发送数据 type 为 get type 必须为post url 不能加参 (例:http://xxxx/app?callback=aaa) 返回数据位json格式.求方法

  • Ajax核心技术代码分享

    复制代码 代码如下: <script>    var xhr = '';    function Ajax()    {        if(window.XMLHttpRequest)        {                var xhr = new XMLHttpRequest;//现代浏览器        }else        {                var xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE    

  • $.ajax传JSON数据到后台的注意事项小结

    复制代码 代码如下: $.ajax({ url: "../Services.ashx", type: "POST", //data: { 'data': { 'typename': JSON.stringify(typename) }, 'operationType': '2' }, data: { 'data': typename, 'operationType': '2','nowheight':nowheight,'nowarea':nowarea }, su

  • JQuery中Ajax的Post提交在IE下中文乱码的解决方法

    引言: 在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,该如何解决呢? 问题的引入: 复制代码 代码如下: var regid = $('#oregion').combobox('getValue'); //var sname = $('#sname').val(); var sname = encodeURI($('#sname').val(),"UTF-8"); if(regid!=""&&regid!='und

随机推荐