Ajax原生GET ,POST, Ajax+Promise

2019-12-19  本文已影响0人  VIAE

最近写单页demo,没有用到前端框架和js库,需要ajax原生
get方法

  //原生构造ajax请求
  let xhr = new XMLHttpRequest();
  //请求响应
  xhr.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
         //网友写的api返回值在responseText里面,但是我的返回值就是response,大家根据自己的情况使用
         let res = this.response
      }
  }
  //有参数的直接拼到url上就好了
  xhr.open('get','https://www.jianshu.com/u/374ca941200a');
  //发送请求
  xhr.send();

post方法

  //原生构造ajax请求
  let xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  //post请求需要的参数
  let data = new FormData();
  data.append('length', length);
  //请求响应
  xhr.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
         //网友写的api返回值在responseText里面,但是我的返回值就是response,大家根据自己的情况使用
         let res = this.response
      }
  }
  xhr.open('post','/fa');
  //发送请求
  xhr.send(data);

Ajax 和 Promise异步

new Promise(function(resolve,reject){
    //原生构造ajax请求
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    //post请求需要的参数
    let data = new FormData();
    data.append('length', length);
    //post需要设置请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");
    //请求响应
    xhr.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            resolve(this.response)
        }
    }
    xhr.open('post','/fa/b');
    //发送请求
    xhr.send(data);
}).then((res)=>{
    console.log(res)
},
(err)=>{
    console.log(err);
});
上一篇 下一篇

猜你喜欢

热点阅读