AJAX在浏览器当中发送异步请求,请求之间是独立的,谁也不用等谁
类似于多线程并发,不会出现页面清空然后展示新的页面的效果
实现局部刷新(靠多种技术一起做到的,而不是一个技术叫ajax)
它是异步的(类似于多线程)
在AJAX的请求以及响应中完全依靠的是XMLHttpRequest对象
XMLHttpRequest对象的readyState属性记录了XMLHTTPREQUEST对象的状态
这个ReadyState属性的对应值有
0请求未初始化
1服务器连接已建立
2请求已收到
3正在处理请求
4请求已完成且响应已就绪
因此我们说当XMLHttpRequest对象的readyState属性变成4的时候
表示这个AJAX请求和响应已经全部完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax Get</title>
</head>
<body>
<script type="text/javascript">
window.onload = function ()
{
document.getElementById("AJAX").onclick = function ()
{
//发送ajax请求
console.log("发送请求");
//4步发送AJAX请求
//第一步创建ajax核心对象XMLHttpRequest
var obj = new XMLHttpRequest();
//第二步注册回调函数
//当我们的readystate值发生改变我们就执行一次回调函数
obj.onreadystatechange = function ()
{
//这里的内容会被调用多次
//0到1到2到3到4(AJAX请求有四步)
console.log(obj.readyState);
//但这个值等于4的时候,就是响应结束了
//响应结束之后一般会有一个Http的状态码
//200成功,404丢失,500错误服务器
if(this.readyState === 4)
{
console.log(this.status);
if(this.status === 404)
{
alert("对不起,您访问的资源不存在");
}
}
}
//第三步开启通道
//open函数方法的值都是啥
//第一个method,请求方法,可以是get可以是post或者其他请求
//url就是请求路径
//async只能是true或者false,true表示支持异步请求,false表示不支持(同步请求)
//一般都是支持异步的,这样用户体验更好,极少数情况是不支持的同步
//username和password就是用户名和密码,有部分特殊资源是需要口令的,用户名和密码是用来对此做限制的
//需要的较少,这个是身份认证用的
obj.open("GET","/ajax/ajaxRequest1",true);
//open只是打开通道,并不是执行,只是浏览器和服务器建立链接
//第四步发送请求
obj.send();
// 这才是真正发送请求
}
}
</script>
<!-- 给一个按钮,用来发送ajax请求-->
<input type="button" id="AJAX" value="AJAX请求发送"/>
<!--给一个DIV盒子用来显示ajax回传的数据信息-->
<div id="myDiv"></div>
</body>
</html>