【JavaScript】自己动手封装一个ajax函数

绝地灬酷狼 2022-03-12 15:58 174阅读 0赞

我们在jquery中一般是这样是用ajax函数的：

xxx.addEventListener('click', function(){
      window.ajax({
        url:'/xxx',
        method: 'get',
        body: '',    //请求体，method为get可以为空
        headers: {   //请求头
          'content-type': 'application/x-www-form-urlencoded'
        }, 
        successFn: function() {
          console.log(success)
        },
        failFn: function() {
          console.log(fail)
        }
      })
    })

基于上面的代码我们封装一个window.ajax函数

window.ajax = function(options) {
      let {url, method, body, headers, successFn, failFn} = options
      let xhr = new XMLHttpRequest()
      xhr.open(method, url)
      
      for(key in headers) {
        let value = headers[key]
        xhr.setRequestHeader(key, value)
      }
    
      xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
          if(xhr.status >= 200 && xhr.status < 300) {
            successFn.call(undefined, xhr.responseText)
          } else if(xhr.status >= 400) {
            failFn()
          }
        }
      }
      xhr.send(body)
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关如何封装自己的Ajax函数

封装Ajax函数一、要实现的效果 -------------------- 一、要实现的效果 ![在这里插入图片描述][30207e0483f34af0

落日映苍穹つ/ 2024年04月01日 18:43/ 0 赞/ 39 阅读

相关自己动手实现一个阻塞队列

1. 阻塞队列介绍顾名思义，阻塞队列是一个具备先进先出特性的队列结构，从队列末尾插入数据，从队列头部取出数据。而阻塞队列与普通队列的最大不同在于阻塞队列提供了阻塞式的同

约定不等于承诺〃/ 2023年10月04日 11:29/ 0 赞/ 8 阅读

相关自己动手写ajax框架

闲来无事就开始琢磨怎么提高网站效率。。。。。然后就对jquery的框架很感兴趣。。本来很可惜jq没有一个定制的功能，把需要的功能提出来之后不是可以减少很多体积么。没办法

红太狼/ 2022年09月20日 09:16/ 0 赞/ 179 阅读

相关 ajax封装框架,封装自己的Ajax框架

Ajax技术就是利用javascript和xml实现异步交互的功能。首先先来介绍一下Ajax相关知识点一、Ajax对象的创建 1、创建Ajax对象的方式 a、第一种

柔情只为你懂/ 2022年09月03日 15:24/ 0 赞/ 239 阅读

相关 Ajax工具函数封装

原生Ajax写法回顾 > 原生使用`Ajax`主要分为五步,需要手写较多内容,如果每次我们使用`Ajax`都需要手写一遍,较为浪费时间,所以我们将公共代码抽取,封

骑猪看日落/ 2022年07月12日 07:24/ 0 赞/ 164 阅读

相关【JavaScript】自己动手封装一个ajax函数

我们在jquery中一般是这样是用ajax函数的： xxx.addEventListener('click', function(){ window.aj

绝地灬酷狼/ 2022年03月12日 15:58/ 0 赞/ 175 阅读

相关自己动手实现一个MVVM库

[自己动手实现一个MVVM库][MVVM] 我们知道的，常见的数据绑定的实现方法 1、数据劫持(vue)：通过[Object.defineProperty()][Obj

小鱼儿/ 2022年03月12日 15:50/ 0 赞/ 230 阅读

相关【JavaScript】封装一个jsonp函数

function jsonp({url, params, callback}) { return new Promise ((resolve, reject

比眉伴天荒/ 2022年02月24日 13:38/ 0 赞/ 190 阅读

相关 js 封装自己的Ajax函数

封装自己的Ajax函数主要是兼容自己的get，post两种不同请求的请求方式，在实现一下兼容的处理 ajax.open(method,url,true) 方法post

骑猪看日落/ 2021年11月11日 14:12/ 0 赞/ 259 阅读

相关自己封装ajax-post请求

// 3.post请求 var urls = 服务器地址, var url = 服务器接口 fn = 回调函

悠悠/ 2021年09月16日 23:38/ 0 赞/ 399 阅读