美文网首页
用Ajax封装get和post

用Ajax封装get和post

作者: IvyAutumn | 来源:发表于2019-02-28 21:52 被阅读0次

    参考:https://www.jianshu.com/p/a7eea5768dad

    封装get

    function get(url,options,callback){
        var xhr = new XMLHttpRequest();
           xhr.onreadystatechange = function(callback) {
            if (xhr.readyState == 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    callback(xhr.responseText);
                } else {
                    alert('Request was unsuccessful:' + xhr.status);
                }
            }
        }
        function serialize(options) {
            if(!options){
                return '';
            }
    
            var pairs = [];
            for(var name in options){
                if(!options.hasOwnProperty(name)){
                    continue;
                }
                if(typeof options[name] === 'function'){
                    continue;
                }
                var value = options[name].toString();
                name = encodeURIComponent(name);
                value = encodeURIComponent(value);
                pairs.push(name+'='+value);
            }
            return pairs.join('&');
        }
    
    xhr.open('get', url+'?'+serialize(options),true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(null);
     }
    get('/information', {     //数据验证
        name: 'netease',
        age: 18
    },
    function(data) {
        console.log(data);
    });
    

    封装post

    function post(url, options, callback) {
    if(XMLHttpRequest){
    var xhr=new XMLHttpRequest();
    }else{
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");//兼容ie
    }

    xhr.onreadystatechange = function(callback) {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                callback(xhr.responseText);
            } else {
                alert('Request was unsuccessful:' + xhr.status);
            }
        }
    }
    
    function serialize(options) {
        if (!options) {
            return '';
        }
        var pairs = [];
        for (var name in options) {
            if (!options.hasOwnProperty(name)) {
                continue;
            }
            if (typeof options[name] === 'function') {
                continue;
            }
            var value = options[name].toString();
            name = encodeURIComponent(name);
            value = encodeURIComponent(value);
            pairs.push(name + '=' + value);
        }
        return pairs.join('&');
    }
    

    xhr.open('post', url,true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(serialize(options));
    }
    post('/post', { //测试数据
    name: 'netease-post',
    age: 20
    },
    function(data) {
    console.log('我是post请求');
    });

    相关文章

      网友评论

          本文标题:用Ajax封装get和post

          本文链接:https://www.haomeiwen.com/subject/hvhluqtx.html