美文网首页
用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封装与调用

    AJAX封装 ajax调用 //直接返回调用的对象//请求方式type用get/post//get方式直接拼接ke...

  • ajax 实现原理

    平时我们在做项目时通常利用jQuery封装好的ajax函数:$.ajax(),$.get(),$.post(),用...

  • javascript Ajax 基本使用和封装

    GET 请求 POST 请求 封装 Ajax

  • 用Ajax封装get和post

    参考:https://www.jianshu.com/p/a7eea5768dad 封装get 封装post fu...

  • 前端ajax实现和跨域实现

    下面是用chrome实现ajax请求,并对ajax中get和post请求进行封装,最后对跨域请求的前端处理本文用的...

  • ajax: 封装

    一、封装ajax 二、main.js 引入封装好的 ajax 三、GET请求 引用封装好的 ajax 四、POST...

  • AJAX重新认识

    首先是get和post的区别: 封装AJAX工具 注意事项:

  • ajax(1)

    1.ajax 请求步骤 2.post 和 get的区别,什么时候用post,什么时候用get 3、 Ajax的最大...

  • ajax方法的封装

    用JavaScript封装了一个ajax的get,post两种方法的请求 优化

  • 封装ajax

    /* 封装ajax函数 @param {string}opt.type http连接的方式,包括POST和GET两...

网友评论

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

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