ajax的封装

前两天，我们研究了Ajax的基本原理和使用方法，那么今天我们在此基础上简单的封装一个ajax。
一、ajax怎么封装?

封装一个带参数的ajax函数
【思考】封装的ajax中必须要传入的参数有哪些？
1、url——请求的url
2、type——要发送的请求类型，默认为GET
3、dataType——返回数据的格式，默认为json格式
4、async——是否异步发送请求的布尔值
5、data——用户传递的数据
6、将用户传递的数据序列化
7、创建一个ajax对象
8、设置参数
9、监听数据状态并接收响应
10、If...else判断opts.type类型并根据这个类型发送数据

    <script>
        function ajax(opts){
            var url = opts.url                        //请求的url
            var type = opts.type || 'GET'            //要发送的请求类型，如果用户没有设置的话那么默认为"GET"
            var dataType = opts.dataType || 'JSON'  //返回的数据类型，即用户接收的数据类型
            var async = opts.async || 'true'       //是否异步发送请求，默认为异步
            var onsuccess = opts.onsuccess || function(){}   //请求成功后执行的函数
            var onerror = opts.onerror || function(){}      //请求失败后执行的函数
            var data = opts.data || {}                     //用户传入的数据
            //把用户传入的参数序列化，拼装成url的字符串
            var dataStr = []
            for(var key in data){
                data.push(key + '=' + data[key])
            }
            dataStr = dataStr.join('&')
            //如果发送的是get请求，那么将请求的url拼装成（url?key=value）格式
            if(type === 'GET'){
                url += '?' + dataStr
            }
            //创建一个ajax对象
            var xhr = new XMLHttpRequest()
            xhr.open('opts.type','url',async)    //设置参数
            xhr.onload = function(){              //监听数据状态并接收后台响应
                if((xhr.status >= 200 && xhr.status <= 300) || xhr.status = 304){
                    //成功了，可以得到数据了
                    if(dataType === 'JSON'){    //如果用户设置的需要返回的数据类型是JSON格式，那么把xhr对象返回的数据解析成JSON格式的字符串(因为后台给你返回的数据都是string类型)
                        onsuccess(JSON.parse(xhr.responseText))
                    }else{
                        onsuccess(xhr.responseText)
                    }
                }else{
                    //失败了
                    onerror()
                }
            }
            xhr.onerror = onerror    //用户请求失败
            //If...else判断opts.type类型并根据这个类型发送数据
            if(type === 'POST'){
                xhr.send(dataStr)
            }else{
                xhr.send()
            }
        }
    </script>

二、ajax封装好之后的使用方式

ajax({
    url: '',
    type: '',
    dataType: '',
    data: {},
    onsuccess: function(ret){
      console.log(ret)
      render(ret)      //成功后调用render()渲染DOM
    },
    onerror: function(){
      console.log('服务器异常')
      showError()      //失败后调用showError()函数
    }
})
//将数据拼装成DOM显示在页面
function render(json){
    
}
//失败后会执行什么操作
function showError(){
    
}

ajax的封装

推荐阅读更多精彩内容