zoukankan      html  css  js  c++  java
  • jquery ajax属性async(同步异步)

    在jquery的ajax中如果我们希望实现同步或者异步时我们可以直接设置async属性为false和true

    同步执行

    当把async设为false时,这时ajax的请求时同步的
    也就是说,这个时候ajax块发出请求后,他会等待在load()这个地方,不会去执行after() 直到load()部分执行完毕

    前台

    <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
    <script>
        function load(msg) {
            console.log(msg);
        }
        function after(){
            console.log('after');
        }
        $.ajax({
            url: '/ajax',
            method: 'GET',
            async: false
        }).success(function(result){
            load(result);
        });
        after();
    </script>
    

    后台

    var http = require('http');
    var fs = require('fs');
    http.createServer(function(req,res){
        if(req.url == '/sync'){
            fs.createReadStream('sync.html').pipe(res);
        }else if(req.url == '/ajax'){
            setTimeout(function(){
                res.end('ok');
            },5000);
        }else{
            res.end('Not Found');
        }
    }).listen(8080);
    

    异步执行

    在这里,async默认的设置值为true,这种情况为异步方式
    就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success 也就是说这时候执行的是两个线程,ajax块发出请求后一个线程和ajax块后面的脚本(另一个线程)

    前台

    <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
    <script>
        function load(msg) {
            console.log(msg);
        }
        function after(){
            console.log('after');
        }
        $.ajax({
            url: '/ajax',
            method: 'GET',
            async: true
        }).success(function(result){
            load(result);
        });
        after();
    </script>
    

    后台

    var http = require('http');
    var fs = require('fs');
    http.createServer(function(req,res){
        if(req.url == '/sync'){
            fs.createReadStream('sync.html').pipe(res);
        }else if(req.url == '/async'){
            fs.createReadStream('async.html').pipe(res);
        } else if(req.url == '/ajax'){
            setTimeout(function(){
                res.end('ok');
            },5000);
        }else{
            res.end('Not Found');
        }
    }).listen(8080);
    
  • 相关阅读:
    如何让WPF程序用上MVVM模式
    wpf开源界面收集
    WPF界面框架的设计
    WPF数据验证
    WPF实用知识点
    wpf的MVVM框架
    数据库中树形结构的表的设计
    ASP.NET MVC 分部视图
    好用的 Visual Studio插件
    ASP.NET MVC3中Controller与View之间的数据传递总结
  • 原文地址:https://www.cnblogs.com/heson/p/10015844.html
Copyright © 2011-2022 走看看