首页 > Web开发 > 详细

演示js异步,同步请求

时间:2020-10-23 15:10:07      阅读:25      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        1.指定请求--open(参数一,url); 参数一是字符串,不区分大小写,
        2.发送--request.send(null); GET请求绝对没有主体,所以应该传递null或省略这个参数,POST请求通常拥有主体
         */

        /*  一个完成的HTTP响应,由 状态码,响应头集合,响应主体组成 */
        // 发出一个http get请求,来获取指定url的内容---异步
        // 当响应成功到达,验证他是否是纯文本
        // 如果是,把他传递给指定回调函数
        function getText(url,callback){
            var request = new XMLHttpRequest(); // 创建新请求
            request.open("GET",url); // 指定待获取的URL
            request.onreadystatechange = function() { // 为了及时得到相应通知,监听onreadystatechange事件
                // readyState代表请求状态4-相应已完成
                if(request.readyState === 4 && request.status === 200){
                    var type = request.getResponseHeader("Content-Type");
                    console.log(type); // application/json
                    callback(request.responseText); // 把相应主体传递给回调函数
                    if(type.match(/^text/)){ // 确保相应是文本---可以不要
                        callback(request.responseText); // 把相应主体传递给回调函数
                    }
                        
                }
            };
            request.send(null); // 立即发送请求
        }
        function fasong(data){
            console.log(‘把相应主体传递给回调函数‘)
            console.log(data); // {"code":0,"msg":"success","data":""}
            
        }
        // getText(‘http://****:5003/renren-admin/接口?userid=23‘,fasong);
        

        // 同步响应--不建议-因为客户端js是单线程的,当send()方法阻塞时,他通常会导致整个浏览器UI冻结,如果连接的服务器响应慢,那么用户的浏览器将冻结。
        // 发起同步HTTP GET请求以获取指定url的内容
        function getTextSync(url){
            var request = new XMLHttpRequest(); // 创建新请求
            request.open("GET",url,false); // 传递false实现同步
            request.send(); // 立即发送请求

            // 如果请求不是200 OK,就报错
            if(request.status!==200) throw new Error(request.statusText);
            // 如果类型报错
            var type = request.getResponseHeader("Content-Type");
            // if(!type.match(/^text/))
            //     throw new Error("Expected textual response;got:"+type);
            return request.responseText;    
        }

        let jieguo = getTextSync(‘http://******:5003/renren-admin/接口?userid=23‘);
        console.log(jieguo);
    </script>
</body>
</html>

  

技术分享图片

技术分享图片

演示js异步,同步请求

原文:https://www.cnblogs.com/fdxjava/p/13863651.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!