1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>封装属于自己的AJAX类库</title>
  6. </head>
  7. <body>
  8. <script>
  9.     //自执行函数
  10.     ~function(){
  11.         class ajaxClass{
  12.             //=>AJAX四步操作：send ajax
  13.             init(){
  14.                 //这里的this就是实例example
  15.                 let xhr = new XMLHttpRequest();
  16.                 xhr.onreadystatechange = ()=>{
  17.                     if(xhr.readyState===4&&/^(2|3)\d{2}$/.test(xhr.status)){
  18.                         let result = xhr.responseText;
  19.                         //dataType的处理
  20.                         try {
  21.                             switch (this.dataType.toUpperCase()){
  22.                                 case 'TEXT':
  23.                                 case 'HTML':
  24.                                     break;
  25.                                 case 'JSON':
  26.                                     result = JSON.parse(result);
  27.                                     break;
  28.                                 case 'XML':
  29.                                     result = xhr.responseXML;
  30.                             }
  31.                         }catch (e){
  32.                             console.log(e.message);
  33.                         }
  34.                         this.success(result);
  35.                     }
  36.                 }
  37.                 //=>data的处理
  38.                 if(this.data !==null){
  39.                     this.formatData();
  40.                     if(this.isGET){
  41.                         //如果是get请求
  42.                         this.url += this.querySymbol()+this.data;
  43.                         this.data = null;
  44.                     }
  45.                 }
  46.                 //=>cache的处理
  47.                 this.isGET?this.cacheFn():null;
  48.                 xhr.open(this.method,this.url,this.async);
  49.                 xhr.send(this.data);
  50.             }
  51.             //把传递的对象格式data转换为字符串格式类型
  52.             formatData(){
  53.                 //this指向当前实例example
  54.                 //检测this.data是否是一个对象
  55.                 if({}.toString.call(this.data)==='[object Object]'){
  56.                     let obj = this.data,
  57.                             str = ``;
  58.                     for(let key in obj){
  59.                         str += `${key}=${obj[key]}&`;
  60.                     }
  61.                     str = str.replace(/&$/,'');//把末尾的&进行替换
  62.                     this.data = str;
  63.                 }
  64.             }
  65.             cacheFn(){
  66.                 //this指向当前实例example
  67.                 !this.cache ?this.url +=`${this.querySymbol}_=${Math.random()}`:null;
  68.             }
  69.             //符号查询
  70.             querySymbol(){
  71.                 //this孩纸指向当前实例example
  72.                 return this.url.indexOf('?')>-1?'&':'?';
  73.             }
  74.         }
  75.         //=>参数初始化 init parameters
  76.         window.ajax = function ({
  77.                 url=null,
  78.                 method='GET',
  79.                 type=null,
  80.                 data=null,
  81.                 dataType='JSON',
  82.                 cache=true,
  83.                 async=true,
  84.                 success=null
  85.                 }={}) {
  86.             let example = new ajaxClass();//example就是ajaxClass的实例
  87.             /*['url','method','data','dataType','cache','async','success'].forEach((item)=>{
  88.                 if(item==='method'){
  89.                 _this.method = type===null?method:type;
  90.                 return;
  91.             }if(item === 'success'){
  92.                 _this.success = typeof success === 'function'?success:new Function();
  93.                 return;
  94.             }
  95.                 _this[item] = eval(item);
  96.             })*/
  97.             example.url = url;
  98.             example.method = type===null?method:type;
  99.             example.data = data;
  100.             example.dataType = dataType;
  101.             example.async = async;
  102.             example.success = typeof success === 'function'?success:new Function();
  103.             example.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);
  104.             example.init();//执行init方法
  105.             return example;
  106.         };
  107.     }();
  109.     ajax({
  110.         url:'product.json',
  111.         method:'post',
  112.         cache:false,
  113.         data:{
  114.             name:'zhangsan',
  115.             age:18
  116.         },
  117.         dataType:'text',
  118.         success: result=>{
  119.                 console.log(result);
  120.             }
  121.     })
  122. </script>
  124. </body>
  125. </html>

手动封装一个属于自己的AJAX类库的更多相关文章

  1. 封装一个类似jquery的ajax方法

    //封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...

  2. 手动封装一个node命令集工具

    了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一.NPM模块安装内幕与nodejs控制台运行环境 1. ...

  3. 手动模拟一个类似jquery的ajax请求

    var $ = { parms:function(obj){ var str = ''; for(var k in obj){ str +=k+'='+obj[k]+'&'; } str = ...

  4. 封装一个简易版的ajax操作对象

    /** * 发送ajax请求 * @type {Object} * 使用方法如下: * $ajax.request( * method: "post", //请求方式 * url: ...

  5. 【react】---手动封装一个简易版的redux

    export let createStore = (reducer)=>{ //定义默认的state let state; //定义默认的action let actionTypes = &qu ...

  6. 【react】---手动封装一个简易版的redux---【巷子】

    export let createStore = (reducer)=>{ //定义默认的state let state = {}; //定义默认的action let actionTypes ...

  7. 使用promise手动封装ajax函数

    最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...

  8. 手动封装AJAX

    正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 封装一个Ajax工具函数

    /*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url     ...

随机推荐

  1. Linux 系统网络问题处理集[包含VM处理]

    1.1. 新操作系统ping不同主机: 检查Linux服务器网段是否有etho的IP 查看/关闭防火墙 查看:service iptables status 关闭:service iptables s ...

  2. Java常见错误列表

    Java常见错误列表: 找不到符号(symbol) 类X是public的,应该被声明在名为X.java的文件中 缺失类.接口或枚举类型 缺失X 缺失标识符 非法的表达式开头 类型不兼容 非法的方法声明 ...

  3. 彻底解密 Spark 的 HashShuffle

    本课主题 Shuffle 是分布式系统的天敌 Spark HashShuffle介绍 Spark Consolidated HashShuffle介绍 Shuffle 是如何成为 Spark 性能杀手 ...

  4. Linux性能监控（程序篇）

    性能数据的监控,除了针对整机进行外,还要求我们对某一运行的程序单独进行.常用的程序监控命令有ps和top. Ps ps命令最常用的还是用于监控后台进程的工作情况,因为后台进程是不和屏幕键盘这些标准输入 ...

  5. 秒杀场景下MySQL的低效（转）

    秒杀场景下MySQL的低效 2016-01-14 17:12 178人阅读 评论(0) 收藏 举报 最近业务试水电商,接了一个秒杀的活.之前经常看到淘宝的同行们讨论秒杀,讨论电商,这次终于轮到我们自己 ...

  6. Linux系统之路——如何在服务器用U盘安装CentOS7.2（一）

    终于将CentOS7装上服务器(thinkserver250,不得不说联想的太烂了)了,过程无比艰辛,因为我发现网上大家提到的所有U盘安装CentOS7时碰到的问题几乎都被我碰到了,像什么: 1.刻录 ...

  7. django创建项目问题解决办法

    问题描述: Python编程:从入门到实践第十八章18.1.6 ❶(ll_env)learning_log$ django-admin.py startproject learning_log .❷ ...

  8. AngularJS 自定义指令directive 介绍

    --------------------------------------------------------------------------- 指令的作用是把我们自定义的语义化标签替换成浏览器 ...

  9. BZOJ1861:[ZJOI2006]书架(Splay)

    Description 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿下 ...

  10. servlet的生命周期详解

    一.servlet生命周期原理解析 1.Servlet生命周期分为三个阶段: (1)初始化阶段  调用init()方法 (2)响应客户请求阶段 调用service()方法 (3)终止阶段 调用dest ...