美文网首页
Ajax原生GET ,POST, Ajax+Promise

Ajax原生GET ,POST, Ajax+Promise

作者: VIAE | 来源:发表于2019-12-19 17:56 被阅读0次

最近写单页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);
});

相关文章

  • Ajax原生GET ,POST, Ajax+Promise

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

  • 原生js实现ajax及get post方法

    @拭目以待:首发于原生js实现ajax及get post方法 ajax原生实现,含 post与get方法。原码如下...

  • jQuery中的Ajax

    原生的Ajax Ajax之load Ajax之$.get() get与post方式的区别:1.安全性。post的安...

  • 实现异步请求的方法

    原生ajax写法: 请求方式:get,post,head,delete,get和post的区别 get将请求的参数...

  • ajax原生兼容

    总结一下JavaScript原生ajax写法 有get和post两种方法,写法差异不大 POST方法: GET方法

  • Ajax的使用方法

    Ajax 一、 javaScript原生使用Ajax 1.get方法 2.post方法 open()方法后面的参数...

  • ajax+jsonp

    1,ajax 原生写法 1.1、post和get请求的区别 1)get get请求的参数是直接接在url后面。se...

  • ajax提交 post和get

    ajax POST GET

  • jq中的ajax

    $.ajax() $.get() $.post() $.getJSON()

  • 自定义_ajax 两种方式

    一、用原生来写ajax 请求GET 请求POST 二、用ifarme来写 用ajax的时候,整体的请求步骤是1.向...

网友评论

      本文标题:Ajax原生GET ,POST, Ajax+Promise

      本文链接:https://www.haomeiwen.com/subject/tawmnctx.html