ajax ? 如何创建一个ajax请求

1. 创建 XMLHttpRequest 对象。

2. 创建一个HTTP请求,并指定请求的:方法、URL、验证信息。

3. 设置响应请求状态变化的函数。

4. 发生请求。

5. 在回调函数中处理请求返回的数据。

6. 使用javascript和Dom实现局部刷新。

const url = "./api"
let xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
// 请求状态变化事件
xhr.onreadystatechange = function(){  
  // 请求未结束
  if(this.readyState !== 4)
    return;
  // 请求成功
  if(this.status == 200){
    handler(this.response);
  }
  //请求异常
  console.error(this.statusText);
  return;
}
// 请求失败事件
xhr.onerror = function(){
  console.error(this.statusText);
}
// 设置请求头
xhr.responseType = "json";
xhr.setRequestHeader("Accpet","application/json");
xhr.send();

基于 promise 封装

function Request(method,url,body){
  let promise = new Promise(function(resolve,reject){
    let xhr = new XMLHttpRequest();
    xhr.open(method,url,true);
    xhr.onreadystatechange = function(){  
      // 请求未结束
      if(this.readyState !== 4)
        return;
      // 请求成功
      if(this.status == 200)
        resolve(this.response);
      else
        reject(new Error(this.statusText));
    }
    xhr.onerror = function(){
      reject(new Error(this.statusText));
    }
    xhr.responseType = "json";
    xhr.setRequestHeader("Accpet","application/json");
    xhr.send();
  });
  return promise;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值