xmlHttpRequest、Axios、Ajax

xmlHttpRequest

w3c上的使用例子：

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  // 第一步创建xmlHttpRequest对象
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;   // 第二步绑定事件回调，readyState改变的一个回调
  xmlhttp.open("GET",url,true);             // 第三步配置请求方式、url等，然后send发送
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)      //  第四步，回调函数中通过判断状态码等，处理结果。
                                //  貌似结果都是在xmlhttpRequest对象属性上
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

Axios

axios 是一个基于Promise的 HTTP 客户端(库），本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

Ajax与Axios区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样

axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一定有。

使用方法基本一样，只有参数不同，直接看代码：

axois：

axios({
            url: 'http://jsonplaceholder.typicode.com/users',
            method: 'get',
            responseType: 'json', // 默认的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
        })

ajax：

$.ajax({
            url: 'http://jsonplaceholder.typicode.com/users',
            type: 'get',
            dataType: 'json',
            data: {
                //'a': 1,
                //'b': 2,
            },
            success: function (response) {
                console.log(response)；
            }
        })