原生ajax的封装

青旅半醒 2022-01-23 06:04 278阅读 0赞

原生ajax的封装

get请求 post请求 有参无参都可以实现

返回数据类型，需要自己处理，返回字符串格式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
            <input type="text" id='name'>
            <input type="text" id='psd'>
             <button id='btn'>登录</button>
             
             <script>
    
                  var btn=document.getElementById('btn');
          
                btn.onclick=function(){
                    var name=document.getElementById('name').value;
                    var psd=document.getElementById('psd').value;
                    // console.log(name,psd);
                    //执行ajax 我们希望像 jquery一样
                    myajax({
                        type:'post',
                        url:'01get.php',
                        data:{
                            name:name,
                            psd:psd
                        },
                        success:function(res){
                            console.log(res);
                        },
                        error:function(err){
                            console.log(err);
                        }
    
                    })           
                }
                //函数 myajax( json数据) 参数类型固定:{type:'',url:'',data:'',success:}
                 function myajax(jsonData){//形参
                    var xhr=new XMLHttpRequest();
                    //准备发送 xhr.open('get/post',url,true);
                    //js和jquery 的区别：js里面get请求方式 和post 不同 同时参数需要拼接url 
                    //get 数据拼接到url上面 post直接发送
                    //data是否存在发送数据  如果存在传参---data里面有数据
                    console.log(jsonData.data);
                    var newStr='';
                    // var str='';//存放字符串
                    if(jsonData.data){
                        console.log(jsonData.data);//{name:'',psd:''} 对象的格式修改下 最终：name=qq&psd=123
                        var data=jsonData.data;
                        var arr=[];
                       for(var i in data){
                            console.log(i)
                            console.log(data[i]);
                            var str=i+'='+data[i];
                            arr.push(str);
                       }
                       console.log(arr);//[name=qq,psd=123]
                       newStr=arr.join('&');//处理好的数据  请求的
                       console.log(newStr); //name=ee&psd=11
                       //请求的地址
                 }
                    if(jsonData.type.toLowerCase()=='get'){
                            xhr.open('get',jsonData.url+'?'+newStr);          
                            xhr.send();                  
                    }else if(jsonData.type.toLowerCase()=='post'){
    
                            xhr.open('post',jsonData.url);   
                            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");   
                            xhr.send(newStr);  
                    }
                xhr.onreadystatechange=function(){
                   
                   if(xhr.readyState==4){
                       if(xhr.status==200){
                                //成功 获取数据
                            //console.log(xhr.responseText);//字符串 文本内容  
                            jsonData.success(xhr.responseText);
                       }else{
                            jsonData.error(xhr.status);
                       }
                       
                                    
                   }
               }
                }
                        
             </script>
    </body>
    </html>