WebService跟Ajax（我指Jquery框架），大家都不陌生。今天來看一個例子。在同域下Ajax調用WebService方法。（記得是同域，也就是要調用的WebService頁面與Ajax請求頁面在同一個網站下）。
具體操作如下：
一、用VS新建Web站點。
二、站點下放入Jquery框架
三、在網站中添加“web服務”
四、將Jquery框架添加到站點下，並且加一個CallWebService.js文件，來處理調用
當做完後，網站框架結構爲（具體站點，具體分析）：
1.Default.aspx頁面。這是調用webservice服務的頁面。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax調用WebService</title>
<script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Js/CallWebService.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<hr />
<input id="btnCallHello" type="button" value="調用HelloWebService" />
<hr />
姓名：<input id="txtName" type="text" /><br />
<input id="btnCallBody" type="button" value="調用HelloSomeBody" />
<hr />
學號：<input id="txtStuSid" type="text" /><br />
姓名：<input id="txtStuName" type="text" /><br />
性別：<input id="txtStuSex" type="text" /><br />
年齡：<input id="txtStuAge" type="text" /><br />
<input id="btnSinStuInfo" type="button" value="調用SetStudentInfo" /><br />
<hr />
<input id="btnMulStuInfos" type="button" value="調用GetMulStudentInfos" />
<hr />
</div>
<div id="backData"></div>
</form>
</body>
</html>
2.MyWebService.asmx頁面。爲WebService服務。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace WebServiceTest
{
/// <summary>
/// MyWebService 的摘要說明
/// </summary>
[WebService(Namespace = "http://www.mywebaddr.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的註釋。
[System.Web.Script.Services.ScriptService]
public class MyWebService : System.Web.Services.WebService
{
/// <summary>
/// 返會語句話
/// </summary>
[WebMethod]
public string HelloWebService()
{
return "Hello WebService";
}
/// <summary>
/// 返回一句問候，根據名稱
/// </summary>
[WebMethod]
public string HelloSomeBody(string name)
{
return "Hello " + name;
}
/// <summary>
/// 設置學生實體，並返回這個實體
/// </summary>
[WebMethod]
public Student SetStudentInfo(string name, string sex, int age,int sid)
{
Student stuInfo = new Student();
stuInfo.Sid = sid;
stuInfo.Name = name;
stuInfo.Sex = sex;
stuInfo.Age = age;
return stuInfo;
}
/// <summary>
/// 返回泛型數據
/// </summary>
/// <returns></returns>
[WebMethod]
public List<Student> GetMulStudentInfos()
{
List<Student> StuList = new List<Student>();
for (int i = 0; i < 10; i++)
{
Student s = new Student();
s.Sid = i + 1;
s.Name = "Tom"+s.Sid;
s.Sex = "男";
s.Age = i + 1;
StuList.Add(s);
}
return StuList;
}
}
}
注意：我們分別看一下這幾個方法的簽名，這很重要，因爲方法簽名決定了你調用必須遵守的規則，本文中我們用的是post方法，所以只給出post的方法簽名。
1.HelloWebService
說明：請求的頁面的地址: /MyWebService.asmx/HelloWebService;主機地址爲:192.168.0.194;端口號：如果不是80端口，必須給出。
調用該服務的完整路徑爲：http://192.168.0.194:85/MyWebService.asmx/HelloWebService 。(具體情況，具體分析)
2.HelloSomeBody
說明：請求的頁面的地址: /MyWebService.asmx/HelloSomeBody;主機地址爲:192.168.0.194;端口號：如果不是80端口，必須給出。
“name=string”說明，請求該服務時，需要提供參數。
調用該服務的完整路徑爲：http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody 。(具體情況，具體分析)
3.SetStudentInfo
說明：請求的頁面的地址: /MyWebService.asmx/SetStudentInfo;主機地址爲:192.168.0.194;端口號：如果不是80端口，必須給出。
注意參數說明。
調用該服務的完整路徑爲：http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo 。(具體情況，具體分析)
4.GetMulStudentInfos
說明：請求的頁面的地址: /MyWebService.asmx/HelloSomeBody;主機地址爲:192.168.0.194;端口號：如果不是80端口，必須給出。
調用該服務的完整路徑爲：http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos。(具體情況，具體分析)
3.下面是核心部分，也就是調用服務的Ajax腳本代碼。CallWebService.js
$(document).ready(pageLoad);
// 載入時進行執行的方法
function pageLoad() {
BindCallHello();
BindCallBody();
BindGetSingleStudent();
BindGetMulStudents();
}
// 調用HelloWebService
function BindCallHello(){
$("#btnCallHello").click(function() {
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/HelloWebService", //調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: {}, //這裏是要傳遞的參數，爲Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因爲WebService的請求/返回 類型是相同的，由於請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d);// 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText);// 輸出服務器端返回數據
}
});
});
}
// 調用調用HelloSomeBody
function BindCallBody() {
$("#btnCallBody").click(function() {
var name = $("#txtName").val();
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody", //調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: "{name:'" + name + "'}", //這裏是要傳遞的參數，爲Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因爲WebService的請求/返回 類型是相同的，由於請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d); // 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 輸出服務器端返回數據
}
});
});
}
function BindGetSingleStudent() {
$("#btnSinStuInfo").click(function() {
var stuSid = $("#txtStuSid").val();
var stuName = $("#txtStuName").val();
var stuSex = $("#txtStuSex").val();
var stuAge = $("#txtStuAge").val();
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo",
//調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: "{name:'" + stuName +"',sex:'"+stuSex+"',age:'"+stuAge+"',sid:'"+stuSid+ "'}", //這裏是要傳遞的參數，爲Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因爲WebService的請求/返回 類型是相同的，由於請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d.Sid); // 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 輸出服務器端返回數據
}
});
});
}
function BindGetMulStudents() {
$("#btnMulStuInfos").click(function() {
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos", //調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: {}, //這裏是要傳遞的參數，爲Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因爲WebService的請求/返回 類型是相同的，由於請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d[0].Sid); // 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 輸出服務器端返回數據
}
});
});
}
說明：相關注釋寫的很詳細，應該地球人都知道。應該是玩程序的地球人都知道。
總結：
至此，所有代碼知識點，都已經貼出來了。
細心的讀者應該能發現，我之所以很贅述的把4個服務方法都列了出來，其實是想讓大家看清楚，每個方法的側重點不同。調用方法上包括：無參數的調用，參數調用。
返回值類型上包括：返回字符串，返回自定義實體數據。
所有返回值都爲Json數據。Json數據作爲返回值，近來大受親睞。