ajax到axios

简介

异步的 JavaScript 和 XML，最大的优点是无刷新获取数据。
http请求报文格式

HTTP请求报文和响应报文

1.HTTP请求报文由3部分组成（请求行+请求头+请求体）

请求行：

①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。

②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL。

③是协议名称及版本号。

请求头：

④是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。

与缓存相关的规则信息，均包含在header中

请求体：

⑤是报文体，它将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1&param2=value2”的方式传递请求参数

2.HTTP的响应报文也由三部分组成（响应行+响应头+响应体）

响应行：

①报文协议及版本；
②状态码及状态描述；

响应头：

③响应报文头，也是由多个属性组成；

响应体：

④响应报文体，即我们真正要的“干货”

ajax的使用

1.创建ajax核心对象XMLHttpRequest对象

	var xhr=null;  
	if (window.XMLHttpRequest){
	   // 兼容 IE7+, Firefox, Chrome, Opera, Safari  
	   xhr=new XMLHttpRequest();  
	} else{
	   // 兼容 IE6, IE5 
	   xhr=new ActiveXObject("Microsoft.XMLHTTP");  
	} 

2.向服务器发起请求（GET 、POST）

//1.请求格式设置，open() 方法的 url 参数是服务器上文件的地址
xmlhttp.open(method,url,async);
//2.将请求发送到服务器。
xmlhttp.send();

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步） 注意：post请使用 setRequestHeader() 来添加 HTTP 头设置请求头的格式内容

xmlhttp.open("POST","ajax_test.asp",true);
//setRequestHeader(header,value)。 header: 规定头的名称,value: 规定头的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

使用POST和GET的区别

1. get请求会将参数跟在url够进行传递，而post请求则是作为HTTP消息的实体内容发送给web服务器。当然在ajax请求中，这种区别对用户是不可见的。
2. 使用Get请求发送数据量小,Post请求发送数据量大
3. get请求需注意缓存问题，post请求不需担心这个问题（get方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。某种情况下，get方式会带来严重的安全问题。而post方式相对来说就可以避免这些问题 。）

使用GET会遇到的一些小问题
1.缓存：当每次访问的url相同，当每次访问的url相同，客户端直接读取本地缓存里面的内容，即使后台数据变化前台也不会有变化；
解决方法：在？后面链接一个num=【随机数Math.random()】或者num=【时间戳new Date().getTime()】

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

2.乱码：乱码，当传递中文或者特殊字符的时候，前台显示出现乱码
解决办法：使用编码encodeURI(‘蜗牛’)

xhr.open('get','2.get.php?username = '+encodeURIComponent(leo)+'&age=30&'+new Date().getTime(),true)

服务器响应处理（同步、异步）

我们都知道，JavaScript 会等到服务器响应就绪才继续执行。使用同步方式的时候，如果服务器繁忙或缓慢，应用程序会挂起或停止。这是使用异步的重要原因。

• 使用同步（async：false） 不推荐

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

• 使用异步（async:true）强推

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

readyState状态值

用来标识当前XMLHttpRequest对象处于什么状态。 readyState总共有5个状态值。

• 0：未初始化 – 尚未调用.open()方法；
• 1：启动 – 已经调用.open()方法，但尚未调用.send()方法；
• 2：发送 – 已经调用.send()方法，但尚未接收到响应；
• 3：接收 – 已经接收到部分响应数据；
• 4：完成 – 已经接收到全部响应数据，而且已经可以在客户端使用了；

axios

特性：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

常用请求方式：

• get：获取数据
• post：提交数据（表单提交+文件上传）
• put：更新数据（所有数据推送到后端）
• patch：更新数据（只将修改的数据推送到后端）
• delete：删除数据

对axios进行二次封装

待更新……