封装属于自己的Ajax

最新推荐文章于 2025-05-27 06:01:27 发布

在等星星呐

最新推荐文章于 2025-05-27 06:01:27 发布

阅读量514

点赞数

分类专栏：前后端交互文章标签： ajax 前后端交互 XMLHttpRequest

本文链接：https://blog.csdn.net/Primary_Insist/article/details/123235153

版权

前后端交互专栏收录该内容

9 篇文章

订阅专栏

布局结构

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/myAjax.js"></script>
</head>
<body>
    <script>
        var obj={
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/getbooks',
            data:{id:1},
            success:function(res){
                console.log(res);
            }
        }
        var obj2={
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/getbooks',
            data:null,
            success:function(res){
                console.log(res);
            }
        }
        var obj3={
            method:'POST',
            url:'http://www.liulongbin.top:3006/api/addbook',
            data:{
                    bookname:'水浒传',
                    author:'施耐庵',
                    publisher:'上海图书出版社'
                },
            success:function(res){
                console.log(res);
            }
        }
    myAjax(obj);
    myAjax(obj2);
    myAjax(obj3);
    </script>
</body>
</html>

js文件

//转换为查询字符串格式
function strForm(data){
    var arr=[];
    for(let k in data){
        arr.push(k+'='+data[k])
    };
    return arr.join('&');
};
//封装自己的ajax
function myAjax(obj){
    var xhr=new XMLHttpRequest();
    var str=strForm(obj.data);
    if(obj.method.toUpperCase()==='GET'){
        if(obj.data){
            xhr.open(obj.method,obj.url+'?'+str);
        }
        else{
            xhr.open(obj.method,obj.url);
        }
        xhr.send();
    }else if(obj.method.toUpperCase()==='POST'){
        xhr.open(obj.method,obj.url);
        xhr.setRequestHeader('Content-Type','application/x-www-html-urlencoded');
        xhr.send(str);
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
            var result=JSON.parse(xhr.responseText) //需要把JSON字符串格式转换为js对象格式
            obj.success(result);
        }
    }
};