Ajax简介
通过AJAX （Asynchronous JAvaScript and XML） 实现异步刷新
用于用户名校验的页面
- 不使用AJAX，传统的方法需要提交数据<b>刷新页面</b>来获取用户名存在与否。
<form action="/study/checkName.jsp">
输入账号 <input name="name" type="text" value="abc">
<input type="submit" value="验证账号是否存在">
</form>
- 使用AJAX 通过无刷新验证账号是否存在
<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text">
<span id="checkResult"></span>
<script>
var xmlhttp;
function check(){
var name = document.getElementById("name").value;
var url = "http://how2j.cn/study/checkName.jsp?name="+name;
xmlhttp =new XMLHttpRequest();
xmlhttp.onreadystatechange=checkResult; //响应函数
xmlhttp.open("GET",url,true); //设置访问的页面
xmlhttp.send(null); //执行访问
}
function checkResult(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
</script>
分布解析
-
AJAX请求和相应图示
1232.png - 创建 XHR
创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的
<script>
var xmlhttp =new XMLHttpRequest();
document.write(xmlhttp);
</script>
-
设置响应函数
XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
当服务器响应回来的时候，调用怎么处理呢？
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
注：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。
966.png 设置并发出请求
xmlhttp.open("GET",url,true);
xmlhttp.send(null); //通过send函数进行实际的访问
<b>为什么使用 Async=true ？</b>
我们的实例在 open() 的第三个参数中使用了 "true"。
该参数规定请求是否异步处理。
True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。
通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。
- 设置响应信息
在checkResult 函数中处理响应
