原生JS实现ajax函数封装

对于ajax进行封装

在jQuery中，使用ajax异步对象时只需要调用ajax函数即可使用，并且使用对象接收所有的参数，可以让使用者无需在意传递参数的顺序。

// obj接收所有参数
            function ajax(obj){
                const xhr=new XMLHttpRequest();
                // 判断请求类型，当请求类型为get时拼接url
                if(obj.type=='get'){
                    obj.url+='?'+obj.data;
                    // 修改data值为null，让send时不需要判断传递类型
                    obj.data=null;
                }
                xhr.open(obj.type,obj.url);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4&&xhr.status==200){
                        // 设置回调函数，传递请求报文给回调函数
                        obj.success(xhr.responseText)
                    }
                }
                xhr.send(obj.data);
            }

使用时只需要调用函数并且传递参数即可，因为使用对象接收参数，所以参数的顺序可以任意。

btn.addEventListener('click',function(){
                ajax({
                    type:'get',
                    url:'test.php',
                    data:'name=ming&age=18',
                    success:function(data){
                        // 对请求报文做出JS操作
                        console.log(data);
                    }
                })
            })