其原理: 通过XmlHttpRquest对象来向服务器发送异步请求的,从而从服务器中获得数据后,然后用js来操作DOM来更新页面
简单来说: 用于后台与服务器交互数据,这就能实现可以在不重新加载整个网页的情况下,对网页的部分进行更新
ajax的核心: 就是js对象 XmlHttpRequest
特点: 异步加载, 局部更新
ajax给我们带来的好处: 1.页面无刷新, 在页面与服务器通信时,提高用户的体验
注意: 凡是涉及到ajax的访问, 不能使用文件协议(已文件的方式访问)
//1.创建XmlHttpRequest对象---> 用于与服务器交换数据的 ---> 相当与创建http请求的一个对象
var xhr = new XMLHttpRequest();
//2.规定请求的类型(get , post),url地址,以及是否异步处理请求(布尔值),默认异步true
// open()-->相当与服务器建一个特定端口的链接
xhr.open('get','./test.txt');
//3.将请求发送到服务器,开始请求 send()
xhr.send();
//4.等待响应,---> 因为不知道服务器什么时候才能返回我们需要的响应,要采用事件的机制去触发
xhr.onreadystatechange = function () {
// console.log(1111);
//这个不是在响应时触发,在状态改变时触发
console.log(this.readyState);//2,3,4
//当响应已经就绪,则可以获取响应后的数据
if (this.readyState == 4){
console.log(this.responseText);//获取响应的文本
document.getElementsByTagName("body")[0].innerHTML=this.responseText;
}
}