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设计模式。
• 前后端关注分离。
• 具有拦截转换请求和响应的特性。