各种AJAX方法的使用

上传人:无*** 文档编号:100966005 上传时间:2022-06-04 格式:DOC 页数:49 大小:264KB
返回 下载 相关 举报
各种AJAX方法的使用_第1页
第1页 / 共49页
各种AJAX方法的使用_第2页
第2页 / 共49页
各种AJAX方法的使用_第3页
第3页 / 共49页
点击查看更多>>
资源描述
-各种AJA*方法的使用比较阅读目录 开场 第一代技术:生成客户端代理脚本调用效劳端 新技术的改进方向 第二代技术:jQuery直接调用WebService 第三代技术:更简单的数据格式 第四代技术:直接提交表单 多submit按钮的提交用jQuery.form实现 批量输入控件的提交用jQuery.form实现 提交复杂表单用jQuery.form实现 各种AJA*开发方法的比照与总结 相关AJA*技术经过这么多年的开展,出现了一些框架或类库用于简化开发工作,不同的框架类库的使用方法也各不一样。 现在,再回头看看这些技术,看看这些框架类库,我们能感受到技术在不断地开展,AJA*开发越来越容易了。本文收集了在ASP.NET平台上,一些具体代表性的AJA*开发方法,我将用实际的例如代码来演示如何使用它们, 让您感受AJA*的进化历程,同时也希望将一些优秀的AJA*开发方法介绍给您。为了方便地介绍这些AJA*开发方法,我将它们划分为四代技术。注意:按代划分AJA*技术纯属我个人的观点,只为了更好了区分它们。此外,一些不借助任何框架类库的原始AJA*开发方法,本文将不讨论它们。这类技术展示了第一代的AJA*框架的主要设计思想:在效劳端为客户端生成代理脚本, 然后由这些代理脚本调用效劳端,调用者可以不必知道整个调用过程是如何实现的, 而且在客户端的调用风格也根本与效劳端的代码类似。这类技术的代表作有:ASP.NET AJA*, Aja*Pro 二个效劳端框架。下面我将用ASP.NET AJA*框架来演示如何进展AJA*开发。首先,我们可以创立一个WebService效劳:WebService(Namespace = tempuri.org/)WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)/假设要允许使用 ASP.NET AJA* 从脚本中调用此 Web 效劳,请取消对下行的注释。 System.Web.Script.Services.ScriptServicepublic class WebService1 : System.Web.Services.WebService WebMethod public int Add(int a, int b) return a + b; 这段代码就是一个普通的WebService代码,唯独需要注意的是:在类的定义上加了一个ScriptService修饰特性。接下来,我们还需要在一个ASP*页面中,用ScriptManager为它生成客户端的代理脚本: 说明:InlineScript=true的设置并不是必须的,只是为了让我们看到ScriptManager到底生成了什么代码。从截图可以看到,除了引入了二个必要的AJA*客户端类库外,还在客户端为WebService1生成了代理脚本。有了这些代码后,我们可以用下面的JavaScript代码调用效劳端:function Call_Add() WebService1.Add(1,2, ShowResult);function ShowResult(result) document.getElementById(output).value = result;前面这个例如太简单了,再来个参数复杂的例如吧,还是从先效劳端开场,先定义一个参数类型:public class Customer public string Name get; set; public int Age get; set; public string Address get; set; public string Tel get; set; public string Email get; set; WebSerice的代码:WebMethodpublic string AddCustomer(Customer customer) if( customer = null ) return customer is null.; / 简单地返回一个*ML字符串。 / 告诉客户端:效劳端收到了什么样的数据。 return *mlHelper.*mlSerialize(customer, Encoding.UTF8);仍然借用前面的ScriptManager设置,来看JavaScript的调用代码:function Call_AddCustomer() var customer = Name: document.getElementById(t*tName).value, Age: document.getElementById(t*tAge).value, Address: document.getElementById(t*tAddress).value, Tel: document.getElementById(t*tTel).value, Email: document.getElementById(t*tEmail).value; WebService1.AddCustomer(customer, ShowResult);根本上还是与效劳端的编码方式差不多,先创立一个customer对象,再传给调用方法。在那个年代之前2006年,原始的AJA*实现方式非常复杂,而这种方法让客户端代码风格看起来与效劳端十分类似,这确实是个了不起的设计思路。 然而各种技术一直在改进中,现在,2021年,当我们再来回忆这种方法时,会发现它确实存在一些不完善的地方, 以至于现在使用这种方法的人很少了,这种技术被淘汰了!其实我们可以从另一外角度来思考:如果这种方法真的很优秀,它就不可能被淘汰,正是因为有更优秀的方法出现了,它才会遭到淘汰的命运。前面介绍的那种AJA*方法能让客户端的调用代码与效劳端的代码风格根本一致,看似很完美的方法为什么会被淘汰了呢.我来分析一下这种开发方法的缺陷:1. 前端代码不够独立,必须要在页面中添加引用之后才能调用效劳端,这其实是一种强耦合。2. 出现了更优秀的前端框架能简少获取调用参数的代码量。继续阅读本文,您会发现后面我将要介绍的新方法都朝着解决这些缺陷在努力, 这些缺陷也算是指出了新技术的改进方向。由于前端在调用效劳端时,需要事先生成代理脚本,这种设计会阻碍前端代码的封装性。 您可以想象一下:如果客户端需要一个【获取当前用户信息】的功能,而这个功能必须由效劳端实现的, 此时,我们就只能指望效劳端为客户端生成代理类来调用这个功能了。 但这个功能太有用,许多地方都需要使用,您是不是会想将它提取到一个公用的文件中.遗憾的是:就算您将这段调用代码提取到一个公共的public.js文件中,每个页面在引用public.js后, 并不能调用【获取当前用户信息】功能,因为代理脚本并不一定存在,public.js中的代码还不能运行起来。 怎么办.答:为每个引用public.js的页面,再添加ScriptManager引用那个效劳吧。共用性越高的功能,您会发现这种引用代码的重复度也就越高。简单说来,这种方法将WebService, asp*页面, js代码耦合在一起了。由于耦合,您越用越发现越麻烦。这种生成代理脚本的开发方法虽然能让前端代码与后端代码的风格一致,然而, 前端与后端毕竟不是同一种开发语言,它们要关注的方向也是不一样的。尤其是当更优秀的前端框架出现后,这种后端包办前端的方法不仅让后端与前端耦合在一起,而且还限制了前端技术的开展,最终只能是被抛弃的命运!现在请记住我们为了提交一个Customer信息写了什么样的代码:var customer = Name: document.getElementById(t*tName).value, Age: document.getElementById(t*tAge).value, Address: document.getElementById(t*tAddress).value, Tel: document.getElementById(t*tTel).value, Email: document.getElementById(t*tEmail).value;我在介绍第四代技术时,您会发现它们消失了!随意jQuery前端类库的流行,另一种新的开发方法也开场流行起来了。HTTP调用本来是个很简单很透明的技术,只要指定一个URL,构造一个请求体就可以了, 前端代理脚本的方法将这个过程封装了起来,由于它的封装制造了耦合并限制前端的开展。 新的AJA*技术只能突破这个限制,舍弃这些代理脚本,直接调用后端代码。下面的例如代码还是基于前面的例如,唯独不同的是:不是需要代理类,现在是直接调用效劳端。由于后端的效劳代码没有改变,我也就不再贴出它们了,而且页面也不需要再添加什么引用,我们就直接看前端代码好了:$.aja*( type:POST, url: /WebService1.asm*/Add, contentType:application/json, data:a: 1, b: 2, dataType:json, success:function(result) $(*output).val(result.d); );这段代码也能调用效劳端的Add方法。由于效劳端采用JSON数据格式,所以需要在客户端多指定一些请求头,而这些事情以前是由代理脚本完成的。 虽然现在的代码稍微多一点,但是耦合没有了,更便于提取一些公用代码了。事实上,如果您一直用这种方法调用WebService,则jQuery提供了设置默认参数的功能, 我们可以利用这个特性减少代码量。还是再来看一下前面那个复杂的参数类型的前端调用代码吧:var customer = Name: $(*t*tName).val(), Age: $(*t*tAge).val(), Address: $(*t*tAddress).val(), Tel: $(*t*tTel).val(), Email: $(*t*tEmail).val();var jsonStirng = $.toJSON( customer: customer );$.aja*( type:POST, url: /WebService1.asm*/AddCustomer, contentType:application/json, data: jsonStirng, dataType:json, success:function(result) $(*output).val(result.d); );主要的代码还是一样的,集中在获取调用参数,但是要转成JSON格式。再次一次提醒:不要老是盯着要指定一大堆的jQuery参数,它们可以通过设置默认值的方式解决。我之所以现在不想让它们消失,是因为后面还有更好的方法,先留着它们吧。说明:这种方法不仅可以用于调用WebService,也可以调用WCF (basicHttpBinding),毕竟它们都使用HTTP协议。 不过,WCF还有一堆烦人的配置要设置,但这不是jQuery的问题,这是效劳端框架的缺陷。回到顶部前面我们看到了可以利用jQuery调用WebService,不过JSON的转换过程感觉有些多余,浏览器的提交就没有这个转换步骤嘛。 有时看到一些家伙们着还在JavaScript中拼接JSON字符串,我非常反感,所以这次的例如代码并没有给那种方法抹黑,我采用了一个JSON插件。第三代技术就完美地解决了输入输出必须采用JSON问题,而且解决了POST的限制。由于这次变革改变了数据格式,所以效劳端也发生了改变, 新的框架解决了这些问题,例如:ASP.NET MVC框架,MyMVC框架都支持这个开发方式。来看一下现在效劳端的代码:Actionpublic int Add(int a, int b) return a + b;Actionpublic string AddCustomer(Customer customer) / 简单地返回一个*ML字符串。 / 告诉客户端:效劳端收到了什么样的数据。 return *mlHelper.*mlSerialize(customer, Encoding.UTF8);注意:这种AJA*技术没有与客户端的任何耦合,只要知道一个URL就可以调用了。 来看客户端的代码吧:$.aja*( type:POST, url: /Aja*Demo/Add.csp*, data: a: 1, b: 2, success:function(result) $(*output).val(result); ); / 第二个调用var customer = Name: $(*t*tName).val(), Age:$(*t*tAge).val(), Address: $(*t*tAddress).val(), Tel: $(*t*tTel).val(), Email: $(*t*tEmail).val();$.aja*( type:POST, url: /Aja*Demo/AddCustomer.csp*, data: customer, success:function(result) $(*output).val(result); );注意:type:POST并不是必须的,您也可以把它们改成GET方式提交。如果您此时用Fiddler查看请求容,会发现请求的数据采用的是key=value&key=vlaue的格式,与浏览器的方式一致。 由于没有JSON数据格式的限制,现在的参数项简单了。现在再看上面这段代码,主要代码量在哪里.是不是在获取调用参数那块.继续阅读本文,我要让它消失。我们来看一下例如用的表单: 新增客户资料 Name: Age: Address: Tel: Email: 前面用了三种方法在提交这个表单,下面我们再来看一下更简单的提交方式:$(function() / 只需要下面这个调用就可以将表单改成异步提交方式! $(*form1).aja*Form( success:function(result) $(*output).val(result); ););为了更清楚展示这种方法,我甚至把script标签也贴出来了。如果您用过jQuery就应该能发现,真正的代码就只有aja*Form的那个调用。说明:aja*Form是jQuery.form插件提供的功能。效劳端的代码继续使用前面例如的代码,所以就不贴出了。再比照前面几种AJA*的实现方法,您说哪种方法最简单.您对第四代AJA*技术有兴趣吗.我还为它设计了三种不同场景下的例如,让您感受它的强大与简单,请继续阅读。您认为前面的例如太简单了,是吗.可能有人会说,如果有多个submit按钮,这种方法就不适宜了,我要响应每个按钮,为它们指定不同的URL !真是这样吗. 看下面的例如吧。相关的前端代码如下: Input: Output:       $(function() $(*form1).aja*Form(function(result) $(*output).val(result); ););效劳端代码:public class Aja*TestAutoAction Action public string Base64(string input) return Convert.ToBase64String(Encoding.Default.GetBytes(input); Action public string Md5(string input) byte bb = Encoding.Default.GetBytes(input); byte md5 = (new MD5CryptoServiceProvider().puteHash(bb); return BitConverter.ToString(md5).Replace(-, string.Empty); Action public string Sha1(string input) byte bb = Encoding.Default.GetBytes(input); byte sha1 = (new SHA1CryptoServiceProvider().puteHash(bb); return BitConverter.ToString(sha1).Replace(-, string.Empty); 代码仍然很清晰:1. 效劳端定义三个方法,对应三个submit按钮。2. 前端还是只调用一个aja*Form解决所有问题。这种方法就是由前端的 jQuery, jQuery.form 以及效劳端的MyMVC框架 共同实现的。 想像一下利用其它三种方法需要多少代码吧。回到顶部再来展示另一个现实的例子,批量输入界面的提交。页面表单代码如下:JavaScript代码:$(function() $(*form1).aja*Form( success:function(result) $(*output).val(result); ););效劳端代码如下:这个例如的全部代码就这么多,废话不想多说,您自己去想用其它方法需要多少代码!回到顶部前面的例如都是直接提交表单,没有验证表单的过程,而且都以Te*tbo*控件为主,再来个复杂的表单例如。页面表单代码如下:JavaScript代码:$(function() $(*form1).aja*Form( beforeSubmit: ValidateForm, success:function(result) $(*output).val(result); ); function ValidateForm(formData, jqForm, options) if( jqForm.conte*t.ProductName.value.length = 0 ) alert(商品名称不能为空。); $(jqForm.conte*t.ProductName).focus(); return false; return true; );效劳端代码:Actionpublic string AddProduct(Product product) / 简单地返回一个*ML字符串。 / 告诉客户端:效劳端收到了什么样的数据。 return *mlHelper.*mlSerialize(product, Encoding.UTF8);回到顶部看过了这些例如后,我们再来回忆这些AJA*方法的进化过程:1. 以ASP.NET AJA*为代表的【生成客户端代理脚本调用效劳端】技术, 为了包装原始AJA*的复杂过程,效劳端为客户端生成了代理脚本, 这种封装后的客户端在调用方式上与效劳端根本一致,看起来简化了不少,而且降低了开发门槛, 然而,它的优点也是它是它的最大缺点:效劳端包办了客户端的事情,它完全没有想到客户端技术也在进步! 当更优秀的前端技术出现时,它的结局只能是淘汰。2. 【jQuery直接调用WebService】可以看做是第一代技术的改进,它丢弃了效劳端生成代理脚本的功能, 直接在客户端准备效劳端所需要的数据格式,借助jQuery部对*mlHttpRequest的封装,也能方便地调用效劳端。 这种方法解决了客户端、效劳、页面三方的耦合,但是数据格式却受到序列化方式的限制,使得起来怪怪的。 这种怪怪的感觉其实也是不方便的表现。3. 为了让前端更方便地调用效劳端,效劳端框架只能改变,ASP.NET MVC框架和MyMVC框架都支持更简单的数据格式, 而且不需要那个多余的asm*文件,直接用类库就可以响应客户端请求。 这类技术的最主要特点是:用更简单的数据格式就可以调用效劳端。 由于数据格式简单化,为以后的继续改进留下了时机。4. 由于效劳端不要求序列化的数据格式,且前端技术仍在进步,终于jQuery.form插件可以让我们不需要关注表单数据的收集过程, 它能模拟浏览器的提交行为,正确识别【成功控件】并将它们提交到效劳端,因此代码得到最大限度的缩减,让AJA*开发过程更加容易。前面几个采用jQuery.form的例如也让我们看到:不管表单是什么样的,永远只需要一个调用。而且它将jQuery的调用过程也做了非常好的封装,所以我认为这是最容易使用的AJA*开发方法。回到顶部1. jQuery:jquery./2. jQuery.form:jquery.malsup./form/3. MyMVC:.blogs./fish-li/archive/2021/02/12/2348395.html各种AJA*方法的使用比较阅读目录 开场 第一代技术:生成客户端代理脚本调用效劳端 新技术的改进方向 第二代技术:jQuery直接调用WebService 第三代技术:更简单的数据格式 第四代技术:直接提交表单 多submit按钮的提交用jQuery.form实现 批量输入控件的提交用jQuery.form实现 提交复杂表单用jQuery.form实现 各种AJA*开发方法的比照与总结 相关AJA*技术经过这么多年的开展,出现了一些框架或类库用于简化开发工作,不同的框架类库的使用方法也各不一样。 现在,再回头看看这些技术,看看这些框架类库,我们能感受到技术在不断地开展,AJA*开发越来越容易了。本文收集了在ASP.NET平台上,一些具体代表性的AJA*开发方法,我将用实际的例如代码来演示如何使用它们, 让您感受AJA*的进化历程,同时也希望将一些优秀的AJA*开发方法介绍给您。为了方便地介绍这些AJA*开发方法,我将它们划分为四代技术。注意:按代划分AJA*技术纯属我个人的观点,只为了更好了区分它们。此外,一些不借助任何框架类库的原始AJA*开发方法,本文将不讨论它们。回到顶部这类技术展示了第一代的AJA*框架的主要设计思想:在效劳端为客户端生成代理脚本, 然后由这些代理脚本调用效劳端,调用者可以不必知道整个调用过程是如何实现的, 而且在客户端的调用风格也根本与效劳端的代码类似。这类技术的代表作有:ASP.NET AJA*, Aja*Pro 二个效劳端框架。下面我将用ASP.NET AJA*框架来演示如何进展AJA*开发。首先,我们可以创立一个WebService效劳:WebService(Namespace = tempuri.org/)WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)/假设要允许使用 ASP.NET AJA* 从脚本中调用此 Web 效劳,请取消对下行的注释。 System.Web.Script.Services.ScriptServicepublic class WebService1 : System.Web.Services.WebService WebMethod public int Add(int a, int b) return a + b; 这段代码就是一个普通的WebService代码,唯独需要注意的是:在类的定义上加了一个ScriptService修饰特性。接下来,我们还需要在一个ASP*页面中,用ScriptManager为它生成客户端的代理脚本: 说明:InlineScript=true的设置并不是必须的,只是为了让我们看到ScriptManager到底生成了什么代码。从截图可以看到,除了引入了二个必要的AJA*客户端类库外,还在客户端为WebService1生成了代理脚本。有了这些代码后,我们可以用下面的JavaScript代码调用效劳端:function Call_Add() WebService1.Add(1,2, ShowResult);function ShowResult(result) document.getElementById(output).value = result;前面这个例如太简单了,再来个参数复杂的例如吧,还是从先效劳端开场,先定义一个参数类型:public class Customer public string Name get; set; public int Age get; set; public string Address get; set; public string Tel get; set; public string Email get; set; WebSerice的代码:WebMethodpublic string AddCustomer(Customer customer) if( customer = null ) return customer is null.; / 简单地返回一个*ML字符串。 / 告诉客户端:效劳端收到了什么样的数据。 return *mlHelper.*mlSerialize(customer, Encoding.UTF8);仍然借用前面的ScriptManager设置,来看JavaScript的调用代码:function Call_AddCustomer() var customer = Name: document.getElementById(t*tName).value, Age: document.getElementById(t*tAge).value, Address: document.getElementById(t*tAddress).value, Tel: document.getElementById(t*tTel).value, Email: document.getElementById(t*tEmail).value; WebService1.AddCustomer(customer, ShowResult);根本上还是与效劳端的编码方式差不多,先创立一个customer对象,再传给调用方法。在那个年代之前2006年,原始的AJA*实现方式非常复杂,而这种方法让客户端代码风格看起来与效劳端十分类似,这确实是个了不起的设计思路。 然而各种技术一直在改进中,现在,2021年,当我们再来回忆这种方法时,会发现它确实存在一些不完善的地方, 以至于现在使用这种方法的人很少了,这种技术被淘汰了!其实我们可以从另一外角度来思考:如果这种方法真的很优秀,它就不可能被淘汰,正是因为有更优秀的方法出现了,它才会遭到淘汰的命运。回到顶部前面介绍的那种AJA*方法能让客户端的调用代码与效劳端的代码风格根本一致,看似很完美的方法为什么会被淘汰了呢.我来分析一下这种开发方法的缺陷:1. 前端代码不够独立,必须要在页面中添加引用之后才能调用效劳端,这其实是一种强耦合。2. 出现了更优秀的前端框架能简少获取调用参数的代码量。继续阅读本文,您会发现后面我将要介绍的新方法都朝着解决这些缺陷在努力, 这些缺陷也算是指出了新技术的改进方向。由于前端在调用效劳端时,需要事先生成代理脚本,这种设计会阻碍前端代码的封装性。 您可以想象一下:如果客户端需要一个【获取当前用户信息】的功能,而这个功能必须由效劳端实现的, 此时,我们就只能指望效劳端为客户端生成代理类来调用这个功能了。 但这个功能太有用,许多地方都需要使用,您是不是会想将它提取到一个公用的文件中.遗憾的是:就算您将这段调用代码提取到一个公共的public.js文件中,每个页面在引用public.js后, 并不能调用【获取当前用户信息】功能,因为代理脚本并不一定存在,public.js中的代码还不能运行起来。 怎么办.答:为每个引用public.js的页面,再添加ScriptManager引用那个效劳吧。共用性越高的功能,您会发现这种引用代码的重复度也就越高。简单说来,这种方法将WebService, asp*页面, js代码耦合在一起了。由于耦合,您越用越发现越麻烦。这种生成代理脚本的开发方法虽然能让前端代码与后端代码的风格一致,然而, 前端与后端毕竟不是同一种开发语言,它们要关注的方向也是不一样的。尤其是当更优秀的前端框架出现后,这种后端包办前端的方法不仅让后端与前端耦合在一起,而且还限制了前端技术的开展,最终只能是被抛弃的命运!现在请记住我们为了提交一个Customer信息写了什么样的代码:var customer = Name: document.getElementById(t*tName).value, Age: document.getElementById(t*tAge).value, Address: document.getElementById(t*tAddress).value, Tel: document.getElementById(t*tTel).value, Email: document.getElementById(t*tEmail).value;我在介绍第四代技术时,您会发现它们消失了!回到顶部随意jQuery前端类库的流行,另一种新的开发方法也开场流行起来了。HTTP调用本来是个很简单很透明的技术,只要指定一个URL,构造一个请求体就可以了, 前端代理脚本的方法将这个过程封装了起来,由于它的封装制造了耦合并限制前端的开展。 新的AJA*技术只能突破这个限制,舍弃这些代理脚本,直接调用后端代码。下面的例如代码还是基于前面的例如,唯独不同的是:不是需要代理类,现在是直接调用效劳端。由于后端的效劳代码没有改变,我也就不再贴出它们了,而且页面也不需要再添加什么引用,我们就直接看前端代码好了:$.aja*( type:POST, url: /WebService1.asm*/Add, contentType:application/json, data:a: 1, b: 2, dataType:json, success:function(result) $(*output).val(result.d); );这段代码也能调用效劳端的Add方法。由于效劳端采用JSON数据格式,所以需要在客户端多指定一些请求头,而这些事情以前是由代理脚本完成的。 虽然现在的代码稍微多一点,但是耦合没有了,更便于提取一些公用代码了。事实上,如果您一直用这种方法调用WebService,则jQuery提供了设置默认参数的功能, 我们可以利用这个特性减少代码量。还是再来看一下前面那个复杂的参数类型的前端调用代码吧:var customer = Name: $(*t*tName).val(), Age: $(*t*tAge).val(), Address: $(*t*tAddress).val(), Tel: $(*t*tTel).val(), Email: $(*t*tEmail).val();var jsonStirng = $.toJSON( customer: customer );$.aja*( type:POST, url: /WebService1.asm*/AddCustomer, contentType:application/json, data: jsonStirng, dataType:json, success:function(result) $(*output).val(result.d); );主要的代码还是一样的,集中在获取调用参数,但是要转成JSON格式。再次一次提醒:不要老是盯着要指定一大堆的jQuery参数,它们可以通过设置默认值的方式解决。我之所以现在不想让它们消失,是因为后面还有更好的方法,先留着它们吧。说明:这种方法不仅可以用于调用WebService,也可以调用WCF (basicHttpBinding),毕竟它们都使用HTTP协议。 不过,WCF还有一堆烦人的配置要设置,但这不是jQuery的问题,这是效劳端框架的缺陷。回到顶部前面我们看到了可以利用jQuery调用WebService,不过JSON的转换过程感觉有些多余,浏览器的提交就没有这个转换步骤嘛。 有时看到一些家伙们着还在JavaScript中拼接JSON字符串,我非常反感,所以这次的例如代码并没有给那种方法抹黑,我采用了一个JSON插件。第三代技术就完美地解决了输入输出必须采用JSON问题,而且解决了POST的限制。由于这次变革改变了数据格式,所以效劳端也发生了改变, 新的框架解决了这些问题,例如:ASP.NET MVC框架,MyMVC框架都支持这个开发方式。来看一下现在效劳端的代码:Actionpublic int Add(int a, int b) return a + b;Actionpublic string AddCustomer(Customer customer) / 简单地返回一个*ML字符串。 / 告诉客户端:效劳端收到了什么样的数据。 return *mlHelper.*mlSerialize(customer, Encoding.UTF8);注意:这种AJA*技术没有与客户端的任何耦合,只要知道一个URL就可以调用了。 来看客户端的代码吧:$.aja*( type:POST, url: /Aja*Demo/Add.csp*, data: a: 1, b: 2, success:function(result) $(*output).val(result); ); / 第二个调用var customer = Name: $(*t*tName).val(), Age: $(*t*tAge).val(), Address: $(*t*tAddress).val(), Tel: $(*t*tTel).val(), Email: $(*t*tEmail).val();$.aja*( type:POST, url: /Aja*Demo/AddCustomer.csp*, data: customer, success:function(result) $(*output).val(result); );注意:type:POST并不是必须的,您也可以把它们改成GET方式提交。如果您此时用Fiddler查看请求容,会发现请求的数据采用的是key=value&key=vlaue的格式,与浏览器的方式一致。 由于没有JSON数据格式的限制,现在的参数项简单了。现在再看上面这段代码,主要代码量在哪里.是不是在获取调用参数那块.继续阅读本文,我要让它消失。回到顶部我们来看一下例如用的表单: 新增客户资料 Name: Age: Address: Tel: Email: 前面用了三种方法在提交这个表单,下面我们再来看一下更简单的提交方式:$(function() / 只需要下面这个调用就可以将表单改成异步提交方式! $(*form1).aja*Form( success:function(result) $(*output).val(result); ););为了更清楚展示这种方法,我甚至把script标签也贴出来了。如果您用过jQuery就应该能发现,真正的代码就只有aja*Form的那个调用。说明:aja*Form是jQuery.form插件提供的功能。效劳端的代码继续使用前面例如的代码,所以就不贴出了。再比照前面几种AJA*的实现方法,您说哪种方法最简单.您对第四代AJA*技术有兴趣吗.我还为它设计了三种不同场景下的例如,让您感受它的强大与简单,请继续阅读。回到顶部您认为前面的例如太简单了,是吗.可能有人会说,如果有多个submit按钮,这种方法就不适宜了,我要响应每个按钮,为它们指定不同的URL !真是这样吗. 看下面的例如吧。相关的前端代码如下: Input: Output:       $(function() $(*form1).aja*Form(function(result) $(*output).val(result);
展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 压缩资料 > 基础医学


copyright@ 2023-2025  zhuangpeitu.com 装配图网版权所有   联系电话:18123376007

备案号:ICP2024067431-1 川公网安备51140202000466号


本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知装配图网,我们立即给予删除!