ajax同步、异步执行简单理解与证明
此理解范例代码来自前几篇随笔!
首先我们来先了解下AJAX:
Ajax:全称“Asynchronous Javascript and XML”(异步Javascript和XML),他是由Javascript+CSS+DOM+XMLHttpRequest的四种技术的结合,并且JS是Ajax的核心。jQuery将Ajax的实现变得更加轻松容易。Ajax就是我们常说的局部刷新!
重在实际操作练习一下!!!!!
在$.ajax()中我们可以常常看到async,这就是来指定ajax同步异步的,需要记忆一下:
记忆方法:
sync英语中的意思是:“同步”、“同步的”、“同步处理”
前面加个“a”,构成async英文中的意思是:“异步”
再者给他指定true和false那就容易理解了:
- “async:true” 意思是:“异步”
- “async:false” 意思是:“同步”
分析async作用:
当“async:true”时,也就是异步执行ajax,所以不管ajax数据是否已经加载完成,ajax后面的语句都要执行!
当“async:false”时,也就是同步执行ajax,这是指必须等ajax数据加载完成,才可以执行ajax后面的语句!
注意:这里的ajax数据加载是指“$.ajax( 数据传输代码 );”部分!
证明方法及说明:
我们可以利用javascript中的“alert();”来证明,大家都知道,当alert弹出一个警告框的话,不点击确定就不会运行接下来的程序,所以我们可以在“$.ajax();”后面写个alert,再在“$.ajax();”里的success回调函数中写一个alert。设置async的值来看看两个alert的执行情况就可以证明出来同步还是异步了!我们来试试...
下面举例代码说明:
同步证明(async:false):
Model:
public class Model
{
public string rtoNumber { set; get; }
public string approver { set; get; }
public string modifier { set; get; }
public string comment { set; get; }
}
View:
<div id="container">
<table id="table">
<tr>
<td><label>RTONumber</label><input name="rtoNumber" /></td>
<td><label>Approver</label><input name="approver" /></td>
<td><label>Modifier</label><input name="modifier" /></td>
<td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td>
</tr>
</table>
<input id="submit" type="button" value="submit"/>
</div>
<script type="text/javascript">
$(function () {
$('#submit').click(function () {
var model = []; var RTONumber = $("input[name=rtoNumber]").val();
var Approver = $("input[name=approver]").val();
var Modifier = $("input[name=modifier]").val();
var Comment = $("textarea[name=comment]").val(); model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment });
});
$.ajax({
url: '/TransportModelData/getModelInfo',
data: JSON.stringify(model),
type: 'POST',
contentType: 'application/json;charset=utf-8',
async: false,
success: function (data) {
//window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
alert("Postting data is over!");
}
});
alert("loading data is over!")
});
</script>
Controller:
public class TransportModelDataController : Controller
{
//
// GET: /TransportModelData/ public ActionResult Index()
{
return View();
}
public ActionResult getModelInfo(List<Model> model)
{
string rtoNumber = model[].rtoNumber;
string modifier = model[].modifier;
string comment = model[].comment;
string approver = model[].approver; return Content("");
} }
执行结果截图:这里我们可以看到只执行了“$.ajax();”中的alert,并没有执行他后面的alert
异步证明(async:true):
Model:
public class Model
{
public string rtoNumber { set; get; }
public string approver { set; get; }
public string modifier { set; get; }
public string comment { set; get; }
}
View:
<div id="container">
<table id="table">
<tr>
<td><label>RTONumber</label><input name="rtoNumber" /></td>
<td><label>Approver</label><input name="approver" /></td>
<td><label>Modifier</label><input name="modifier" /></td>
<td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td>
</tr>
</table>
<input id="submit" type="button" value="submit"/>
</div>
<script type="text/javascript">
$(function () {
$('#submit').click(function () {
var model = []; var RTONumber = $("input[name=rtoNumber]").val();
var Approver = $("input[name=approver]").val();
var Modifier = $("input[name=modifier]").val();
var Comment = $("textarea[name=comment]").val(); model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment });
});
$.ajax({
url: '/TransportModelData/getModelInfo',
data: JSON.stringify(model),
type: 'POST',
contentType: 'application/json;charset=utf-8',
async: true,
success: function (data) {
//window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
alert("Postting data is over!");
}
});
alert("loading data is over!")
});
</script>
Controller:
public class TransportModelDataController : Controller
{
//
// GET: /TransportModelData/ public ActionResult Index()
{
return View();
}
public ActionResult getModelInfo(List<Model> model)
{
string rtoNumber = model[].rtoNumber;
string modifier = model[].modifier;
string comment = model[].comment;
string approver = model[].approver; return Content("");
} }
执行结果截图:这里我们可以看到两个alert都执行了,不过由于“$.ajax();”中的alert受数据加载延迟了一会时间,所以他执行的比“$.ajax();”后面的alert稍微晚一点,这就证明了异步
注意:同步和异步中的代码是相同的,唯一不同点就是View中“async”的值不同,分别为“false”、“true”!
说明不好的话望谅解,希望大家可以理解~~
更多知识分享:微笑空间站
ajax同步、异步执行简单理解与证明的更多相关文章
- jquery的ajax同步异步执行
大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{ $.ajax({ type:"POST", http:/ ...
- jquery ajax 同步异步的执行
jquery ajax 同步异步的执行 大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{ $.ajax({ type:" ...
- ajax同步异步问题
之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去 ...
- ajax同步异步
test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js f ...
- $.ajax同步/异步(async:false/true)
虽然说ajax用来执行异步请求的比较多,但有时还是存在需要同步执行的情况的. 比如:我需要通过ajax取执行请求以返回一个值,这个值在ajax后面是需要使用到的,这时就不能用异步请求了.这时候就需要使 ...
- AJAX 同步异步笔记
就在刚才,做一个很简单的Demo, 预览MP4视频文件 这就是一个video标签嘛,然后再动态的给src赋值嘛.这还不是so easy? 好,说做就做.先简单的测试一下.先给src赋值一下. 嗯,可以 ...
- 对Javascript异步执行的理解
简单的查看了下Javascript异步编程的代码.按照网上的说法,Javascript异步编程的核心就在于setTimeout.这个系统函数让我们将函数的执行放在了一个指定的新“线程”中.于是本来的顺 ...
- <转>ajax 同步异步问题
原文:https://blog.csdn.net/wxr15732623310/article/details/76387787 看似简单明白的问题说起来却迷迷糊糊,完全没有逻辑,说不到重点上,再来整 ...
- ajax 同步异步调用
随机推荐
- 挂载磁盘linux
1. 用mkfs命令在/dev/sdb上创建ext4文件系统 1.1 mkfs命令 在设备上创建文件系统 mkfs [options] device 参数 device 为要在其上面创建文件系统的设备 ...
- 最短路径dijkstra算法
畅通工程续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- Android & iOS 第三方 Crash ANR 捕捉上传
1. Bugly 地址:http://bugly.qq.com/ 提供:专业的Crash(崩溃).Android ANR(application not response).iOS卡顿监控和解决方案. ...
- Android 摇一摇 之 震动片
声明:import android.os.Vibrator; Vibrator mVibrator; 取得震动服务的句柄: mVibrator = (Vibrator)getApplication() ...
- Codeforces Round #235 (Div. 2)C、Team
#include <iostream> #include <algorithm> using namespace std; int main(){ int n,m; cin & ...
- 洛谷 P1144 最短路计数 Label:水
题目描述 给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条. 输入输出格式 输入格式: 输入第一行包含2个正整数N,M,为图的顶点数与边数. 接下来M行 ...
- [知识点]计算几何I——基础知识与多边形面积
// 此博文为迁移而来,写于2015年4月9日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vxaq.html 1.前言 ...
- jquery validate学习心得
据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...
- NOI模拟赛 Day1
[考完试不想说话系列] 他们都会做呢QAQ 我毛线也不会呢QAQ 悲伤ING 考试问题: 1.感觉不是很清醒,有点困╯﹏╰ 2.为啥总不按照计划来!!! 3.脑洞在哪里 4.把模拟赛当作真正的比赛,紧 ...
- FLEX监视浏览器关闭事件
在最近开发的一个FLEX项目中对于浏览器关闭时,需要做一些清理工作,该清理工作在正常情况下保证能运行就行了,要求不是太高. 因此在网上找了一些方法,经过实际测试确实可行,记录下来备查. 该方法可以完全 ...