Ajax.Net中的服务器端编程非常简单,只需要把我们的Web标准控件放在UpdatePanel中就可以了。这种服务器端编程虽然简单,但所有的Ajax客户端代码全都给封装了,这种封装有两种坏处:
1.让客户无法体会到Ajax异步回调的的概念。
2.只能依赖于UpdatePanel,无法使用Ajax灵活编程。
下面我们一起讨论如何编客户端的Ajax代码来访问WebService
在Ajax.Net中为我们提供了一个ScriptManager控件,使用它来编写JS代码时,我们可以在不损失灵活性的基础上有效简化我们JS的代码量。
一、调用简单的WebService
1、建立一个最简单的WebService
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceSample : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld(string name) {
return "Hello World "+name;
}
}
这里需要注意的时在class WebServiceSample上添加[ScriptService]标签,另外我们写了一个供JS调用的方法HelloWorld(),该方法接收一个姓名字符串,并返回一个字符串。注意HelloWorld方法上也注明了[WebMethod]标记
这样就建立好了我们服务器端的程序了,下面看一下如何使用JS调用它。
2、设置ScriptManager
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" onasyncpostbackerror="ScriptManager1_AsyncPostBackError">
<Services>
<asp:ServiceReference Path="~/WebServiceSample.asmx" />
</Services>
</asp:ScriptManager>
<input type="text" id="inputName"/>
</form>
上面的代码中, 我们在ScriptManager标记中加入了<Services>子标记,在Services子标记中加入ServiceReference元素,并在ServiceReference元素中指定WebService的访问路径
3、使用JS和ScriptManager访问WebService
<script type="text/javascript" language="JavaScript">
function OnbuttonGo_click()
{
WebServiceSample.HelloWorld(document.getElementById('inputName').value,OnRequestComplete,OnRequestFailed);
return false;
}
function OnRequestComplete(result)
{
alert(result);
}
function onRequestFailed(result)
{
alert(result.get_message());
}
</script>
其中的WebServiceSample就是WebService中的类名,HelloWorld就是WebService类中的方法名。在WebService.HelloWorld中只接收一个姓名字符串参数,但在JS这里的HelloWorld方法中可以接收多个参数:
一般来说常用的有三个参数,各参数的意义如下:
第一个参数:向WebService.HelloWorld方法中传递的值。
第二个参数:执行成功后的回调函数
第三个参数:执行失败后的回调函数
在OnbuttonGo_click()方法中向WebService发送请求,如果执行WebService成功,则把结果返回给OnRequestComplete()回调函数。如果执行WebService失败则把结果返回给onRequestFailed()回调函数。
二、调用WebService的方法,并返回二维数组,实现下拉列表的连动效果
1、建立WebService (原创:灰灰虫的家 http://hi.baidu.com/grayworm)
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceSample : System.Web.Services.WebService
{
[WebMethod]
public string[][] GetAreas(string code)
{
string[][] ss = null;
List<ChinaStates> list = mydb.ChinaStates.Where(p=>p.ParentAreaCode==code).ToList();
ss = new string[list.Count][];
int i = 0;
foreach (ChinaStates cs in list)
{
string[] s = new string[2];
s[0] = cs.AreaCode;
s[1] = cs.AreaName;
ss[i] = s;
i++;
}
return ss;
}
}
该WebService有一个GetAreas()方法,该方法接收一个字符串参数,并返回一个二维数组。
2、设置ScriptManager
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServiceSample.asmx" />
</Services>
</asp:ScriptManager>
省份:<select id="ddlProv" size=1 onchange = "cityChange()">
<option value="-1">==请选择==</option>
</select>
城市:<select id="ddlCity" size=1 onchange = "countyChange()">
<option value="-1">==请选择==</option>
</select>
县市区:<select id="ddlCountry" size=1 >
<option value="-1">==请选择==</option>
</select>
</form>
3、使用JS和ScriptManager访问WebService
//调用WebService的方法查询省份
WebServiceSample.GetAreas("0001", initProv);
//初始化省份
function initProv(result) {
var prov = document.getElementById("ddlProv");
for (var i = 0; i < result.length; i++) {
var opt = document.createElement("option");
opt.setAttribute("value",result[i][0]);
var s = document.createTextNode(result[i][1]);
opt.appendChild(s);
prov.options.appendChild(opt);
}
}
//查询城市
function cityChange() {
var prov = document.getElementById("ddlProv").options[document.getElementById("ddlProv").selectedIndex].value;
WebServiceSample.GetAreas(prov,initCity);
}
function initCity(result) {
var city = document.getElementById("ddlCity");
while (city.length > 1) {
city.remove(1);
}
for (var i = 0; i < result.length; i++) {
var opt = document.createElement("option");
opt.setAttribute("value", result[i][0]);
opt.appendChild(document.createTextNode(result[i][1]));
city.appendChild(opt);
}
countyChange();
}
//查询县市区
function countyChange() {
var city = document.getElementById("ddlCity").options[document.getElementById("ddlCity").selectedIndex].value;
WebServiceSample.GetAreas(city, initCounty);
}
function initCounty(result) {
var county = document.getElementById("ddlCountry");
while (county.length > 1) {
county.remove(1);
}
for (var i = 0; i < result.length; i++) {
var opt = document.createElement("option");
opt.setAttribute("value", result[i][0]);
opt.appendChild(document.createTextNode(result[i][1]));
county.appendChild(opt);
}
}
三、调用WebService的方法,并返回实体对象 (原创:灰灰虫的家 http://hi.baidu.com/grayworm)
1、建立WebService
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceSample : System.Web.Services.WebService
{
[WebMethod]
public Info GetInfoByCode(string code)
{
if (mydb.Info.Where(p => p.Code==code).Count() > 0)
{
Info info = mydb.Info.First(p => p.Code == code);
return info;
}
else
{
return null;
}
}
}
这个WebService方法中返回一个Info对象。
2、设置ScriptManager
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" onasyncpostbackerror="ScriptManager1_AsyncPostBackError">
<Services>
<asp:ServiceReference Path="~/WebServiceSample.asmx" />
</Services>
</asp:ScriptManager>
<input id="txt" type="text" /><input id="Button1" type="button" value="button" οnclick="QueryInfo()"/><span id=ss></span>
<div id=dd></div>
</form>
3、使用JS和ScriptManager访问WebService
function QueryInfo() {
var code = document.getElementById("txt").value;
WebServiceSample.GetInfoByCode(code, show,failed);
var span = document.getElementById("ss");
ss.innerHTML = "正在查询请稍候....";
}
//如果失败则调用该方法显示错误信息。
function failed(result) {
var d = document.getElementById("dd");
d.innerHTML = result.get_message(); //取得错误信息
ss.innerHTML = "";
}
//如果调用成功则调用该方法显示查询结果
function show(result) {
if (result != null) {
var d = document.getElementById("dd");
var tb = "<table width=100% bgcolor=#ccaa99><tr>";
tb += "<td>" + result.Code + "</td>";
tb += "<td>" + result.Name + "</td>";
tb += "<td>" + result.Sex + "</td>";
tb += "<td>" + result.Nation + "</td>";
tb += "<td>" + result.Birthday.getFullYear()+"-"+result.Birthday.getMonth()+"-"+result.Birthday.getDate() + "</td>";
tb += "</tr></table>";
d.innerHTML += tb;
}
var span = document.getElementById("ss");
ss.innerHTML = "";
}
四、调用WebService的方法,并返回泛型集合
1、建立WebService
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceSample : System.Web.Services.WebService
{
[WebMethod]
public List<Info> GetAllInfo()
{
return mydb.Info.ToList();
}
}
2、设置ScriptManager
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServiceSample.asmx" />
</Services>
</asp:ScriptManager>
<input id="Text1" type="text" /><input id="Button1" type="button" value="button" οnclick="return Button1_onclick()" />
<div id=dd></div>
</form>
3、使用JS和ScriptManager访问WebService
//调用WebService
function Button1_onclick() {
WebServiceSample.GetAllInfo(OnSuccess, OnFailed);
}
//执行成功的回调函数,这里的result就是一个泛型的集合
function OnSuccess(result) {
var d = document.getElementById("dd");
var s = "<table width=100% border=0>";
// 遍历集合的每个元素
for (var i = 0; i < result.length; i++) {
s += "<tr bgcolor=#ccaa99>";
s += "<td>" + result[i].Code + "</td>"; //显示集合元素的各属性
s += "<td>" + result[i].Name + "</td>";
s += "<td>" + result[i].Sex + "</td>";
s += "<td>" + result[i].Nation + "</td>";
s += "<td>" + result[i].Birthday + "</td>";
s += "</tr>";
}
s += "</table>";
d.innerHTML = s;
}
function OnFailed(result) {
alert(result.get_message());
}