返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >如何封装一个Ajax函数
  • 688
分享到

如何封装一个Ajax函数

2024-04-02 19:04:59 688人浏览 八月长安
摘要

目录如何封装ajax函数封装自己的 Ajax 函数如何封装Ajax函数 一个Ajax函数: // 一个Ajax函数 var xhr = null; if(window.XMLH

如何封装Ajax函数

一个Ajax函数:


// 一个Ajax函数
var xhr = null;
if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest;
}else{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","https://JSONplaceholder.typicode.com/users");
xhr.send(null);
xhr.onreadystatechange = function(){
   if(this.readyState === 4){
        console.log(xhr.responseText)
    }
}

封装自己的 Ajax 函数

参数1:{string} 请求方法--method
参数2:{string} 请求地址--url
参数3:{object} 请求参数--params
参数4:{function} 请求完成后,执行的回调函数--done


 function ajax(method,url,params,done){
//  统一将method方法中的字母转成大写,后面判断GET方法时 就简单点
  method = method.toUpperCase(); 
  //IE6的兼容
  var xhr = window.XMLHttpRequest
   ? new XMLHttpRequest()
   : new ActiveXObject("Microsoft.XMLHTTP");

  //创建打开一个连接 open
             
  //将对象格式的参数转为urlencoded模式
  //新建一个数组,使用for循环,将对象格式的参数,
  //以(id = 1)的形式,每一个键值对用 & 符号连接
 var pairs = [];
 for(var k in params){
     pairs.push(k + "=" + params[k]);
  }
  var str = pairs.join("&");       
  //判断是否是get方法 , get方法的话,需要更改url的值
 if(method == "GET"){
       url += "?" + str;
  }
             
//创建打开一个连接
 xhr.open(method,url);

var data = null;
if(method == "POST"){
    //post方法 还需要设置请求头、请求体
    xhr.setRequestHeader("Content-Type",
    "application/x-www-fORM-urlencoded");
    data = str;
                 
}
xhr.send(data);

 //执行回调函数
xhr.onreadystatechange = function(){
   if(this.readyState == 4) {
       done(jsON.parse(this.responseText));
   }return;
   // 执行外部传进来的回调函数即可
   // 需要用到响应体
   }
}  

//调用函数
//get方法
//  ajax("GET","http://localhost:3000/users",
//     {"id":1},
//     function(data){
//         console.log(data);
//  });

//post方法     
ajax("POST", "http://localhost:3000/users",
 { "name": "lucky","class":2,"age":20 },
 function (data) {
     console.log(data);
});

以上就是如何封装一个Ajax函数的详细内容,更多关于封装Ajax函数的资料请关注编程网其它相关文章!

--结束END--

本文标题: 如何封装一个Ajax函数

本文链接: https://lsjlt.com/news/125250.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何封装一个Ajax函数
    目录如何封装Ajax函数封装自己的 Ajax 函数如何封装Ajax函数 一个Ajax函数: // 一个Ajax函数 var xhr = null; if(window.XMLH...
    99+
    2024-04-02
  • 怎么封装一个Ajax函数
    这篇文章将为大家详细讲解有关怎么封装一个Ajax函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如何封装Ajax函数一个Ajax函数:// 一个Ajax函数var xhr ...
    99+
    2023-06-14
  • 如何编写一个封装的Ajax类
    本篇内容主要讲解“如何编写一个封装的Ajax类”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何编写一个封装的Ajax类”吧!用法:  new&nbs...
    99+
    2024-04-02
  • 如何封装ajax
    小编给大家分享一下如何封装ajax,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 以前开发用了很多AJAX的技术比如EXT,prototype,jQuery等...
    99+
    2024-04-02
  • JQuery如何封装Ajax
    这篇文章主要介绍JQuery如何封装Ajax,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!why easy-ajaxeasy-ajax是为了治理前端乱写Ajax方法而生。基于jque...
    99+
    2024-04-02
  • 如何用php封装一个增加下划线的函数
    这篇文章主要介绍“如何用php封装一个增加下划线的函数”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何用php封装一个增加下划线的函数”文章能帮助大家解决问题。一、原始实现增加下划线的方法很简单,...
    99+
    2023-07-05
  • Ajax如何实现封装
    小编给大家分享一下Ajax如何实现封装,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!之前是点击按钮取出新闻,现在要实现每隔一段事...
    99+
    2024-04-02
  • php封装一个数据库查询的函数
    在网站开发中,对于数据库的操作是非常常见的。而对于PHP语言,查询数据库也是一个非常重要的功能。在PHP中,我们通过MySQLi和PDO两种扩展去操作数据库。而在使用MySQLi和PDO查询数据库时,我们通常需要写很长的代码,这样增加了不必...
    99+
    2023-05-14
    php
  • js原生Ajax如何封装
    这篇文章主要介绍了js原生Ajax如何封装,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。原理及概念AJAX即“Asynchronous Ja...
    99+
    2024-04-02
  • 如何封装一个好用的axios
    这篇文章主要介绍了如何封装一个好用的axios的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何封装一个好用的axios文章都会有所收获,下面我们一起来看看吧。通用能力列一下我想要这个通用请求能达到什么样的效果...
    99+
    2023-07-02
  • php怎么封装一个数据库查询的函数
    这篇文章主要介绍“php怎么封装一个数据库查询的函数”,在日常操作中,相信很多人在php怎么封装一个数据库查询的函数问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php怎么封装一个数据库查询的函数”的疑惑有所...
    99+
    2023-07-05
  • python如何调用封装函数
    在python中使用模块调用封装函数,具体方法如下:例:调用module模块中的sum函数import module #封装函数的文件名aa = module.sum(1, 2) #模块名.函数名print(aa)...
    99+
    2024-04-02
  • Golang如何封装PHP常用函数
    本文小编为大家详细介绍“Golang如何封装PHP常用函数”,内容详细,步骤清晰,细节处理妥当,希望这篇“Golang如何封装PHP常用函数”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。Golang实现PHP常用...
    99+
    2023-06-28
  • 如何封装一个python的pymysql操作类
    这篇“如何封装一个python的pymysql操作类”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何封装一个python的...
    99+
    2023-07-04
  • Android如何简单封装一个MVP基类
    这篇文章主要介绍“Android如何简单封装一个MVP基类”,在日常操作中,相信很多人在Android如何简单封装一个MVP基类问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Android如何简单封装一个MV...
    99+
    2023-07-05
  • 怎么用php封装一个增加下划线的函数
    PHP是一门广泛应用于Web开发的动态语言,它具有语法简单、易学易用等优点。在PHP开发中,经常需要对字符串进行处理,比如增加下划线。本文将介绍PHP中如何封装一个增加下划线的函数。一、原始实现增加下划线的方法很简单,在字符串中每个字符后添...
    99+
    2023-05-14
    php
  • LocalStorage如何封装一次
    这篇文章主要介绍“LocalStorage如何封装一次”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“LocalStorage如何封装一次”文章能帮助大家解决问题。1. 封装基础的方法首先对于loca...
    99+
    2023-07-02
  • 如何使用Vue的思想封装一个Storage
    目录背景功能目的想法来源实现setgetdeletePropertypreventExtensionshas总结背景 localStorage、sessionStorage 这两个...
    99+
    2024-04-02
  • 如何在java中封装一个JDBC工具类
    如何在java中封装一个JDBC工具类?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Java是什么Java是一门面向对象编程语言,可以编写桌面应用程序、Web应用程序、分布...
    99+
    2023-06-14
  • 如何开发一个封装iframe的vue组件
    这篇文章给大家分享的是有关如何开发一个封装iframe的vue组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。VUE的基本组成单元,我看应该是组件。用VUE开发前端项目,就是开发一个个组件,然后搭积木一样,将项...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作