ajax使用步骤

1.创建XmlHttpRequest对象
2.调用open方法设置基本请求信息
3.设置发送的数据，发送请求
4.注册监听的回调函数
5.拿到返回值，对页面进行更新

ajax的get/post请求

其实get和post的请求方式大致是相同的，下面分别是get和post的示例代码：
get

    <script>//步骤一:创建异步对象var xhr = new XMLHttpRequest();//步骤二:设置请求的基本参数xhr.open('get','test.php');//步骤三:发送请求xhr.send();//步骤四:注册onreadystatechange监听事件，只要状态改变就会调用xhr.onreadystatechange = function () {if (ajax.readyState == 4 && ajax.status == 200) {//步骤五 如果能够进到这个判断 说明数据完美到手console.log(ajax.responseText);//操作返回内容}}</script>

post

    <script>//创建异步对象  var xhr = new XMLHttpRequest();//设置请求基本信息，并加上请求头xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.open('post', 'test.php' );//发送请求xhr.send('name=Lan&age=18');xhr.onreadystatechange = function () {// 这步为判断服务器是否正确响应if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);} };</script>

onreadystatechange
这个监听函数是来监听readyState这个状态值得：

ajax优缺点

JqueryAjax

其实Jquery的ajax就是在原生的ajax的基础上进行了封装，其实没有太多好说的东西，不过加上了对JSONP的支持，附上例子：

    <script>var loginBtn =  document.getElementsByTagName("button")[0];loginBtn.onclick = function(){ajax({type:"post",url:"test.php",data:"name=lan&pwd=123456",success:function(data){console.log(data);}});}</script>
ajax方法里面需要传入一个对象参数，里面包括了一些常见的参数，其实jquery维护了这么多年了，ajax请求其实已经很方便了，如果非要说有什么缺点的话，就是依然对回调嵌套不方便，然后就是如果为了一个JqueryAjax就引入整个jquery，文件比较大，成本过高。
Fetch
Fetch是ajax非常好的一个替代品，很有可能将来会完全代替ajax的地位。我们先来看下浏览器的支持情况：



我们可以看到IE浏览器完全不支持Fetch，并且移动端的很多浏览器也不支持Fetch，不过可以使用第三方的ployfill来获得支持。Github.fetch
Fetch写法
不管是原生的Ajax还是Jquery封装的Ajax都有一个问题就在于回调地狱，fetch很友好的解决了这个问题，fetch大概长这个样子：
fetch(...).then(fun2).then(fun3)......catch(fun)
它给人一种同步的流程来书写非同步的操作，成功的解决了回调地狱的问题。Fetch能做到这一点，是因为Fetch API是基于Promise设计的。并且fetch调用非常简单，因为它是挂在BOM上的，属于全局的方法。
Fetch获取数据
我们使用Fetch来获取数据时，会返回给我们一个Pormise对象，我们简单看一下：
    <script>fetch("http://www.abc.cn/test").then(Response => {console.log(Response);})</script>
输出如下：



OK就是true，status是200，我们可以看到这里面并没有我们想要的数据，其实数据都在body属性里面，是一种数据流的形式，一般服务器会给我们返回JSON数据的格式，我们可以调用response.json来转化下数据：
    <script>fetch("http://www.abc.cn/test").then(Response => Response.json()).then(data => {console.log(data);})</script>
处理之后，我们继续.then就可以拿到处理之后的数据了。所以这么来看的话通过Fetch来获取数据是非常简洁简单的。
Fetch发送数据
Fetch发送数据也非常的简单，API长这样：
	fetch(url,options)
第二个参数会传入一个对象来配置请求的信息。下面先看一个例子：
    <script>fetch('http://www.mozotech.cn/bangbang/index/user/login', {method: 'post',headers: {'Content-Type': 'application/x-www-form-urlencoded'},body: new URLSearchParams([["username", "Lan"],["password", "123456"]]).toString()}).then(res => {console.log(res);return res.text();}).then(data => {console.log(data);})</script>
对传入的参数做个说明：

值得一提的是，fetch默认的post的header是Content-Type:text/plain;charset=UTF-8，不过通常我们的post请求是通过表单的形式提交的。所以我们需要把header修改为：Content-Type:application/x-www-form-urlencoded

Cookie传递

fetch发送请求时，不像XHR，因为它默认是不带上Cookie的，如果站点依赖于维护一个用户会话，可能导致未经认证的请求，所以我们需要手动的把Cookie带上，只需加上 credentials: 'include'即可：

    <script>fetch('https://www.abc.com/search', {method: 'GET',credentials: 'include' // 强制加入Cookie}).then((res)=>{return res.text()}).then((res)=>{console.log(res)})</script>
Fetch优缺点

Axios

Vue2.0之后，axios开始受到更多的欢迎了。其实axios也是对原生XHR的一种封装，不过是Promise实现版本。
它是一个用于浏览器和 nodejs 的 HTTP 客户端，符合最新的ES规范。简单看下如何使用即可

    <script>axios({method: 'post',url: '/abc/login',data: {userName: 'Lan',password: '123'}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});</script>
感觉axios算是比较完美的一种方案了，几乎没有什么大的缺点。
总结
其实有这么多种的请求方法和解决方案，总结一下：原生XHR几乎很少开发会用，JqueryAjax属于老当益壮的那种，虽然很老，但是很好用，Fetch是属于初生牛犊，还需要慢慢成长，axios就目前来说，算是非常好的了，无脑使用即可。