百姓彩票-People's Lottery-baixingcaipiao

百姓彩票|ajax同步、异步执行简单理解与证明

发布时间 : 2021-02-23 12:11:02 浏览: 91次 来源:网络整理 作者:佚名

此理解范例代码来自前几篇随笔!

首先我们来先了解下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:

ajax异步与同步

ajax异步与同步

public class Model
    {
        public string rtoNumber { set; get; }
        public string approver { set; get; }
        public string modifier { set; get; }
        public string comment { set; get; }
    }

View Code

View:

ajax异步与同步

ajax异步与同步

<div id="container">
        <table id="table">
            <tr>
                <td><label>RTONumberlabel><input name="rtoNumber" />td>
                <td><label>Approverlabel><input name="approver" />td>
                <td><label>Modifierlabel><input name="modifier" />td>
                <td><label>Commentlabel><textarea name="comment" cols="30" rows="4">textarea>td>
            tr>
        table>
        <input id="submit" type="button" value="submit"/>
div>

View Code

ajax异步与同步

ajax异步与同步

View Code

Controller:

ajax异步与同步

ajax异步与同步

public class TransportModelDataController : Controller
    {
        //
        // GET: /TransportModelData/
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult getModelInfo(List model)
        {
            string rtoNumber = model[0].rtoNumber;
            string modifier = model[0].modifier;
            string comment = model[0].comment;
            string approver = model[0].approver;
            return Content("");
        }
    }

View Code

执行结果截图:这里我们可以看见只执行了“$.ajax();”中的alert,并没有执行他前面的alert

ajax异步与同步

异步证明(async:true):

Model:

ajax异步与同步

ajax异步与同步

public class Model
    {
        public string rtoNumber { set; get; }
        public string approver { set; get; }
        public string modifier { set; get; }
        public string comment { set; get; }
    }

View Code

View:

ajax异步与同步

ajax异步与同步

<div id="container">
        <table id="table">
            <tr>
                <td><label>RTONumberlabel><input name="rtoNumber" />td>
                <td><label>Approverlabel><input name="approver" />td>
                <td><label>Modifierlabel><input name="modifier" />td>
                <td><label>Commentlabel><textarea name="comment" cols="30" rows="4">textarea>td>
            tr>
        table>
        <input id="submit" type="button" value="submit"/>
div>

View Code

ajax异步与同步

ajax异步与同步

View Code

Controller:

ajax异步与同步

ajax异步与同步

public class TransportModelDataController : Controller
    {
        //
        // GET: /TransportModelData/
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult getModelInfo(List model)
        {
            string rtoNumber = model[0].rtoNumber;
            string modifier = model[0].modifier;
            string comment = model[0].comment;
            string approver = model[0].approver;
            return Content("");
        }
    }

View Code

执行结果截图:这里我们可以看见两个alert都执行了ajax异步与同步ajax异步与同步,不过因为“$.ajax();”中的alert受数据加载延后了一会时间,所以他执行的比“$.ajax();”后面的alert稍为晚一点,这就证明了异步

ajax异步与同步

注意:同步和异步中的代码是相同的,唯一不同点就是View中“async”的值不同,分别为“false”、“true”!

说明不好的话望谅解,希望你们可以理解~~

老赵 本文地址/news/240.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
感受专业服务,从来电咨询开始
010-8888888813988888888