在介绍AJAX之前先了解下同步和异步的概念
同步请求和异步请求
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
同步请求:客户端请求(等待)->服务端处理->响应->页面载入 (缺少对象:XMLhttpRequest)这时候如果有错误,只能再次发送请求,再次等待。
异步请求:客户端发送请求,在等待请求处理的过程中可以发送其他请求,不需要等到服务端处理完成之后再发送其他请求,服务端响应->页面载入;
总结:页面上的操作和服务器端的操作互相之间不会造成阻塞。
AJAX 简介
AJAX全称Asynchronous JavaScript And XML,就是异步的JS和XML.
通过AJAX可以在浏览器中向服务器发送一部请求,最大的优势:**无刷新获取数据**。
AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
AJAX的应用场景
AJAX的特点
- AJAX的优点
1)可以无需刷新页面而与服务器端进行通信。
2)允许你根据用户事件来更新部分页面内容。 - AJAX的缺点
1)没有浏览历史,不能回退
2)存在跨域问题(同源)
3)SEO不友好
AJAX的使用
1.核心对象
XMLHttpRequest,AJAX的所有操作都是通过该对象进行的
2.使用步骤
1)创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2) 设置请求信息
xhr.open(method, url); //可以设置请求头,一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- 发送请求
xhr.send(body) //get 请求不传 body 参数,只有 post 请求使用 - 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText; console.log(text);
}
}
3. 解决 IE 缓存问题
问题:在一些浏览器中(IE),由于缓存机制的存在,ajax 只会发送的第一次请求,剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式:浏览器的缓存是根据 url 地址来记录的,所以我们只需要修改 url 地址 即可避免缓存问题 xhr.open(“get”,"/testAJAX?t="+Date.now());
4. AJAX 请求状态
xhr.readyState 可以用来查看请求当前的状态 https://developer.mozilla.org/zhCN/docs/Web/API/XMLHttpRequest/readyState
0: 表示 XMLHttpRequest 实例已经生成,但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用,仍然可以使用 setRequestHeader(),设定 HTTP请求的头信息。
2: 表示 send()方法已经执行,并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收,或者本次接收已经失败了