关于js前端封装小功能(发送ajax,获取节点)

前端小插件

获取节点

window.getNode=(node)=>{
    if(typeof node !=='string'||node.length<=0)
        throw Error("getNode's options must be String and length not null!");
    let _this=node.trim();
    if(_this.lastIndexOf('#')>=0){
        return document.getElementById(node.slice(node.lastIndexOf('#')+1));
    }
    if(_this.lastIndexOf('.')>=0){
        return document.getElementsByClassName(node.slice(node.lastIndexOf('.')+1));
    }
    return document.querySelector(node);
};

ajax发送数据(不包含发送文件图片)

//请求类型,请求url,发送的数据(对象的形式),回调函数
window.ajaxData=(method,url,data,func)=>{
	//类型检测
	if(!method instanceof String)
        throw new Error('method must be get or post!');
    if(!url instanceof String)
        throw new Error('url must be string !');
    if(!data instanceof Object)
        throw new Error('data must be one object');
    if(!func instanceof Function)
        throw new Error('func must be one function!');
    //创建请求对象,先进行对象探测
	let xml=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
    if(!xml){
        alert('浏览器无法创建XMLHttpRequest和ActiveXObject对象');
    }
    xml.onreadystatechange=()=>{
        if(xml.readyState===4&&xml.status===200){
            func(JSON.parse(xml.responseText));
        }
    };
    //get方法
    if(method.trim()==='get'){
        xml.open(method.trim(),'/'+url+parseData('get',data),true);
        xml.send();
    }
    //post方法
    if(method.trim()==='post'){
        xml.open(method.trim(),'/'+url,true);
        xml.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
        xml.send(parseData('post',data));
    }
    //解析对象的方法,传入请求类型的发送的数据对象
    function parseData(method,obj) {
        let _str='';
        for(let i in obj){
            _str+=i+'='+obj[i]+'&';
        }
        let str=Array.from(_str).slice(0,Array.from(_str).length-1).join('');
        if(str.length===0)
            return '';
        if(method==='get')
            return '?'+Array.from(_str).slice(0,Array.from(_str).length-1).join('');
        return Array.from(_str).slice(0,Array.from(_str).length-1).join('');
    }
};

ajax发送数据(包含文件图片等类型数据)

//默认是post请求,不需要传入请求类型
//请求url  发送的数据  回调函数
//在发送的数据这,如果是上传的图片,直接获取对应DOM的值作为键值对的值就可以
//这个方法发送的是FormData的实例对象!!注意对应后台数据获取
window.ajaxFiles=(url,data,func)=>{
//类型检测
    if(typeof url !=='string')
        throw new Error('url must be string !');
    if(typeof data !=='object')
        throw new Error('data must be one object');
    if(typeof func !=='function')
        throw new Error('func must be one function!');
    let xml=new XMLHttpRequest();
    xml.onreadystatechange=()=>{
        if(xml.readyState===4&&xml.status===200){
            if(xml.responseText.startsWith('<'))
                func(xml.responseText);
      //接受JSON返回值
            func(JSON.parse(xml.responseText));
        }
    };
    xml.open('post','/'+url,true);
    //设置请求头,可以自行修改
    xml.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
    xml.send(parseData(data));
    //解析数据的方法
    function parseData(obj) {
        let form=new FormData();
        for(let i in obj){
            form.append(i,obj[i]);
        }
        return form;
    }
};

欢迎大家指出我的不足并讨论,谢谢^^

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值