ajax和axios两种请求的概念联系以及区别
概念：
ajax:
-
定义
使用HTTP脚本来按需加载数据，而不需要刷新整个页面。
-
原生js中
使用：例子如下：
function get(url,callback){
var request=new XMLHttpRequest(); //创建新请求
request.open("GET",url，false); //指定待获取的URL (param1: 请求类型 param2:请求地址，params:是否异步)
request.onreadystatechange=function(){ //定义事件监听器
//如果请求完成且成功
if(request.readyState===4 && request.status===200){
//获取相应类型
var type=request.getResponseHeader("Content-Type");
//检查类型 为html文档
if(type.indexOf("xml")!==-1 && request.responseXML){
callback(request.responseXML); //document 对象响应
}else if(type==="application/json"){
callback(JSON.parse(request.responseText)); //JSON响应
}else{
callback(request.responseText); //字符串响应
}
}
request.send(null); //立即发送请求
}
}
优势与缺点：兼容性不好。
-
jquery中：
描述：
jquery内置了Ajax工具来简化使用。jQuery定义了一个高级工具方法load() ,和4个高级工具函数jQuery.getScript(),jQuery.getJSON(),jQuery.get(),jQuery.post()，jQuery.ajax()。
使用：
1.load()
$.("#temp").load("us_wether_report.html","zipcode=021314") //接受3个参数，参数1必须，参数2,3为可选。参数1含义url，异步加载url内容，填入到dom对象中。参数2为请求的参数，若为key-value形式的对象，则是post请求，若为key=value形式的字符串，则为get请求。
2.jQuery.getScript();
加载并执行JavaScript代码文件。只能收到success的状态。
使用：
//加载一个类库，并在加载完成后立刻使用
jQuery.getScript("js/jquery.my_plugin.js",function(){
$('div').my_plugin(); //使用加载的类库
})
3.jQuery.getJSON()
获取文本，将其解析为JSON。
使用：
//data.json: '{"x":1,"y":2}'
jQuery.getJSON("data,json",function(data){
//data 参数是对象{x:1,y:2}
} )
4.jQuery.get()和jQuery.post()
使用：
jQuery.get()为HTTP get 请求，jQuery.post() 为HTTP post 请求。参数与getJSON,getScript一致。不同点在于：可接受的数据类型可以是6种（text,html,xml,script,json,jsonp）
5.jQuery.ajax()
jQuery中的所有ajax工具最后都会调用jQuery.ajax(), 其接受1个餐数据：一个选项对象，其属性指定ajax请求如何执行的很多细节。
等价关系：jQuery.getScript(url,callback)与
jQuery.ajax({
type:"GET",
url:"url",
data:null,
dataType:"script", //一旦获取到数据，立即当做脚本执行
success:callback //完成时调用该函数
})
jQuery1.5 加入了error回调
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});axios:
-
vue:
使用：
axios:
axios({
url: '接口地址',
method: 'get', //或者 post 请求类型
responseType: 'json', //默认格式，如果就是 json 格式可以不写
data: {
'username' : 'hermit',
'password' : 'a123'
}
}).then( function(response){ // 请求正确返回的数据
console.log(response);
console.log(response.data);
}).catch( function(error) { // 请求错误返回的数据
console.log(error);
})
此外，可用axios.create()建立新的axios。该用法包括自定义配置 。
联系与区别：
1.概念方面：axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范；jQuery ajax 是对原生XHR的封装。
2. 使用场景：
jQuery ajax ：
- 适合利用jQuery开发，MVC设计模式的项目。
- 适合前后端不关注分离。
axios :
- axios 适用于采用node.js运行javaScript的项目。多是MVVM设计模式。
- 前后端关注分离。
- 具有拦截转换请求和响应的特性。