封装ajax函数

最新推荐文章于 2024-05-28 17:24:55 发布

原创最新推荐文章于 2024-05-28 17:24:55 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个封装的AJAX函数，用于简化HTTP请求处理。该函数支持GET和POST方法，能够处理请求参数，设置请求头，并定义了成功和错误回调函数。文章详细展示了函数的实现过程及如何使用。

封装函数

/* 
             method
             url
             data
             success 当数据下载成功执行的函数
             error  当数据下载失败执行的函数
            */
            function $ajax({method = "get",url,data,success,error}){
                //1、创建ajax对象
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = ActiveXObject("Microsoft.XMLHTTP");
                }

                //判断如果数据存在
                if(data){
                    data = querystring(data);
                }

                if(method == "get" && data){
                    url += "?" + data;
                }
                xhr.open(method,url,true);
                if(method == "get"){
                    xhr.send();
                }else{
                    //必须在send方法之前，去设置请求的格式
                    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                    xhr.send(data);
                }
                //等待数据
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        //判断本次下载的状态码都是多少
                        if(xhr.status == 200){
                            /*
                               如何去处理数据操作不确定
                               回调函数，
                            */
                            if(success){
                                alert(2);
                                success(xhr.responseText);
                            }
                            
                        }else{
                            if(error){
                                error("Error:" + xhr.status);
                            }
                        }
                        

                    }
                }
            }

            //拼接字符串
            function querystring(obj){
                var str= "";
                for(var attr in obj){
                    str += attr + "=" + obj[attr] + "&";
                }
                return str.substring(0,str.length-1);
            }

调用

var oGetBtn = document.getElementById("getBtn");
            var oPostBtn = document.getElementById("postBtn");

            //1、get请求
            oGetBtn.onclick = function(){
                alert(1);
                $ajax({
                    url:"1.txt",
                    data:{
                        username:"xxx",
                        age:19,
                        password:"123abc"
                    },
                    success:function(result){
                        alert(3);
                        alert("GET请求下载到的数据：" + result);
                    },
                    error:function(msg){
                        alert(msg);
                    }
                })
            }


            //1、post请求
            oPostBtn.onclick = function(){
                $ajax({
                    method:"post",
                    url:"1.post.php",
                    data:{
                        username:"xxx",
                        age:19,
                        password:"123abc"
                    },
                    success:function(result){
                        
                        alert("POST请求下载到的数据：" + result);
                    },
                    error:function(msg){
                        alert(msg);
                    }
                })
            }