2021-1-18原生ajax封装问题

最新推荐文章于 2022-03-11 09:41:36 发布

nnnnnnn3

最新推荐文章于 2022-03-11 09:41:36 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/nnnnnnn3/article/details/112790331

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // var http=new XMLHttpRequest();//实例化请求对象
    //
    //
    // //1.方式:get post
    // //2.url:服务器接口
    // //3.async:同步/异步 true false
    //     //同步:请求执行完成后再执行后续代码(等待请求完成)
    //     //异步:请求和后续代码同时执行(不需要等待)
    //     //
    // //4,5:用户名和密码
    // http=open();//建立服务器连接
    //
    // //监听服务器响应 1,2,3,4,  200(成功) 500(报错) 404(页面丢失)
    // http.onreadystatechange=function () {
    //     //服务器响应
    //     if (http.readyState==4&&http.status==200){
    //         //获取数据
    //
    //         http.response;//返回的是json
    //         http.responseText;//返回的是json
    //
    //         http.responseXML;(自定义的html格式)
    //     }
    // }
    //
    // http.send();//发送请求，取决于get/send

    //原声ajax封装  采用异步编程

    //原生js异步编程 解决方式：匿名函数回调
    function ajax(method,url,data,callback) {
        var http=new XMLHttpRequest();
        //判断请求方式
        if (method=="get"){
            if(data){
                url+="?";
                url+=data;
            }
            http.open(method,url);
            http.send();
        }else/*post*/{
            http.open(method,url);
            if(data){
                http.send(data)
            }else{
                http.send();
            }
        }
        http.onreadystatechange=function () {
            if(http.readyState==4&&http.status==200){
                callback(http.response);
            }

        }
    }
    ajax('get','https://www.baidu.com/',null,function(ags){
        console.log(ags);
    });

    
</script>
</body>
</html>

nnnnnnn3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-1-18原生ajax封装问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> // var http=new XMLHttpRequest();//实例化请求对象 // // // //1.方式:get post
复制链接

扫一扫