AJAX确实是一项令人着迷的技术,简洁而优雅,此文对AJAX做个简单复习回顾。
大概步骤如下:
1.设置XHR对象
2.设置响应函数
3.设置要访问的页面
4.发出请求
5.当服务端的响应返回,响应函数被调用。
6.在响应函数中,判断响应是否成功,如果成果获取服务端返回的文本,进行显示。
readySate | 存有XMLHttpRequest的状态。从0到4发生变化。
|
status | 200:ok 404:未找到页面 |
<span>输入帐号</span>
<input id="name" name="name" onkeyup="check" type="text">
<span id="CheakResult"></span>
<script>
var xmlhttp;
function check() {
var name = document.getElementById("name").value;
var url = "地址?name=" + name;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = cheakResult;//响应函数
xmlhttp.open("GET", url, true);//设置访问的页面
xmlhttp.send(null); //执行访问
}
function checkResult() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById('checkResult').innerHTML = xmlhttp
.responseText();
}
</script>
这里面还要提一下的是,open方法,其三个参数。第一个代表method,第二个是地址,第三个true时表示异步,不等待反馈继续执行以后的代码。false表示同步,等待结果返回才继续执行,若超时,则不再等待,继续执行下边的代码。