美文网首页
原生js实现ajax

原生js实现ajax

作者: MY代码世间 | 来源:发表于2019-07-17 21:12 被阅读0次

1. 简单实现

// 实例化
let xhr = new XMLHttpRequest()
// 初始化
xhr.open(method, url, async)
// 发送请求
xhr.send(data)
// 设置状态变化回调处理请求结果
xhr.onreadystatechange = () => {
  if (xhr.readyStatus === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

2. 基于promise实现

function ajax (options) {
  // 请求地址
  const url = options.url
  // 请求方法
  const method = options.method.toLocaleLowerCase() || 'get'
  // 默认为异步true
  const async = options.async
  // 请求参数
  const data = options.data
  // 实例化
  const xhr = new XMLHttpRequest()
  // 请求超时
  if (options.timeout && options.timeout > 0) {
    xhr.timeout = options.timeout
  }
  // 返回一个Promise实例
  return new Promise ((resolve, reject) => {
    xhr.ontimeout = () => reject && reject('请求超时')
    // 监听状态变化回调
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4) {
        // 200-300 之间表示请求成功,304资源未变,取缓存
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
          resolve && resolve(xhr.responseText)
        } else {
          reject && reject()
        }
      }
    }
    // 错误回调
    xhr.onerror = err => reject && reject(err)
    let paramArr = []
    let encodeData
    // 处理请求参数
    if (data instanceof Object) {
      for (let key in data) {
        // 参数拼接需要通过 encodeURIComponent 进行编码
        paramArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      }
      encodeData = paramArr.join('&')
    }
    // get请求拼接参数
    if (method === 'get') {
      // 检测url中是否已存在 ? 及其位置
      const index = url.indexOf('?')
      if (index === -1) url += '?'
      else if (index !== url.length -1) url += '&'
      // 拼接url
      url += encodeData
    }
    // 初始化
    xhr.open(method, url, async)
    // 发送请求
    if (method === 'get') xhr.send(null)
    else {
      // post 方式需要设置请求头
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
      xhr.send(encodeData)
    }
  })

相关文章

  • 原生js实现Ajax

    原生js实现Ajax方法:var Ajax={get: function(url, fn) { var xhr =...

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

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

  • 前端基础知识-示例代码

    1、ajax 2、jsonp a、原生实现方式 b、jquery ajax: c、vue.js d、npm包jso...

  • js原生的ajax

    //下面是原生的js实现的ajax function myajax(){ var xmlhttp; if (win...

  • ajax和fetch的区别

    一、Ajax Ajax的本质是使用XMLHttpRequest对象来请求数据,下面简单贴下原生js实现: 二、fe...

  • 原生JS AJAX实现

    AJAX说明 IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用:new XMLHttpRequest(...

  • 原生js实现Ajax

    如果要用原生的JS实现Ajax怎么整呢,让我们一起来整一个试试。 方法: /** 详细说明: 1.Ajax步骤:1...

  • 原生JS实现AJAX

    原生JS实现AJAX代码,代码如下 如果需要ajax运行方法完成后调用结果的话 需要使用回调函数 或者 promi...

  • 原生js实现ajax

  • 原生JS实现Ajax

    原生Js的实现 事件 鼠标事件 *e.stoppropagation();//阻止事件冒泡 键盘事件 事件对象(e...

网友评论

      本文标题:原生js实现ajax

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