Ajax详解

1.客户端向服务端发送请求的几种情况
地址栏输入地址，回车，刷新页面
特定元素的href或者src属性
表单提交
这些方案都是我们无法通过或者很难通过代码的方式进行编程，对服务端发出请求并且接收服务端返回的响应

如果我们可以通过Javascript直接发送网络请求，那么Web的可能就会更多，随之能实现的功能也会更多，至少不再在是单机游戏了

说白了，Ajax就是浏览器提供的一套API，可以通过Javascript调用，从而实现通过代码控制请求与响应，从而实现网络编程

能力不够，API来凑

2.状态码readyState
var xhr=new XMLHttpRequest();//readyState=0 表示请求代理对象 即初始化
xhr.open(‘GET’,url);//readyState=1 表示open方法已经调用，建立一个与服务器端口的连接
xhr.send();
xhr.onreadystatechange=function(){//当状态码变化时触发该事件
switch(this.readyState){
case 2:
//表示已经接收到了响应的响应头,并且可以通过getResponseHeader或者getAllResponseHeader获取响应头中的信息
case 3:
//表示正在下载响应的响应体，有可能响应体为空，也有可能不完整
//在这里处理响应体不保险，不可靠
case 4:
//表示下载响应体成功 但其实并不清楚服务器返回的响应体是否是正确的数据
}
};

3.onload事件
var xhr=new XMLHttpRequest();
xhr.open(‘GET’,url);
xhr.send(null);
xhr.οnlοad=function(){
console.log(this.readyState);//4，只有当状态码为4时才会触发该事件，该事件是新特性，所以要考虑兼容性
};

4.设置请求行，请求头，请求体
1.什么是请求行，请求头，请求体
请求行：

在这里插入图片描述

请求头：

在这里插入图片描述

请求体：

在这里插入图片描述

var xhr=new XMLHttpRequest();
xhr.open(‘POST’,url);//设置请求行
xhr.setRequestHeader(‘key’,‘value’);//设置请求头
xhr.setRequestHeader(‘Content-type’,‘application/json’);//设置请求体的格式为json，即告诉服务端，传输过去的数据格式是json
xhr.send(‘key=value’);//设置请求体

5.接口的概念
其实就是后端提供给前端的一个数据接口

前端可以向该接口发送请求，而该接口会根据请求返回相应的响应，这就是接口，之前自己用Node写的其实就是一个接口

前端可以向该接口发送数据，而该接口也可以返回相应的数据

6.发送GET请求
var xhr=new XMLHttpRequest();
xhr.open(‘GET’,‘baidu.com?id=1’);//GET请求传递数据按照该例子即可
xhr.send();
xhr.onreadystatechange=function(){
if(this.readyState!==4) return;
console.log(this.responseText);
};

7.发送POST请求
var xhr=new XMLHttpRequest();
xhr.open(‘POST’,url,true);//第三个参数传入布尔值，传入true表示异步模式，false表示同步模式
xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’);//表示发送的请求体的格式为键值对格式
xhr.send(‘key1=value1&key2=value2’);
xhr.onreadystatechange=function(){
if(this.readyState!==4) return;
console.log(this.responseText);
};

注意：同步模式与异步模式的区别在于：异步模式不会等待send方法执行完毕再执行下面的代码，而同步模式会等待send方法执行完毕，即发送请求并得到响应之后才会执行下面的代码
，