js/jquery 实现ajax异步加载请求

最近工作是搞后台，公司后台要求改版，项目自定框架layui，心里千万个不愿意哇：“啥年代了还layUi",当前流行的单页面vue+ele多nice哇，还能让我练练手学个潮流技能，没办法上吧！只听说layui坑多的难受，这不从登陆地方就捣鼓了一下午关于跨域加载的问题。

这里当然不是说跨域，是吐槽一下layui的请求方式：admin.req({})，贤心大佬也不给清晰的api文档，通过案例直接请求，报错无限连，随后发现此方法是type一直是get，窝草后台给的接口只能是post，换了，还是引入jquery！

那我写这个博客目的是啥？不知道，先写吧，万一以后用到请求呢？

1.原生js实现ajax异步请求方法：

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.open('post', api+'API/Provider/Login' );
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
//发送请求
xhr.send(obj.field);
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

2.jquery实现异步加载

$.ajax({
type:"post",
url:api+'API/Provider/Login',
async:true,
data: obj.field,
contentType: "application/x-www-form-urlencoded",
success:function(data){
   if(data.status == 1){
  console.log("成功："+data.msg);  
   }else{
   console.log("失败："+data.status);
  
   }
},
error:function(jqXHR){
   alert("发生错误："+ jqXHR.status);
}
});

哈哈哈，真是一个bug搞一下午，头大。