美文网首页
ajax的简单封装

ajax的简单封装

作者: DCbryant | 来源:发表于2017-11-06 15:04 被阅读5次
const ajax = (options) => {
    let url = options.url
    let type = options.type || 'GET'
    let dataType = options.dataType || 'json'
    const onsuccess = options.onsuccess || function(){}
    const onerror = options.onerror || function(){}
    const data = options.data || {}

    const dataStr = []
    for(let key in  data){
        dataStr.push(key + '=' + data[key])
    }
    dataStr = dataStr.join('&')

    if(type === 'GET'){
        url += '?' + dataStr
    }

    const xhr = new XMLHttpRequest()
    xhr.open(type,url,true)
    xhr.onload = () => {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
            if(dataType === 'json'){
                onsuccess( JSON.parse(xhr.responseText))
            }else{
                onsuccess( xhr.responseText)
            }
        }else{
            onerror()
        }
    }

    xhr.onerror = onerror

    if(type === 'POST'){
        xhr.send(dataStr)
    }else{
        xhr.send()
    }
}

// 使用
ajax({
    url: 'https://cn.bing.com/',
    data: {
        city: '武汉'
    },
    onsuccess: function(result){
        console.log(result)
    },
    onerror: function(){
        console.log('服务器异常')
    }
})

相关文章

  • ajax

    原生ajax配置详解 对ajax简单封装 调用

  • 封装ajax

    简单的封装ajax 调用

  • Ajax总结

    今天封装了一个简单的ajax。所以顺便总结一下。 #######ajax概念 ajax:Asynchronous ...

  • ajax简单封装

    工作之余简单封装了ajax的请求,但是工作中还是用jquery,axios,angular内部封装好了http模块...

  • 简单封装ajax

    1.在eolinker上创建接口 (1)新建工作空间(第一次新建,之后是否新建视情况而定) (2)新建一个项目(第...

  • ajax简单封装

    ajax同源非同源 非同源:跨域 http://www.kaikeba.com:443/news/id/1 同源:...

  • ajax的简单封装

  • 简单ajax的封装

    好久没有这么勤快的写过这么多东西了,嘿嘿,今天做一个简单的ajax封装,还涉及到IE的一些兼容问题,可以帮助...

  • 简单的Ajax封装

  • Ajax上

    一、封装ajax 二、调用封装好的ajax

网友评论

      本文标题:ajax的简单封装

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