Ajax介绍
ajax的概念: 用来做数据交互使用
ajax的原理: 通过XmlHttpRequest对象来向服务器发送异步请求, 从服务器获得数据, 然后通过javascript来操作数据, 从而达到更新页面的效果
简单来说: 用于在后台与服务器交换数据, 达到局部刷新的效果
ajax的核心: XmlHttpRequest对象
ajax的特点: 异步加载, 局部刷新
同步: 一次一个, 前一个没执行完, 后一个也不能开始
异步: 一次一堆, 前一个没执行完, 后一个也能开始
ajax的好处:
- 最大的点就是页面无刷新, 在页面与服务器通信时, 用户体验会非常好, 节约宽带,节约资源
- 在使用异步请求时, 具有更加迅速的响应能力. 不需要打断用户操作
注意: 涉及到ajax的访问, 千万不能使用文件协议的方式打开
Ajax使用
//1. 创建XmlHttpRequest对象-->相当于创建了一个http请求的对象,主要用于和服务器交换数据
var xhr = new XMLHttpRequest();
//2. open(规定请求的类型get/post, URL,是否异步请求(默认是异步))-->相当于与服务器建立了一个特定端口的链接
xhr.open('get','./test.txt');
//3.将请求发送到服务器开始请求
// send(string-->只能用在post方式请求的时候);
xhr.send();
//4.等待响应. 需要使用事件机制去通知他
//这个事件只要状态改变了就会触发
xhr.onreadystatechange = function () {
//console.log(111);//触发了三次
console.log(this.readyState);//状态的数值: 2,3,4
//判断响应已经就绪时, 就可以拿到我想要的数据了
if(this.readyState != 4) return;//当你的函数体只有一行时, 可以省略大括号
console.log(this.responseText);//拿到响应的文本
document.getElementsByTagName('body')[0].innerHTML = this.responseText;
}
get和post的区别
get
var xhr = new XMLHttpRequest();
xhr.open('get', './contacts.json');
xhr.send();
post
需用setRequestHeader() 来添加 HTTP 头。然后在send()方法中规定您希望发送的数据
var xhr = new XMLHttpRequest();
xhr.open("post","1.html");
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send("name=addName");
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠