zoukankan      html  css  js  c++  java
  • Ajax 同步异步互相转换以及区别

    Ajax同步异步的区别:

    xmlHttp.open(method,url,async);

    async:布尔值,用来说明请求是否为异步模式。是来控制JavaScript如何执行该请求。

    异步请求:当async设置为true时,将以异步模式发送请求,JavaScript代码将继续执行而不再等待响应,且必须使用一个事件处理函数来监控请求的响应。

    同步请求:当async设置为false时,将以异步模式发送请求,JavaScript将等接收到响应后再继续执行剩余代码。这意味着如果响应时间长,用户在浏览器收到响应前是无法与其交互的。

    因此,Ajax开发建议是:使用异步请求来实现数据获取,使用同步请求来实现与服务器之间发送和接收简单的消息。

    用同步模式来发送请求(将open()方法的第三个参数设置为false),可以使你在调用send()方法之后马上对其响应进行处理。

    这对于想让用户交互等待响应,或希望只接受很少的数据(例如,小于1kb)的应用场景是很有用的。

    而对于通常数据量或者较大的数据量而言,最好是使用异步调用

    Ajax例子:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Ajax同步异步转换</title>
            <script type="text/javascript" src="js/jquery.min.js"></script>
        </head>
    
        <body>
    
            <script>
                //在post/get提交方式的简写:
                $.post/get("url",{data},function(response){});
                //默认是异步的!
    
                $.ajax(
                    type: "POST/GET",
                    url: "",
                    data: {},
                    dataType: "json",
                    async: true / false,
                    success: function(date) {
    
                    }
                );
                //success是之前的写法,现在推荐用.dane()
    
                //这是最常见的使用ajax方法了。下面实现ajax的同步请求:
                $.ajax(
                    type: "POST/GET",
                    data: {},
                    async: false,
                ).done(function(date) {
    
                });
                //ajax同步请求最常见的就实现ajax请求的结果数据返回。 
                //比如在用ajax方法成功得到相应后,我们需要把ajax的返回结果return出去给外部的函数使用这时需要同步。
                function ajax() {
                    var backData;
                    $.ajax(
                        type: ”post”,
                        data: {},
                        async: false, //更改为同步 
                    ).done(
                        function(response) {
                            backData = response;
                        });
                    return backData;
                }
                var newData = ajax();
                //此时newData = response;
                //在此过程中注意修改async, 它如果是true( 默认), 
                //那么就是在异步的情况下, 这种情况下实现return是不能实现的, 因为异步就说明了程序的执行顺序和效果发生了改变。 修改为同步, 实现返回值。
                
                //举例ajax异步转同步
                //添加新用户
                function ajaxNew(username){
                    var username;
                    var newVal;//添加以后新用户的信息
                    $.ajaxSetup({ //ajax异步转同步
                        async : false
                    });   
                
                    $.get("./ajaxAdmin.php?use="+username+"&new=1",
                        function(data,status){
                            // alert("内容:"+data+"
    状态: "+status);
                            //存储信息
                            newVal=data;
                        });
                    return newVal;
                    alert(newVal);
                }
    
                
            </script>
        </body>
    
    </html>

      

  • 相关阅读:
    支付宝小程序开发——踩坑实录
    支付宝小程序开发——rich-text富文本组件支持html代码
    SFTP 文件上传下载工具类
    码农修真传
    Spring Data学习中心
    深入理解JDBC设计模式: DriverManager 解析
    Redis(十一):哨兵模式架构设计分析
    Redis(十):pub/sub 发布订阅源码解析
    Redis(九):主从复制的设计与实现解析
    线程池技术之:ThreadPoolExecutor 源码解析
  • 原文地址:https://www.cnblogs.com/alizhi/p/9179122.html
Copyright © 2011-2022 走看看