美文网首页
ajax 封装原生请求

ajax 封装原生请求

作者: 237房间 | 来源:发表于2019-04-27 21:36 被阅读0次
    <script>
             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,    //  htpp://www.baidu.com
                        type = options.type.toUpperCase(), // GET
                        data = options.data,    // {name:"kk",age:12}
                        dataArr = [];            // []
                    // 遍历data对象
                    for(let key in data){
                        let value = key + '='+ data[key]
                        dataArr.push(value)
                    }
                    // dataArr = ["name=kk","age=12"]
    
                    // 判断是否为get方式请求
                    if(type === "GET"){
                        url = url + "?" + dataArr.join('&')
                        // url = http://www.baidu.com?name=kk&age=12
                        // 初始化请求
                        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){
                      // console.log(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: "https://easy-mock.com/mock/5cb68c827ccf7c060b2270da/api/newgoods",
                 success:function(res){
                     console.log("这里是ok的")
                     console.log(res)
                 }
             })
         
        </script>
    

    相关文章

      网友评论

          本文标题:ajax 封装原生请求

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