AJAX同步和异步请求有什么不一样

久伴
久伴
久伴
659
文章
539
评论
2020年7月6日02:30:38 评论 141 1677字阅读5分35秒

服务端php添加了sleep延迟5秒执行

服务端代码demo.php

<?php 
sleep(5);
$name=$_POST;
var_dump($name);

?>

同步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    
</head>
<body>
    <button id=button>发送请求</button>
    <div id="container">
      
    </div>

</body>
<script>
    
//获取按钮
    var button = document.getElementById('button');
    var container = document.getElementById('container'); 
    button.onclick=function(){
            //创建xmlhttpRequest请求
            var xhr = new XMLHttpRequest();
            //准备发送请求方式
            xhr.open('POST','demo.php',false);
            //发送请求
            //编码转换
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send('name=jiub&age=12');
            //接受并处理请求返回的数据
            var response = xhr.responseText;
            
            console.log(response);

            container.innerHTML=response;
            alert('执行完毕');   
    }
    
</script>
</html>

点击发送请求,ajax会等待服务端响应完毕才会弹出alert,这样很影响用户体验,影响js dom

异步请求

点击发送请求,服务端无响应,前端js正常执行,服务端响应成功后反回数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    
</head>
<body>
    <button id=button>发送请求</button>
    <div id="container">
      
    </div>

</body>
<script>
    
//获取按钮
    var button = document.getElementById('button');
    var container = document.getElementById('container'); 
    button.onclick=function(){
            //创建xmlhttpRequest请求
            var xhr = new XMLHttpRequest();
            //异步请求方式
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                        var response = xhr.responseText;
                        container.innerHTML=response;
                }
            }
            //准备发送请求方式
            xhr.open('POST','demo.php',true);
            //发送请求
            //编码转换
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send('name=jiub&age=12');
            //接受并处理请求返回的数据
            // var response = xhr.responseText;
            
            // console.log(response);

            // container.innerHTML=response;
            alert('执行完毕');   
    }
    
</script>
</html>
继续阅读
久伴
破解那些无法复制的网站无限复制内容 JavaScript

破解那些无法复制的网站无限复制内容

例如360图书馆是不能复制的,复制必须登录,有的时候为一个知识点去注册实在繁琐 把下方代码加到浏览器console控制台,然后你去网站复制内容就会发现,不在提示登录复制等等一些限制 $=0 如果是新手...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: