2008年4月21日星期一

喜欢jQuery没道理

就是喜欢jQuery,今天完成了一个用jQuery调用WebService的功能,在AJAX调用过程中使用了JSON格式,服务器端的WebService是用ASP.NET AJAX Extensions 1.0封装的,客户端本来也打算用ASP.NET AJAX的,但后来发现它太麻烦了:JS脚本必须放在一个ASPX页面,而且必须添加ScriptManager控件,而且还会自动引入很多其他的JS脚本(ScriptResource.axd?xxxxxxxxx)。我还是喜欢jQuery的AJAX API。
其实用jQuery调用WebService很简单:

  1. WebService必须增加属性:[ScriptService]
  2. 必须使用POST方法
  3. HTTP Header的Content-type必须为:"application/json; charset=utf-8"
一个简单的例子如下:
WebService的定义如下:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[ScriptService]
public class Service : System.Web.Services.WebService
{
[WebMethod]
public CacheKey[] GetAllCacheKeys()
{
return CacheHelper.GetAllCacheKeys();
}

[WebMethod]
public void RemoveByTags(string[] tags)
{
CacheHelper.Remove(tags);
}
}
Javascript如下:
jQuery.ajax({
url: "WebServices/Cache/Service.asmx/GetAllCacheKeys",
type: "POST",
dataType: "json",
beforeSend: function(req){
req.setRequestHeader("Content-type", "application/json; charset=utf-8");
},
success: function(keys){
alert(keys.length);
$.each(keys, function(i, key){
alert(key.Key);
});
}
});
再来一个包含参数的例子:
jQuery.ajax({
url: "WebServices/Cache/Service.asmx/RemoveByTags",
type: "POST",
dataType: "json",
data: "{tags:['intid=3091','dbsung']}",
beforeSend: function(req){
req.setRequestHeader("Content-Type", "");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
}
});
为什么要多写一句
req.setRequestHeader("Content-Type", "");呢?原因是带有数据的Ajax调用在IE下执行时"Content-Type"会变成"application/x-www-form-urlencoded, application/json; charset=utf-8"原因不详,所以我就多写了一句,先清空"Content-Type"。