详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)


Posted in Javascript onFebruary 10, 2017

test.html

<a href="javascript:void(0)" rel="external nofollow" onmouseover="testAsync()">
asy.js

function testAsync(){
  var temp;
  $.ajax({
    async: false,  //同步请求
    type : "GET",
    url : 'tet.php',
    complete: function(msg){
      alert('complete');
    },
    success : function(data) {
      alert('success');
      temp=data;
    }
  });
  alert(temp);
}

 

tet.php

<?php
  echo "here is html code";
  sleep(5);
?>

说明

async: false,(默认是true);

如上:false为同步,这个 testAsync()方法中的Ajax请求将整个浏览器锁死,只有tet.php执行结束后,才可以执行其它操作。

当async: true 时,ajax请求是异步的。

但是其中有个问题:testAsync()中的ajax请求和其后面的操作是异步执行的,那么当tet.php还未执行完,就可能已经执行了 ajax请求后面的操作,如: alert(temp+'   end'); 然而,temp这个数据是在ajax请求success后才赋值的,结果,输出时会为空。

----------------------------------------------------

由于ajax默认为异步调用,所以很少能直接拿到ajax的返回值。但有时候由于业务需要还必须要通过ajax来拿,那么我这里提供两种方案。

具体方法:

1、就像通过设置async:false让其异步变同步;

2、可以将接下来需要使用到的参数在success之内执行。

这两种方案,你根据你项目的具体实际选择一个。

使用第一种相对来讲,假如你对性能要求不是太大可以选择。

以上这篇详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
vue文件运行的方法教学
Feb 12 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
vue使用watch监听属性变化
Apr 30 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 #Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 #Javascript
Bootstrap轮播图学习使用
Feb 10 #Javascript
微信小程序模板之分页滑动栏
Feb 10 #Javascript
三种方式实现瀑布流布局
Feb 10 #Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 #Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 #Javascript
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
js性能优化技巧
2015/11/29 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
js实现内置计时器
2019/12/16 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python学生管理系统
2019/01/30 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Django--权限Permissions的例子
2019/08/28 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
基于python实现学生信息管理系统
2019/11/22 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
解除施工合同协议书
2014/10/17 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书