用戶端 JavaScript 調用 ASP.NET WebService 的方法除了采用 WebServer.htc 和構造 SOAPAction 的方法外，下面介紹一個采用 Ajax調用的簡單方法，并且可以傳遞參數。其實，ASP.NET WebService 就是一個網站，是以，Request 對象是可用的，這樣，傳遞參數就很容易了。下面是一個WebService1.asmx的代碼：
ASMX 代碼：
<%@ WebService Language="C#" CodeBehind="WebService1.asmx.cs" Class="WebService1" %>
C#代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
/// <summary>
/// Summary description for WebService1
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
// 字元串傳回測試
public string GetServerTime()
return "目前伺服器時間：" + DateTime.Now.ToString();
}
// long 類型傳回測試
public long GetServerTimeTicks()
return DateTime.Now.Ticks;
// Datatable傳回測試
public DataTable GetTestDataTable()
DataTable dt = new DataTable("TestTable");
DataRow dr;
dt.Columns.Add(new DataColumn("id", typeof(Int32)));
dt.Columns.Add(new DataColumn("text", typeof(string)));
for (int i = 0; i < 6; i++)
dr = dt.NewRow();
dr[0] = i;
dr[1] = "清單項目 " + i.ToString();
dt.Rows.Add(dr);
return dt;
// List 類型測試
public List<User> GetTestUser()
//傳遞參數傳測試
string param = this.Context.Request.QueryString["param"];
if (param == null) param= this.Context.Request.Form["param1"];
List<User> u_list = new List<User>();
for (int i = 0; i < 10; i++)
User u = new User();
u.Name = "LoginName" + i.ToString() + " param = " + param;
u.Title = "孟憲會" + i.ToString();
u_list.Add(u);
return u_list;
//定義一個對象 User
public class User
public String Name { get; set; }
public String Title { get; set; }
HTML 代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JavaScript 調用 ASP.NET Web 服務測試</title>
<script type="text/javascript">
var xmlHttp = null;
function createXMLHttpRequest() {
try {
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
else if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
catch (ex) { }
function AsynRequest() {
createXMLHttpRequest();
if (xmlHttp == null) {
alert("不能建立 XmlHttpRequest 對象");
return;
xmlHttp.open("GET", "WebService1.asmx/GetTestUser?param=net_lover", true);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var userList = xmlHttp.responseXML.getElementsByTagName("User");
for (i = 0; i < userList.length; i++) {
document.getElementById("get1").innerHTML += userList[i].getElementsByTagName("Name")[0].firstChild.nodeValue + "：";
document.getElementById("get1").innerHTML += userList[i].getElementsByTagName("Title")[0].firstChild.nodeValue + "<br/>";
};
xmlHttp.send();
function AsynPostRequest() {
var data = "param1=abc";
xmlHttp.open("POST", "WebService1.asmx/GetTestUser?t=" + Date.parse(new Date()), true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", data.length);
document.getElementById("post1").innerHTML += userList[i].getElementsByTagName("Name")[0].firstChild.nodeValue + "：";
document.getElementById("post1").innerHTML += userList[i].getElementsByTagName("Title")[0].firstChild.nodeValue + "<br/>";
xmlHttp.send(data);
</script>
</head>
<body>
<input type="button" value="GET 方法調用" onclick="AsynRequest()" />
<input type="button" value="POST方法調用" onclick="AsynPostRequest()" />
<div id="get1"></div>
<div id="post1"></div>
</body>
</html>
需要注意的是：使用此方法需要在web.config裡加入以下的配置：
<system.web>
<webServices>
<protocols>
<add name = "HttpPost" />
<add name = "HttpGet" />
</protocols>
</webServices>
</system.web>
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)