一起谈.NET技术，JavaScript 调用 ASP.NET WebService 的简单方法

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();
}

[WebMethod]
// long 类型返回测试
public long GetServerTimeTicks()
{
return DateTime.Now.Ticks;
}

[WebMethod]
// 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;
}

[WebMethod]
// 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 ; }
}
}

<! 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() {
createXMLHttpRequest();
if (xmlHttp == null ) {
alert( " 不能创建 XmlHttpRequest 对象 " );
return ;
}
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);
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( " 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 >