一起谈.NET技术,JavaScript 调用 ASP.NET WebService 的简单方法
2011-08-29 19:27
766 查看
客户端 JavaScript 调用 ASP.NET WebService 的方法除了采用 WebServer.htc 和构造 SOAPAction 的方法外,下面介绍一个采用 Ajax调用的简单方法,并且可以传递参数。其实,ASP.NET WebService 就是一个网站,所以,Request 对象是可用的,这样,传递参数就很容易了。下面是一个WebService1.asmx的代码:
ASMX 代码:
C#代码:
HTML 代码:
需要注意的是:使用此方法需要在web.config里加入以下的配置:
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(); } [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; } } }
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() { 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>
需要注意的是:使用此方法需要在web.config里加入以下的配置:
<system.web> <webServices> <protocols> <add name = "HttpPost" /> <add name = "HttpGet" /> </protocols> </webServices> </system.web>
相关文章推荐
- 一起谈.NET技术,在Silverligh中调用Javascript (四种调用方法+简单与复杂参数的传递)
- 老孟的文章JavaScript 调用 ASP.NET WebService 的简单方法
- 在JavaScript中调用ASP.NET WebService的简单方法
- JavaScript 调用 ASP.NET WebService 的简单方法
- 一起谈.NET技术,ASP.NET前台代码绑定后台变量方法总结
- 一起谈.NET技术,C#后台调用前台javascript的五种方法
- 一起谈.NET技术,在ASP.NET 2.0中数据绑定的实现方法
- (转)javascript直接调用asp.net方法的技术 ——介绍pixysoft.ajax技术
- 一起谈.NET技术,SilverLight调用WebService的方法
- 一起谈.NET技术,ASP.NET调用.sql文件(二)
- javascript直接调用asp.net方法的技术 ——介绍pixysoft.ajax技术
- 一起谈.NET技术,ASP.NET MVC验证框架中关于属性标记的通用扩展方法
- 一起谈.NET技术,ASP.NET调用.sql文件
- asp.net中javascript调用.net方法
- 一起谈.NET技术,在 ASP.NET 中实现不同角色的用户使用不同登录界面的方法
- 一起谈.NET技术,不附加数据库 ASP.NET调用.sql文件
- javascript直接调用asp.net方法的技术
- 一起谈.NET技术,在ASP.NET网页间传递数据的五种方法
- asp.net中javascript调用.net方法
- 一起谈.NET技术,提高ASP.NET应用程序性能的十大方法