前言

众所周知，jquery在我们日常开发中的使用频率非常高，与js相比，我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。

首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下：

//data作为参数传入我们下面封装的函数
var data = {
       //数据
       user:"yonghu1",
       pass:'12345',
       age:18,
       //回调函数
       success:function (data){
        alert(data);
       }
      }

函数封装：

1、封装一个辅助函数，把传进来的对象拼接成url的字符串

function toData(obj){
  if (obj == null){
    return obj;
  }
  var arr = [];
  for (var i in obj){
    var str = i+"="+obj[i];
    arr.push(str);
  }
  return arr.join("&");
}

2、封装Ajax

function ajax(obj){
  //指定提交方式的默认值
  obj.type = obj.type || "get";
  //设置是否异步，默认为true(异步)
  obj.async = obj.async || true;
  //设置数据的默认值
  obj.data = obj.data || null;
  if (window.XMLHttpRequest){
    //非ie
    var ajax = new XMLHttpRequest();
  }else{
    //ie
    var ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //区分get和post
  if (obj.type == "post"){
    ajax.open(obj.type,obj.url,obj.async);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var data = toData(obj.data);
    ajax.send(data);
  }else{
    //get test.php?xx=xx&aa=xx
    var url = obj.url+"?"+toData(obj.data);
    ajax.open(obj.type,url,obj.async);
    ajax.send();
  }

  ajax.onreadystatechange = function (){
    if (ajax.readyState == 4){
        if (ajax.status>=200&&ajax.status<300 || ajax.status==304){
          if (obj.success){
            obj.success(ajax.responseText);
          }
        }else{
          if (obj.error){
            obj.error(ajax.status);
          }
        }
      }
   }  
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js  # Ajax  # 封装  # 原生js封装的一些jquery方法(详解)  # 原生js仿jquery实现对Ajax的封装  # 详解JavaScript原生封装ajax请求和Jquery中的ajax请求  # JavaScript使用链式方法封装jQuery中CSS()方法示例  # 基于jquery封装的一个js分页  # JS链式调用的实现方法  # 学习JavaScript设计模式(链式调用)  # 原生js实现简单的链式操作  # javascript中的链式调用  # js实现封装jQuery的简单方法与链式操作详解  # 默认值  # 让我们  # 多个  # 要用  # 说到底  # 众所周知  # 回调  # 大家多多  # 默认为  # 使用频率  # 使用它  # url  # alert  # toData  # arr  # success  # function  # join  # push  # str 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： zabbix利用python脚本发送报警邮件的方法  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  三星网站视频制作教程下载,三星w23网页如何全屏？  开心动漫网站制作软件下载,十分开心动画为何停播？  Android使用GridView实现日历的简单功能  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  UC浏览器如何设置启动页 UC浏览器启动页设置方法  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  如何在阿里云购买域名并搭建网站？  html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】  php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】  如何在阿里云虚拟服务器快速搭建网站？  如何构建满足综合性能需求的优质建站方案？  Android中AutoCompleteTextView自动提示  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  如何用花生壳三步快速搭建专属网站？  如何快速完成中国万网建站详细流程？  如何在腾讯云免费申请建站？  HTML 中如何正确使用模板变量为元素的 name 属性赋值  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  如何在阿里云ECS服务器部署织梦CMS网站？  深入理解Android中的xmlns:tools属性  Android okhttputils现在进度显示实例代码  常州企业网站制作公司,全国继续教育网怎么登录？  Laravel Fortify是什么，和Jetstream有什么关系  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  浅谈Javascript中的Label语句  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  python中快速进行多个字符替换的方法小结  Laravel如何创建自定义Artisan命令？（代码示例）  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  微信小程序 scroll-view组件实现列表页实例代码  昵图网官网入口 昵图网素材平台官方入口  如何在云主机上快速搭建网站？  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  大连 网站制作,大连天途有线官网？  如何在IIS服务器上快速部署高效网站？  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  C#如何调用原生C++ COM对象详解  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  活动邀请函制作网站有哪些,活动邀请函文案？