封装原生ajax

最新推荐文章于 2022-01-14 17:02:41 发布

原创最新推荐文章于 2022-01-14 17:02:41 发布 · 167 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

javascript 专栏收录该内容

27 篇文章

订阅专栏

博客主要介绍原生ajax的封装，可实现get和post请求，无论有参无参均可。其返回的数据类型需自行处理，返回格式为字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生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>
         <!-- 
             $.ajax({
                    type:'get',
                    url:'06get.php',
                    data:{
                        name:name,
                        psd:psd
                    },
                    success:function(res){
                        console.log(res);
                    }
             })
          -->
         <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:'06get.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>