ajax封装函数

 //封装ajax
        function ajax(type,url,data,fn){
            /*
            参数一：type请求类型
            参数二：URL接口路径
            参数三：可选 传输的数据
            参数四：成功的回调
            */

            let xhr=new XMLHttpRequest();//创建对象
            //告诉ajax你要什么
            if(type.toLowerCase()=='get'){
                //get请求
                if(data){
                    url+='?'+data;//url?data
                }
                xhr.open(type,url,true);
                xhr.send(null);
            } else{
                //post请求
                xhr.open(type,url,true);
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                xhr.send(data);
            }

            //接收数据
            xhr.onreadystatechange=()=>{
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //成功接收是数据
                        if(fn){
                            fn(xhr.responseText);//是实参
                        }
                    }else{
                        alert('错误http状态码是：'+xhr.status)
                    }
                }
            }
        }

         //调用
        (function (){
            let name =document.getElementById('name');
            let inf=document.getElementById('inf');
            
            name.onblur=()=>{
                let username=name.value.trim();
                if(username){
                    //非空 发送ajax请求
                    let url='api/02checkname.php';
                    let data='name='+username+'&time='+new Date();
                    ajax('get',url,data,str=>{ //调用
                        // console.log(str);
                        //在回调函数里面写DOM操作
                        if(str=='yes'){
                            inf.innerHTML='该用户名可以注册，请继续填写哦';
                            inf.style.color='green';
                        }else{
                            inf.innerHTML='该用户名太受欢迎，请换一个哦';
                            inf.style.color='red';
                        }
                        console.log(str);
                        
                    });
                }else{
                    inf.innerHTML='请输入用户名';
                    inf.style.color='red';
                }
            }
        })()

 

   //封装ajax
        /*
        jq:ajax
        $.ajax({
            type:'get',
            url:xxx,
            data:'',
            async:true,
            success:function(str){
                
            }
        })
    */
    function ajax(opt){
        function extend(obj1,obj2){
            for(var key in obj2){
                obj1[key]=obj2[key];
            }
        }
        //默认参数
        var defaults={
            async:true
        }
        //后面使用默认参数
        extend(defaults,opt);
    
        var xhr=new XMLHttpRequest();
        if(defaults.type.toLowerCase()=='get'){
            //get请求
            if(defaults.data){
                defaults.url+='?'+defaults.data;
            }
            xhr.open(defaults.type,defaults.url,defaults.async);
            xhr.send(null);
        }else{
            //post请求
            xhr.open(defaults.type,defaults.url,defaults.async);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send(defaults.data);
        }
        //接收数据返回
        xhr.onreadystatechange=()=>{
            if(xhr.readyState==4){
                if(xhr.status==200){
                    //成功接收是数据
                    if(defaults.success){  //如果有这个数据就返回
                        defaults.success(xhr.responseText);//是实参
                    }
                }else{
                    alert('错误http状态码是：'+xhr.status)
                }
            }
        }
    }
         //调用
        (function (){
            let name =document.getElementById('name');
            let inf=document.getElementById('inf');
            
            name.onblur=()=>{
                let username=name.value.trim();
                if(username){
                    //非空 发送ajax请求
                 ajax2({
                        type:'get',
                        url:'api/02checkname.php',
                        data:'name='+username,
                        success:function(str){
                        // console.log(str);
                        if(str=='yes'){
                            inf.innerHTML='该用户名可以注册，请继续填写哦';
                            inf.style.color='green';
                        }else{
                            inf.innerHTML='该用户名太受欢迎，请换一个哦';
                            inf.style.color='red';
                        }
                        console.log(str);
                      }
                 })
                }else{
                    inf.innerHTML='请输入用户名';
                    inf.style.color='red';
                }
            }
        })()