前端页面——AJAX是个什么样的传输机

前篇文章我们介绍了一下级联查询,可是有时候我们需要在页面和后台或页面与页面之间传值,这样我们就需要用到一个非常重要的技术——AJAX,想必大家都听说过吧,今天我们来介绍一下AJAX,看看它是如何扮演一个传输机的角色的(我们使用的还是MVC)。

- 1概念

我们都知道AJAX有两种传输策略,那就是同步和异步,那么什么是同步,什么是异步呢,两者有什么不同呢?

同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕

举个例子:同步就是你叫我去吃饭,我听到了就和你去吃饭;如果没有听到,你就不停的叫,直到我告诉你听到了,才一起去吃饭。异步就是你叫我,然后自己去吃饭,我得到消息后可能立即走,也可能等到下班才去吃饭。

- 2实现方式

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

下面我们来看一段JS代码

 <script type="text/javascript">
       // 当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),直到function1()部分执行完毕。
       // 当把asyn设为true时,这时ajax的请求时异步的,当ajax块发出请求后,他将停留function1(),等待server端的返回,但同时(在这个等待过程中),前台会去执行function2()
       function addclick() {//点击触发addclick事件
               //用jquery获取id为txtuserName的页面标记的value,存放在txtuserName变量里
                var txtuserName = $("#txtuserName").val();
                var txtuserPWD = $("#txtuserPWD").val();

                $.ajax({
                    type: "POST",  //ajax的方式为post(get方式对传送数据长度有限制)
                    url: "/AjaxRequest/AddUser.ashx", //一般处理程序页面AddUser.ashx(在2中会写出该页面内容)
                    dataType: "json",   //数据传回的格式为json
                    data: { "txtuserName ": txtuserName,"txtuserPWD":txtuserPWD },
                    //或者data:  "txtuserName " + txtuserName + "&txtuserPWD" + txtuserPWD,
                    //要传送的数据键值对adduserName为键(方便2中的文件用此名称接受数据)txtuserName为值(要传递的变量,例如用户名)
                   success: function (result) {
                       function1()
                   }
               });
               function2();
            }

       );
           function function1() {
               alert(‘function1‘);
           }
           function function2() {
               alert(‘function2‘);
           }
    })
}
</script>

我们的JS代码写完后,如何在后台接到页面传来的数据呢。

String roundCoude = Request["txtuserName"];
String roundCoude = Request["txtuserPWD"];

- 3总结

今天我们学习了AJAX如何将数据从页面传到后台,以及后台如何接收。我然我们也知道AJAX两种不同的传输方式,也是AJAX的核心,那就是同步和异步,我们在实际应用中一定要根据自己的需求来合理的选择同步还是异步。在以后的学习中,我们还会用到AJAX,本次只介绍了其post传值的方式,其实他还有get方式传值,大家可以上网查查,以后再与大家分享。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-05 07:20:45

前端页面——AJAX是个什么样的传输机的相关文章

使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)

首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wamp打开,并且在Dreamweaver里面新建一个phpStudy站点.这篇文章我们需要两个文件,一个test.html前端的页面,一个tigong.php数据的提供页,下面分别进行介绍. tigong.php我们在Dreamweaver,phpStudy站点下面,新建一个tigong.php页面,里

Ajax 请求时后台跳转 前端页面不更新踩坑记录

踩坑环境:前端:Ajax post请求,json类型数据:后端 C#+MVC,前后端正常通信,但是当后台验证权限不通过时会RedirectToAction跳转到登录页,结果现象是后台正常执行登录页的渲染,渲染完成之后前端ajax进入error,页面不刷新. 经检查页面不跳转是因为后台渲染页面后以字符串形式返回,被ajax接收,有因为前端设置json格式所以进入error,看来需要后台返回状态和url,前端js来进行页面跳转,但总感觉这样不太方便,继续研究一下能否实现后台跳转,有方案再来更新内容.

前端页面有哪三层构成 兼容性

[HTML && CSS]1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式:        加入xml头部声明可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此.          IE6的触发        在XHTML的DOCTYPE前加入XML声明  <?xml version="1.0"

前端之ajax

前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新.这一特点给用户的感受是在不知不觉中完成请

long型长整数字在前端页面显示异常及其解决方法

文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子 在做项目中,发现了一个诡异的事情,后台的long型数字不能正确地在前端页面显示.经过我的反复排查问题,总算是找到了问题原因所在,希望能帮助到大家,让大家少走弯路. 2.解决问题 (1)初试EL表达式取long型数值 后台java代码设置属性 1 BlogDetail currentBlog = pageModel.ge

用github来展示你的前端页面吧

前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先利其器.github是一个很好的代码管理与协同开发平台,在程序界又被称为最大的"同性交友网站".如果你不懂git,没有自己的github账户,那你就丢失了一把能够很好的展示自我,储存知识的利器. 当然知道github的人不在少数,但是大部分人可能仅知道它可以用于管理我们的项目代码,而不知道

在 PHP 中结合 Ajax 技术进行图片上传

前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Ajax 技术. 本例将要实现这样的效果:当用户选择图片,开始上传后,后台上传完成时,随即会显示到当前页面.由于,从开始上传到上传完成,再到图片显示均在一个页面上 完成(从表面上看).所以使用 Ajax 技术是必须的.但如何使用这些操作在一个页面上来完成呢?考虑到这样的情况,当文件开始上传后,便开始打开

利用struts进行前端页面间传值及hibernate异常:a different object with the same identifier value was already associated with the session的总结

2017-3-16 我使用SSH框架在做单表CRUD的更新操作时遇到了一个问题,就是页面间该怎么传值?解决该需求时引发了一系列的bug,趁还记得好好总结一番. 前端页面间传值 情景:在我查出所以记录后,点击修改会链接到新的修改页面. 问题:该新页面没有之前的实体信息,该如何传递要修改的实体信息给该页面,例如id? 思路1:利用struts的action来传值. 1 <form action="deleteSerCate.action" method="post"

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,