接口调用方式

一、原生ajax

具体用法：
post比get请求多一步

第一步：创建异步对象
var xhr = new XMLHttpRequest();

第二步：设置 请求行 open(请求方式，请求url):
// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");

第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()
// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：设置请求体 send()
// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);

第五步：让异步对象接收服务器的响应数据
// 一个成功的响应有两个条件：1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)
xhr.onreadystatechange = function(){
    
if(xhr.status == 200 && xhr.readyState == 4){
    
 console.log(xhr.responseText);
 }

二、jquery中ajax

具体用法：
通过$ajax发起请求

$.ajax({
   
 type:"get",// get或者post
 url:"abc.php",// 请求的url地址
 data:{
   },//请求的参数
 dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 
 timeout:3000,//3秒后提示错误
 beforeSend:function(){
    
 // 发送之前就会进入这个函数
 // return false 这个ajax就停止了不会发 如果没有return false 就会继续
 },
 success:function(data){
    // 成功拿到结果放到这个函数 data就是拿到的结果
 },
 error:function(){
   //失败的函数
 },
 complete:function(){
   //不管成功还是失败 都会进这个函数
 }
 总结：这种方式会受到CSRF攻击（跨站请求伪造）和xss攻击（跨站脚本攻击）
 针对MVC编程，不符合现在前端MVVM的浪潮，项目太大引入整个jquery不合理

三.基于promise设计的fetch

前言：先介绍promise

//主要解决异步深层嵌套的问题（回调地狱）
//promise提供了简洁的APi，使异步操作更加容易
new Promise( function(resolve, reject) {
   ..异步任务.} /* executor */  );
// Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
// 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
    


 1.基于Promise发送Ajax请求
  <script type="text/javascript">
    function queryData(url) {
   
     #   1.1 创建一个Promise实例
      var p = new Promise(function(resolve, reject){
   
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
   
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
   
            # 1.2 处理正常的情况
            resolve(xhr.responseText);
          }else{
   
            # 1.3 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
	# 注意：  这里需要开启一个服务 
    # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了(.then成功的响应，.catch失败的响应)
    queryData('http://localhost:3000/data')
      .<