原生axajx以及类jquery的简单封装

最新推荐文章于 2023-02-08 09:00:00 发布

沁染流年

最新推荐文章于 2023-02-08 09:00:00 发布

阅读量407

点赞数

分类专栏：前端 JavaScript 文章标签： js ajax jquery

本文链接：https://blog.csdn.net/weixin_49210760/article/details/123935629

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

1.原生

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生ajax</title>
</head>
<body>
  <script>
    // XMLHttpRequest 和ActiveX(ie5,ie6只兼容ActiveX)
    let xhr = null
    // 1实例化一个xhr对象

    if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
    }else{
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    console.log(xhr);
    console.log('xhr.readyState',xhr.readyState); // readyState 0
    // 2.参数设置 async : true异步 false异步
    // send方法（发送请求） 发送post请求体用 get不用写
    xhr.open('GET','XXXX',true)
    xhr.send()
    console.log('xhr.readyState',xhr.readyState); //readyState 1


    // post
    xhr.open('post','XXXX',true)
    // 主语这里要加请求头类型 这样后端接收到 status=1&uname=1才能知道这是一个post数据
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencode')
    // 注意写法
    xhr.send('status=1&uname=1')



    xhr.onreadystatechange = function(){
      // onreadystatechange只能看到2 3 4
      console.log('xhr.readyState',xhr.readyState);
      if(xhr.status === 200 && xhr.readyState===4 ){
        console.log('请求成功');
        // responseText返回字符串数据 还有一个responseXML很少用
        console.log(JSON.parse(xhr.responseText));
      }
    }
  </script>

</body>
</html>

2.封装ajax 类query简单版本

var $ = (
  function () { 
    var xhr = window.XMLHttpRequest? new XMLHttpRequest(): new ActiveXObject('Microsoft.XMLHTTP')
    if (!xhr) { 
      throw new Error('您的浏览器不支持异步http请求')
    }
    function _doajax (options) { 
      var opt = options || {}
      var type = (opt.type || 'GET').toUpperCase()
      var async = opt.async || true
      if (opt.url) { 
        throw new Error('请填写url')
      }
      var url = opt.url
      var data = opt.data || null
      var error = opt.error || function () { 
        console.log('错误');
      }
      var success = opt.success || function () { 
        console.log('成功');
      }
      var complete = opt.complete || function () { 
         console.log('都执行');
      }

      xhr.open(type, url, async)
      type === 'POST' && xhr.setRequestHeader('Content-type','application/x-www-form-urlencode')
      // 注意修改data格式
      function initData (obj) { 
        var str = ''
        for(var key in obj){
          var value = obj[key]
          str += (key + '='+value+'&')
        }
        return str.replace(/&$/,'')
      }
      xhr.send(type === 'POST' ? initData(data) : null)
   
      xhr.onreadystatechange = function(){
        // onreadystatechange只能看到2 3 4
        console.log('xhr.readyState',xhr.readyState);
        if (xhr.status === 200 && xhr.readyState === 4) {
          console.log('请求成功');
          // responseText返回字符串数据 还有一个responseXML很少用
          console.log(JSON.parse(xhr.responseText));
          success()
          complete
        } else { 
          error()
          complete()
        }
      }
    }
    return {
      ajax (opt) { 
        _doajax(opt)
      },
      // post (url,data,callback) {
      //  },
      post (url, data, callback) {
        _doajax({
          type:'post',
          url,
          data: data,
          success:callback
        })
       },
      // get (url, callback) { 
      // }
       get (url, callback) { 
          _doajax({
          type:'get',
          url,
          success:callback
        })
      }
    }


  }
)()

沁染流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生axajx以及类jquery的简单封装

1.原生<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生ajax
复制链接

扫一扫