前端部分 / AJAX / AJAX 教程
通过AJAX Asynchronous JavaScript And XML 实现异步刷新
示例 1 : 用于用户名校验的页面
示例 2 : 不使用AJAX 通过刷新页面验证账号是否存在
示例 3 : 使用AJAX 通过无刷新验证账号是否存在
前端部分 / AJAX / 分步解析
创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象,它可以在用户没有感觉的情况下,就像背后运行的一根小线程一般,悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的
XHR对象的作用是和服务器进行交互,所以既会发消息给服务器,也能接受服务器返回的响应。
当服务器响应回来的时候,调用怎么处理呢?
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
通过open函数设置背后的这个小线程,将要访问的页面url ,在本例中就是
/study/checkName.jsp
xmlhttp.open("GET",url,true);
通过send函数进行实际的访问
xmlhttp.send(null);
null表示没有参数,因为参数已经通过“GET" 方式,放在url里了。
只有在用"POST",并且需要发送参数的时候,才会使用到send。
类似这样:
xmlhttp.send("user="+username+"&password="+password)
在checkResult 函数中处理响应
function checkResult(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本
1. 创建XHR对象
2. 设置响应函数
3. 设置要访问的页面
4. 发出请求
5. 当服务端的响应返回,响应函数被调用。
6. 在响应函数中,判断响应是否成功,如果成功获取服务端返回的文本,并显示在span中。