源码来自https://github.com/robin2017/Spring3_x.git的JS_AJAX_DWR工程
一、部分关键代码
1.HelloAjax.html
<html>
<head>
<title>first ajax</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="myfirstAjax.js"></script>
</head>
请选择老师：
<br>
<body>
<select onChange="onChangeSelect()" id="mainSelect">
<option value="no_person">无</option>
<option value="clq">陈立全</option>
<option value="qzy">秦中元</option>
<option value="hj">黄杰</option>
<option value="jr">蒋睿</option>
</select>
<br> 请选择学生:
<br>
<!-- 这里用一个div来占位！！！ -->
<div id="subSelect"></div>
</body>
</html>
2.myfirstAjax.js
function onChangeSelect(){
var select=document.getElementById("mainSelect").value;
url=select+".html";
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
//这里是ready，不是read，失误！！！
if(xhr.readyState==4)
document.getElementById("subSelect").innerHTML=xhr.responseText;
}
xhr.open("post",url,true);
xhr.send(null);
}
二、注意事项
1、body中没有<form>表单，因为在Ajax领域，表单通常没什么用
2、Ajax最常使用的功能就是替换某些div标签的内容，div先带id在body中占个位，即：<div id="subSelect"></div>
3、当选择一个主select时，次select就自动加载select内容，完全采用ajax方式，没有重绘整个页面，修改一部分。
4、div的innerHTML指的是闭标签前面部分，即：<div id="subSelect">innerHTML</div>
5、xhr（类似于socket代理）在ie浏览器和其他浏览器中的实例是不相同的：
ie:ActiveX实现
其他web：XMLHttpRequest（事实标准）
6、xhr.onreadystatechange传入的是一个回调函数callbackHandler
7、xhr请求就是一个普通的html请求
xhr.open("post",url,true); //true表示同步，false表示异步
xhr.send(null);
8、对于open的第二个参数，如果第一个参数为get，则url需要自己构建查询字符串添加到URL后面（xhr的缺点，要自己封装）
9、每个回调函数在请求的生命周期中反复调用，这里调用了4次
10、这个例子来看ajax骑士并不难！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
