ajax 和 axios

ajax
技术核心是XMLHttpRequest,无须刷新页面即可从服务器取得数据，然后在通过DOM将新数据插入到页面中。
四部曲
1.先创建 XMLHttpRequest构造函数

var xhr = new XMLHttpRequest()

2.绑定监听事件，接收服务器发来的数据

xhr.onreadystatechange = function(){
  if(this.readyState === 4){
    if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
		console.log(xhr.responseText)
	}else{
		console.log(“错误的”+ xhr.status)
	}
  }
}

//XHR对象有一个readyState属性，表示当前处在请求/响应过程的哪个阶段。
	0(未初始化，尚未调用open()方法);
	1(已打开，已调用open()方法，未调用send()方法);
	2(已发送，已调用send()方法，未接到响应);
	3(接受中，已经收到部分响应);
	4(完成，已经接受到所有响应，可以使用了)
//每次readyState变化，都会触发readystatechange事件，可以做监听。
//为保证**跨浏览器兼容**，onreadystatechange事件应该在调用open()之前赋值。
//收到响应后，XHR以下属性会被填充以上数据
	responseText:作为响应体返回的文本;
	responseXML:如果响应的内容类型是“text/xml或application/xml。xmlDOM文档;
	status:响应的HTTP的状态
	statusText:响应的HTTP状态描述
收到响应后，检查status属性，2xx表示成功，304表示资源未修改过，是从浏览器缓存直接拿取的。

3.创建连接

xhr.open("method",url,bollean)
//接受三个参数 method:请求类型; url:请求地址;bollean:请求是否为异步
//调用open()不会实际发送请求，只是为发送请求做好准备

4.发送请求

xhr.send(null)
//接受一个参数，作为请求体发送的数据。不需要发送请求体，则必须传null(get请求)
//调用send()后，请求就会发送到服务器

get请求

//get请求没有请求主体，所以在发送请求是传null
xhr.send(null)
//需要传参时在url拼接查询字符串参数，
根据后台要求，每个名和值用不用使用encodeURLComponent编码例：
xhr.open("get",example.php?name1=value1&name2=value2,true)

post请求

//post不再地址拼接传递的参数，在请求主体中添加
xhr.send(formdata)
如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据,为保证请求头被发送，必须在open()之后，send()之前调用setRequestHeader()，如下所示

	xhr.open("POST","ajax_test.php", true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("name=rgp&age=27");

超时

xhr.timeout =1000
xhr.ontimeout =function(){
	//执行逻辑
}
//
如果请求没有在1秒钟返回则会中断，则会触发ontimeout事件处理程序，readyState仍然会变4，因此也会触发onreadystatechange事件，超时后访问status会发生错误，所以把他封装到try/catch语句中。
xhr.onreadystatechange = function(){
  if(this.readyState === 4){
  	try{
  		if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
			console.log(xhr.responseText)
		}else{
			console.log(“错误的”+ xhr.status)
		}
  	}catch(ex){
  		return
  	}  
  }
}

get/post本质没啥区别，
1.GET参数通过URL传递，POST放在Request body中
2.使用Get请求发送数据量小,Post请求发送数据量大
3.从性能方面，发送相同数量的数据，get请求比post请求快倆倍
....

axios

axios官方中文文档
官方文档说的简介很清楚，常用的，配置；修改请求数据/修改响应数据；拦截器等。