封装原生ajax

博客主要介绍原生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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值