最近在看赵老师(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>
上面有些注释掉的是我自己加上去的，为了测试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是一个字典，采用forin语法
for (var name in result)
{
alert(name + ": " + result[name].Salary)
}
}
</script>
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是介绍错误处理的，这里就不介绍了，感兴趣的朋友可以参看其他相关资料。
