ajax 封装原生请求

 function ajax(options){
    // 定义一个操作对象
    var pramas = {
        url:'',
        type: 'get',
        data: {},
        success: function (data) {},
         error: function (err) {},
    }
    // 对象属性覆盖
    options = Object.assign(pramas, options)
    // 传入了要请求的地址才会开始做其他的事情
    if(options.url){
        // 拿到请求对象
        var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
        var url = options.url,   
        type = options.type.toUpperCase(), // toUpperCase将小写变成大写
        data = options.data,    
        dataArr = [];            
        // 遍历data对象
        for(let key in data){
            let value = key + '='+ data[key]
            dataArr.push(value)
    }
     // 判断是否为get方式请求
        if(type === "GET"){
            url = url + "?" + dataArr.join('&')
            // 初始化请求
            xhr.open(type, url, true)
            // 发送请求
            xhr.send()
         }
        // 判断是否为post请求方式
        if(type === "POST"){
             // 初始化一个请求
             xhr.open(type,url, true)
           // 设置请求头
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'                    
                    // 发送请求
                xhr.send(dataArr.join('&'))
         }
         // 监听后台返回过来的数据
        xhr.onreadystatechange = function(ev){
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
              // 如果请求成功之后,回调我们的success函数
                 options.success(xhr.responseText)
          }else {
                // 如果请求失败之后,回调我们的error函数
              options.error(xhr.responseText)
          }
        }
    }
}
 ajax({
    url: "",
    success:function(res){
     console.log(res)
         }
   })

你可能感兴趣的:(ajax 封装原生请求)