ASP.NET AJAX初学体验之客户端访问WebService(1)

　　最近在看赵老师(JeffreyZhao)AJAX深入浅出系列课程，个人觉得他讲的非常的好，不愧为"光荣的程序员"，哈:),扯远了，不过还是得说句“您辛苦了”，做老师真的是不容易啊。之前对AJAX一窍不通，听了老师的课以后，总算懂了那么一点点，不过还差的远咯，还是继续努力吧，因为现在AJAX真的是很火啊，我们得跟着技术的步伐前进才是，好了，废话不多说了，还是来学习一下咯(注：以下的代码或者这个体验的代码我将直接引用赵老师的了，只为学习！)。

　　既然是初体验，那就从最基础的开始吧，太深了我也不懂，还是一步一个脚印。这里要说的是客户端访问WebService,那就先new个WebService出来吧，拿老师的话来说，我们还是看Demo吧

=======================Demo1:简单数据类型访问====================

new 个WebServiceFoundation.asmx

using System.Web.Script.Services;

namespace Sample
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebServiceFoundation : System.Web.Services.WebService
{
[WebMethod]
public int GetRandom()
{
return new Random(DateTime.Now.Millisecond).Next();
}

[WebMethod]
public int GetRangeRandom(int minValue, int maxValue)
{
return new Random(DateTime.Now.Millisecond).Next(minValue, maxValue);
}
[WebMethod]
public string GetCurrentTime()
{
return DateTime.UtcNow.ToString();
}
}
}

这里要注意的是以下几点(以后就不重复了)

　　1) using System.Web.Script.Services;
　　2) class前标注[ScriptService]
　　3) method前标注[WebMethod]
我们看到method返回的都是些很简单的类型如string ,int
接下来看页面：
　　首先ScriptManager是肯定要的，添加Services，你会看到有个ServiceReference，Path设定为你的Service路径,
InlineScript=true表示把代理直接显示到页面，通过查看源文件就可以明白了。

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
<Services>
<asp:ServiceReference Path="WebServiceFoundation.asmx"

　　　　InlineScript="true" />
</Services>
</asp:ScriptManager>

接下去是放了3个按钮，这没的说

<input type="button" value="Get Random" onclick="getRandom()" />
<input type="button" value="Get Range Random" onclick="getRandom(50, 100)" />
<input type="button" value="Get CurrentTime" onclick="getCurrentTime()" />

接下来是javascript代码，这里前2个Button都调用getRandom方法，用arguments来判断!

<script language="javascript" type="text/javascript">
function getRandom(minValue, maxValue)
{
if (arguments.length != 2)
{
Sample.WebServiceFoundation.GetRandom(getRandomSucceeded);
}
else
{
Sample.WebServiceFoundation.GetRangeRandom(minValue, maxValue,

　　　　getRandomSucceeded);
}
}
function getCurrentTime()
{
Sample.WebServiceFoundation.GetCurrentTime(getCurrentTimeSucceeded);
}
/* getCurrentTime回调函数 */
function getCurrentTimeSucceeded(result)
{
//alert(result);
$get("showtime").innerText="现在时刻："+result; ////正确(普通控件)
//document.all("Button1").value=result; //正确(web控件)
$get("Button1").value=result; //正确(web控件)
}
/* getRandom回调函数 */
function getRandomSucceeded(result)
{
alert(result);
}
</script>

[/code]

上面有些注释掉的是我自己加上去的，为了测试WebControl
最后是

<div id="showtime" style="font-size:15px; color:Red; font-weight:bold"></div>
<asp:Button ID="Button1" runat="server" Text="Button" />

这就是Demo1的示例,接下来我们看Demo2
=======================Demo2:PageMethod====================
这个比较简单了,但需要注意的是方法一定要static
我们先看cs页面:

　　[WebMethod]
public static DateTime GetCurrentTime()
{
return DateTime.UtcNow;
}

　　前台页面，这里有个注意的地方，应该在ScriptManage里设置EnablePageMethod=true,但我这里没有，但
运行正常的，所以这里需要注意下。

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<input type="button" value="Get Current Time" onclick="getCurrentTime()" />

Javascript代码如下:

<script language="javascript" type="text/javascript">
function getCurrentTime()
{
PageMethods.GetCurrentTime(getCurrentTimeSucceeded);
}

function getCurrentTimeSucceeded(result)
{
alert(result);
}
</script>

这就是Demo2的示例,接着看Demo3吧!

=======================Demo3:复杂点的数据类型====================
我们先看前台页面

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="ComplexType.asmx" />
</Services>
</asp:ScriptManager>

<input type="button" value="Double Salary" onclick="doubleSalary()" />
<input type="button" value="Reverse" onclick="reverse([1, 2, 3, 4, 5])" />
<input type="button" value="Get Employees" onclick="getEmployees()" />

Javascript代码如下:

<script language="javascript" type="text/javascript">
function doubleSalary()
{
var employee = new Object();
employee.FirstName = "Jeffrey";
employee.LastName = "Zhao";
employee.Salary = 1000;

ComplexType.DoubleSalary(employee, doubleSalarySucceeded);
}

function doubleSalarySucceeded(result)
{
var message = String.format(
"First Name: {0}\nLast Name: {1}\nFull Name: {2}\nSalary: {3}",
result.FirstName,
result.LastName,
result.FullName,
result.Salary);

alert(message);
}

function reverse(array)
{
//回调函数采用了内联的方法，偷懒！
ComplexType.Reverse(array, function(result){alert(result);});
}

function getEmployees()
{
ComplexType.GetEmployees(getEmployeesSucceeded);
}

function getEmployeesSucceeded(result)
{
//得到的result是一个字典，采用for

in语法
for (var name in result)
{
alert(name + ": " + result[name].Salary)
}
}

</script>

[/code]

ComplexType.asmx如下

[WebMethod]
public Employee DoubleSalary(Employee employee)
{
employee.Salary *= 2;
return employee;
}

[WebMethod]
public List<int> Reverse(List<int> list)
{
list.Reverse();
return list;
}

[WebMethod]
public IDictionary<string, Employee> GetEmployees()
{
//字典IDictionary
//注意这里的Key一定要是string类型
Dictionary<string, Employee> result = new Dictionary<string, Employee>();

Employee emp1 = new Employee();
emp1.FirstName = "Jeffrey";
emp1.LastName = "Zhao";
emp1.Salary = 1000;
result[emp1.FullName] = emp1;

Employee emp2 = new Employee();
emp2.FirstName = "Tom";
emp2.LastName = "Chen";
emp2.Salary = 2000;
result[emp2.FullName] = emp2;

return result;
}

Employee.cs如下

public class Employee
{
public string FirstName;

public string LastName;

public int Salary;

public string FullName
{
get
{
return this.FirstName + " " + this.LastName;
}
}
}

　　我们看到第一个按钮实现的是一个Employee类型；第二个是List<int>类型；第三个是一个字典IDictionary<string, Employee> ，其中要说明的是第二个泛型List<int>，在客户端传入的是一个数组类型，而在服务器端却是个List类型需要注意下。
　　还有2个Demo是介绍错误处理的，这里就不介绍了，感兴趣的朋友可以参看其他相关资料。