ajax封装

最新推荐文章于 2022-03-09 22:27:27 发布

QIingBo

最新推荐文章于 2022-03-09 22:27:27 发布

阅读量246

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/QIingBo/article/details/106022099

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装ajax</title>
</head>
<body>
<script>
    function ajax_fz(method,url,params,Done) {
        var xhr= new XMLHttpRequest();
        //把method转化为大写字母
        method.toUpperCase();
        //如果params typeof===object 转成字符串
        if (typeof params==='object'){
            tempArr=[];
            //遍历数组的每一个键
            for (var key in params){
                var value=params[key];
                //把每个元素的键值用  =  拼接起来
                tempArr.push(key+'='+value);
            }
            //tempArr每个元素之间用  &  拼接起来
            params=tempArr.join('&');
        }
        //当请求方式是GET时
        if (method==='GET'){
            url+='?'+params;
        }
        //设置请求方式，请求地址
        xhr.open(method,url);
        data=null;
        //当请求方式是POST时
        if (method==='POST'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            data=params;
        }
        //设置发送请求体
        xhr.send(data);
        xhr.onreadystatechange=function(){
            if (this.readyState==4){
                Done(this.responseText);
            }
        }
    }
    //回调
    var onDone = function(res){
        console.log('hahahhahah');
        console.log('huohuohuo');
        console.log(res);
        console.log('成功了');
    }

    ajax_fz('GET','/text.php', {id:'1'},onDone);
</script>
</body>
</html>

QIingBo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax封装

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>封装ajax</title></head><body><script> function ajax_fz(method,url,params,Done) { var xhr= new XMLHttpRequest();
复制链接

扫一扫

专栏目录