heson

在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);

分类:

技术点:

相关文章: