如果现在的你对网络请求还有困惑，建议你进来看看 (✿◡‿◡)

一、网络请求的原理

在web应用中，前台和后台通信交互是必不可少的，如：js获取后台数据库信息、用户在前端发送控制指令等等，这些都需要通信交互。

后端通信方式：
后台暴露一个接口，然后前端对该接口发送请求，并附带相关参数。后台暴露的接口统称为web service，其中按协议分为：SOAP 和REST的。从统一性和标准性来说，基于REST的服务接口无疑是当今的主流。

前端通信方式：
前端获取后台信息的方式也有很多种，如：asp/jsp前后台代码混合的方式；使用<script>、<iframe>标签请求后台信息；以及现在大规模的ajax方式。
ajax方式对于一般web应用开发者来说，可以借助于第三方ajax框架来完成，主流的ajax框架有：JQuery、Dojo、Ext等等，他们不但有丰富的UI效果，封装了浏览器之间的差异，而且在使用ajax上也是十分简洁。
下面来谈谈基于不同框架的Ajax。

二、基于不同框架的Ajax

1.基于XMLHttpRequest(XHR)的Ajax

① ajax
AJAX 英文名是：Asynchronous JavaScript and XML，通俗的理解就是用JavaScript执行异步网络请求。
它最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。并且不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

② XMLHttpRequest
XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。

Level 1主要存在以下缺点：
不能发送跨域请求；
不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

Level 2中新增了以下功能：
可以发送跨域请求，在服务端允许的情况下；
支持发送和接收二进制数据；
新增formData对象，支持发送表单数据；
发送和获取数据时，可以获取进度信息；
可以设置请求的超时时间；

③ 使用方式
在基于工作原理的基础上，对基于XMLHttpRequest(XHR)的Ajax使用步骤进行分解。

3-1创建XHR对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3-2 发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

open方法三个参数的解析：
第一，请求的类型，选择GET 或 POST。
GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）；向服务器发送大量数据（POST 没有数据量限制）；发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠.

第二，文件在服务器上的位置。该文件可以是任何类型的文件，比如 .txt 和 .xml等等。
第三，是否异步，默认是true。
3-3 服务器响应
如果需要获得来自服务器的响应，可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
如果来自服务器的响应并非 XML并且返回字符串形式的响应，使用responseText 属性；如果来自服务器的响应是 XML而且需要作为 XML 对象进行解析，使用 responseXML 属性。具体代码如下:

//responseText属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

//responseXML属性
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

3-4 响应任务
当请求被发送到服务器时，就要执行一些响应的任务并且当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息，XMLHttpRequest 对象的三个重要的属性：
第一：onreadystatechange，函数名.
每当 readyState 属性改变时，就会调用该函数；
第二：readyState。
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪。
第三：status，状态。
200代表ok，404代表未找到页面。具体代码如下：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

可以看到，当我们要使用基于XHR的ajax，需要编写很多的代码，而且调用和配置的方式很混乱，所以一般如果开发环境不是Vue的话，都会使用基于jQuery的ajax。

2.基于jQuery的ajax

用法十分简单，通过$.ajax()的方式使用，只是内部的参数比较多，下面列举了一下常见的参数：

$.ajax({          
         url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         success:function(data){请求成功时执行},      
         error:function(){请求失败时执行}
});

相对于传统的Ajax就非常好用了.但是如果是使用Vue框架的话，就不太适合使用基于jQuery的ajax。
因为如果为了方便我们进行一个网络请求, 特意引用一个jQuery, 是不合理的，jQuery的代码1w+行，Vue的代码才1w+行.完全没有必要为了用网络请求就引用这个重量级的框架.所有又产生了基于Vue的ajax

3.基于 Vue-resource的ajax

Vue-resource的体积相对于jQuery小很多.并且是官方推出的。但更遗憾的是在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新。
意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护。对以后的项目开发和维护都存在很大的隐患。
所以又产生了下面的终极版--axios，有关axios的具体介绍请期待小编明天的日更，哈哈哈。

今天的网络请求就到这里啦，主要有四种方式：基于XHR的ajax、基于jQuery的ajax、基于Vue-resource的ajax、基于Vue2.0的axios。
❤记得给小编点赞哟❤