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>


您可能感兴趣的文章:

  • JQuery中Ajax的Post提交在IE下中文乱码的解决方法
  • 告别AJAX实现无刷新提交表单
  • ajax跨域请求js拒绝访问的解决方法
  • Ajax动态加载数据库示例
  • Ajax 无刷新在注册用户名时判断是否为空是否被使用
  • 用AJAX技术实现在自己Blog上聚合并显示朋友Blog的最新文章
  • iframe式ajax调用示例代码
  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
  • Ajax 给 XMLHttpReq.onreadystatechange传递参数
  • $.ajax传JSON数据到后台的注意事项小结
  • Ajax核心技术代码分享
张贴在3