<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>封装属于自己的AJAX类库</title>

</head>

<body>

<script>

    //自执行函数

    ~function(){

        class ajaxClass{

            //=>AJAX四步操作：send ajax

            init(){

                //这里的this就是实例example

                let xhr = new XMLHttpRequest();

                xhr.onreadystatechange = ()=>{

                    if(xhr.readyState===4&&/^(2|3)\d{2}$/.test(xhr.status)){

                        let result = xhr.responseText;

                        //dataType的处理

                        try {

                            switch (this.dataType.toUpperCase()){

                                case 'TEXT':

                                case 'HTML':

                                    break;

                                case 'JSON':

                                    result = JSON.parse(result);

                                    break;

                                case 'XML':

                                    result = xhr.responseXML;

                            }

                        }catch (e){

                            console.log(e.message);

                        }

                        this.success(result);

                    }

                }

                //=>data的处理

                if(this.data !==null){

                    this.formatData();

                    if(this.isGET){

                        //如果是get请求

                        this.url += this.querySymbol()+this.data;

                        this.data = null;

                    }

                }

                //=>cache的处理

                this.isGET?this.cacheFn():null;

                xhr.open(this.method,this.url,this.async);

                xhr.send(this.data);

            }

            //把传递的对象格式data转换为字符串格式类型

            formatData(){

                //this指向当前实例example

                //检测this.data是否是一个对象

                if({}.toString.call(this.data)==='[object Object]'){

                    let obj = this.data,

                            str = ``;

                    for(let key in obj){

                        str += `${key}=${obj[key]}&`;

                    }

                    str = str.replace(/&$/,'');//把末尾的&进行替换

                    this.data = str;

                }

            }

            cacheFn(){

                //this指向当前实例example

                !this.cache ?this.url +=`${this.querySymbol}_=${Math.random()}`:null;

            }

            //符号查询

            querySymbol(){

                //this孩纸指向当前实例example

                return this.url.indexOf('?')>-1?'&':'?';

            }

        }

        //=>参数初始化 init parameters

        window.ajax = function ({

                url=null,

                method='GET',

                type=null,

                data=null,

                dataType='JSON',

                cache=true,

                async=true,

                success=null

                }={}) {

            let example = new ajaxClass();//example就是ajaxClass的实例

            /*['url','method','data','dataType','cache','async','success'].forEach((item)=>{

                if(item==='method'){

                _this.method = type===null?method:type;

                return;

            }if(item === 'success'){

                _this.success = typeof success === 'function'?success:new Function();

                return;

            }

                _this[item] = eval(item);

            })*/

            example.url = url;

            example.method = type===null?method:type;

            example.data = data;

            example.dataType = dataType;

            example.async = async;

            example.success = typeof success === 'function'?success:new Function();

            example.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);

            example.init();//执行init方法

            return example;

        };

    }();

    ajax({

        url:'product.json',

        method:'post',

        cache:false,

        data:{

            name:'zhangsan',

            age:18

        },

        dataType:'text',

        success: result=>{

                console.log(result);

            }

    })

</script>

</body>

</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. .net core系列之《对AOP思想的理解及使用AspectCore实现自定义日志拦截》

    对于AOP这个名词,相信对于搞过MVC开发的人来说,都很熟悉,里面各种各样的Filter简直是将AOP体现到了极致. 那么什么是AOP呢? AOP(Aspect Oriented Programmin ...

  2. Oracle案例09——ORA-12154: TNS:could not resolve the connect identifier specified

    DG处理的问题还是蛮多的,但这次遇到一个比较奇葩的事情,表面配置.网络都没啥问题,但主备的同步始终有问题,经过多次调整参数.重新部署问题依旧,最终还是求助mos问题得以解决,现将处理过程记录如下: 一 ...

  3. DAO层，Service层，Controller层、View层介绍

    来自:http://jonsion.javaeye.com/blog/592335 DAO层 DAO 层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DA ...

  4. 实现UIView的无限旋转动画（非CALayer动画）

    实现UIView的无限旋转动画(非CALayer动画) 效果: 素材: 源码: // // ViewController.m // Animation // // Created by YouXian ...

  5. C++类知识总结

    c++类 1.初始化const或引用类型数据成员的唯一机会是在构造函数初始化列表中. 2.使用成员初始化列表时成员初始化的次序:第一个成员首先被初始化.然后是第二个,依次类推. 构造函数初始化列表为类 ...

  6. awk 截取某段时间的日志

    好久没有截取nginx/haproxy 中 的日志了,竟有点不熟悉了. 记录一下,以免以后忘记. NGINX 日志格式: 192.168.1.26 - - [14/Sep/2017:16:48:42 ...

  7. ZT 王国维先生“人生三大境界”的具体含义是什么？

    昨夜西风凋碧树.独上高楼,望尽天涯路. 衣带渐宽终不悔,为伊消得人憔悴. 众里寻他千百度,蓦然回首,那人却在,灯火阑珊处. 这三句本来都是言情话相思的佳句,却被王国维用以表现“悬思——苦索——顿悟”的 ...

  8. [原]Ubuntu 下安装apache+PHP

    1.安装apache2 sudo apt-get install apache2 运行如下命令重启:sudo /etc/init.d/apache2 restart 在浏览器里输入http://loc ...

  9. Alpha Scrum7

    Alpha Scrum7 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:项目发布 陈远军.陈彬:播放器各环境的测试 项目的发布说明 本版本的新 ...

  10. MySQL查询时强制区分大写和小写

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zyb_icanplay7/article/details/24981791 平时非常少会考虑数据存储 ...