Ajax的介绍以及实现

Ajax介绍
ajax的概念: 用来做数据交互使用
ajax的原理: 通过XmlHttpRequest对象来向服务器发送异步请求, 从服务器获得数据, 然后通过javascript来操作数据, 从而达到更新页面的效果
简单来说: 用于在后台与服务器交换数据, 达到局部刷新的效果
ajax的核心: XmlHttpRequest对象
ajax的特点: 异步加载, 局部刷新
同步: 一次一个, 前一个没执行完, 后一个也不能开始
异步: 一次一堆, 前一个没执行完, 后一个也能开始
ajax的好处:

1. 最大的点就是页面无刷新, 在页面与服务器通信时, 用户体验会非常好, 节约宽带,节约资源
2. 在使用异步请求时, 具有更加迅速的响应能力. 不需要打断用户操作

注意: 涉及到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 更稳定也更可靠