封装自定义AJAX请求函数

为什么要封装AJAX函数？

在网页中经常需要利用AJAX向后台请求数据，需要创建XMLHttpRequest对象。在请求个数不多时，可以单独写请求函数。可是如果请求数量多，就会有大量的重复性代码。为了减少冗余，就可以对请求函数进行封装，将一系列的请求操作逻辑封装好，我们只需调用这个函数，传入参数变量即可。

封装AJAX函数

function ajax(type,url,async,param,callback){
    //创建变量
    var xmlhttp=null;
    //判断浏览器版本
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft");
    };
    //type:数据传输方式(get/post)
    //url:访问路径
    //param:携带的数据，以字符串的方式传递，例：username=lisi
    //async:是否异步(true/false)
    if(type == "get"){ //当传输方式为get时，在访问路径后面添加传输的参数
        xmlhttp.open(type,url+"?"+param,async);
    };
    var data=null;
    if(type == "post"){ //当传输方式为Post时，添加http头
        xmlhttp.open(type,url,async);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        data=param; //定义的变量为传输的数据
    }
    xmlhttp.send(data); //get：data为null;post:data为传输的数据
    //判断访问状态
    xmlhttp.onreadystatechange=function(){
        //判断响应是否就绪
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var num=JSON.parse(xmlhttp.responseText);
            if(num){
                callback(num)
            }else{
                alert("没有此书，请重新输入")
            }
        }
    }
}

我们在调用ajax函数时，需要传递对应的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tab{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <script src="json.js"></script>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var main=document.getElementById("main");
            btn.addEventListener("click",function(){
                document.querySelector(".trr").remove();
                var codeValue=document.getElementById("code").value;
                
                var param="bookcode="+codeValue;
                console.log(param)
                ajax("get","json.php",true,param,function(num){
                    if(num.flag == 0){
                        main.innerHTML="";
                    }else{
                        console.log(num)
                        var tr=document.createElement("tr");
                        tr.className="trr";
                        for(var key in num){
                            var td=document.createElement("td");
                            tr.appendChild(td);
                            td.innerHTML=num[key];
                        }
                        tab.appendChild(tr);
                    }
                })
            })
        }
    </script>
</head>
<body>
    <span>请输入图书编号：</span>
    <input type="text" name="bookcode" id="code">
    <input type="button" id="btn" value="提交">
    <div id="main"></div>
    <table id="tab" cellspacing='0'>
        <tr class="trr"></tr>
    </table>
</body>
</html>

封装自定义AJAX请求函数

为什么要封装AJAX函数？

封装AJAX函数

猜你喜欢