JQuery调用Webservice实现AJAX实现教程

作者：小菜更新时间：2025-03-16 点击数：

简介：前几天跟一个朋友在聊Web的AJAX时，很惊讶他的设计方法很原始,直接用的js直接调的.aspx,传参来取得结果实现局部刷新,个人感觉这样不好维护,也没有灵活性

【菜科解读】

前几天跟一个朋友在聊Web的AJAX时，很惊讶他的设计方法很原始,直接用的js直接调的.aspx,传参来取得结果实现局部刷新,个人感觉这样不好维护,也没有灵活性.

怎样能够做到灵活?可维护性强?

做一个小实例出来,也加强一下印象.

jQuery+Web service来实现:Web service作后台服务,用jQuery(js优秀框架)调此web service取得结果，如下是原理图:

现在开始演示一个实例,开发工具如下为:Visual studio S 2008+jQuery1.4.1

1.新建一项目:MyService

2.Web service后台代码如下:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;namespace MyService{ /// /// Summary description for Service1 /// [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService]//此处需要设定为ScriptService类型,js才能够从web service取得值 public class Service1 : System.Web.Services.WebService { [WebMethod] public string GetMessage(string name) { return "Hello,"+name; } [WebMethod] public List GetMembers() { List personList = new List(); personList.Add("AGAN"); personList.Add("MS"); personList.Add("ZURI"); personList.Add("JILI"); personList.Add("Who are you!"); return personList; } [WebMethod] public string GetYourAge(string name) { int age = 0; switch(name.ToUpper()){ case "AGAN": age = 18; break; case "MS": age = 28; break; case "ZURI": age = 25; break; case "JILI": age = 23; break; default: age = 30; break; } return age.ToString(); } }}

注意在web.config中配置好默认文档Service1.asmx,否则IIS中测试会报错403的错误.

3.在项目解决方案中添加一Web setup项目MyServiceSetup,如下图:

右键点击MyServiceSetup安装包,有Install(安装),unInstall(卸载)点击即可发布到IIS中或中IIS移除.

浏览已发布的这个Web service可以看到已公开的这方个方法,如图所示:

现在我们来测试一下GetMambers()这个方法,如图:

点"调用"后结果如下:

这说明发布的这个Web service已没有问题,现在我们用jQuery来调这个服务来实现AJAX局部刷新的效果。

现在下载jQuery插件jquery-1.4.1.js

下载网址:http://www.cr173.com/soft/35464.html4. 建一个测试的项目来测试web service:TestMyService:

用js调用web service,一个按钮取得ArrayOfString中的列表数据,点击列表项调GetYourAge()方法取得某个人的相关信息(年龄),添加一html文件,把jquery-1.4.2.js把到js,

代码和jquery代码如下:

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMyService._Default" %> Untitled Page script src="js/jquery-1.4.1.js" type="text/javascript"> /script script type="text/javascript"> function GetDataList() { $.ajax({ type:"POST", contentType:"application/json", url:"http://localhost/MyServiceSetup/Service1.asmx/GetMembers",//GetMembers是web service的方法名 data:"",//无参数类型 datatype:'json', success:function(result){ try{ $('#listMembers').empty(); $(result.d).each(function() {//遍历取得的结果 $("#listMembers").append("" + this + ""); }); }catch(e){ alert(e); } }, error: function(result, status){ if(status=='error'){ alert(result); } } }); } function GetAge(name) { $.ajax({ type:"POST", contentType:"application/json", url:"http://localhost/MyServiceSetup/Service1.asmx/GetYourAge",//GetYourAge是web service的方法名 data:"{name:'"+name+"'}",//name是参数名,跟web service的方法参数一致 datatype:'json', success:function(result){ try{ $("#lblAge").html(name+","+result.d+" Year's old.");//result.d是取得的值 }catch(e){ alert(e); } }, error: function(result, status){ if(status=='error'){ alert(result); } } }); } /script Members:

在IIS中测试结果如下图:

点击Get取得人名列表，如下图:

点击列表项的某个人名,即取得人员的相关信息(年龄),如下图所示:

现在一个简单的jquery调web service实例已完成了.

源代码如下:

测试源码TestMyServiceSample.rar

JQuery,调用,Webservice,实现,AJAX,教上一篇：windows系统配置phpMyAdmin图文教程下一篇：

javascript函数调用的几种方法

函数对于我们这些程序员来说，在熟悉不过啦，我们几乎每天能在写函数，使用函数。

可是，在javascript中，大家知道几种函数调用的语句呢？在工作中，常用到的函数调用的语句就一两个。

那为啥大家知道我还在这里写博客，没事消磨大家的时间。

想要知道，请耐心看完，你就明白啦。

javascript中的函数本身是一个变量/值，因此函数调用其实是一个表达式，如图1所以，下面代码就是函数调用语句，它也是一个表达式语句：functionName();在javascript中具名函数可以使用上面方法直接调用，匿名函数可以通过引用变量调用，如果没有引用的匿名函数怎么调用呢？下面的例子说明这三种情况：//实例1:具名函数直接调用functionfnName(){//函数体}fnName();//实例2：匿名函数通过引用变量调用varfnName=function(){//函数体};fnName();//实例3：没有引用的匿名函数的调用(1)(function(){//函数体}());//实例4：没有引用的匿名函数的调用(2)(function(){//函数体})();//实例5：没有引用的匿名函数的调用(3)voidfunction(){//函数体}();实例1,2的用法比较常见，实例4在现在很多的框架中使用的也比较多，实例3，5见的就比较少，但是各有其用。

实例3，4都用于“调用函数并返回值”，这两种表达式有是那个括号，但是意义各不同。

如图2，实例3的说明：实例4的说明：其实实例3，4基本是一致。

但是它们的运算过程还是有不同：实例3是用强制运算符使函数调用运算得以执行，实例4则是用强制运算符运算“函数直接量声明”这个表达式，并返回一个函数自身引用，然后通过函数调用运算符“()”，来操作这个函数的引用。

ps:“函数调用运算符()”在实例3中作用于匿名函数本身，而实例4中却是作用于一个运算的结果值。

最后的实例5，则用于“调用函数并忽略返回值”。

运算符void用于使其后的函数表达式执行运算。

然而由此带来的问题：如果不使用void和()这两个运算符，而直接使用下面的代码，是否能使函数表达式执行呢？//实例6：直接使用调用函数运算符"()"function(){//函数体}()//实例7：使用语句结束符";"来执行语句function(){//函数体}();实例6，7看起来是right，但是事实上它们都不可以执行，原因是它们无法通过脚本引擎的语法检测。

在语法检测阶段，脚本引擎会认为下面的代码：function(){//函数体}//或functionfnName(){//函数体}结果是函数声明，因此实例6，7中使用具名函数也是通不过语法检测的，正因为这里是函数声明，所有实例6，7的代码位于函数后面的“()”没有语法意义，它们的代码被解析成了//实例6：语法解释function(){//函数体};();//实例7：同上既然“function () {}”被当作完整的语法结构（函数声明语句）来解释，那么也就相当于已经存在语句结束符。

因此“();”被当作一个语句表达式解释，而这样是错误的语法。

所以，我们能看到语法错误。

如此，这个语法错误是针对“();”,不是针对前面的函数声明的，下面代码稍作修改：//实例6：通过语法解释function(){//函数体}(1,2)这样就通过语法的解释，因为语句被语法解释成了。

//实例6：直接使用调用函数运算符"()"function(){//函数体};(1,2);图4，被解释成了两个单值表达式，，也可以是单个单值表达式。

但是这重要的是，这代码被解释成了一函数直接量声明和一个表达式语句，因此它不能起到“执行函数并传入参数”的作用。

如果你真的想在声明的时候执行一下该函数，那么可以参考实例3，4，5，用“()”或void运算符将函数声明变成“单值表达式”void function () { // 函数体}(1,2);当引擎在解释这样的代码时，由于先识别到运算符void，于是将后面的匿名函数识别为操作数。

上述就javascript中的函数调用语句，说实在的最后那个我也是看到书本上的，但是，我还是一直没太明白，如果那位高手可以指点其中的原委那就太感谢啦。

也希望这个能帮到其他刚学习javascript的同学们。

javascript,函数,调,用的,几种,方法,函数,对于