概要

この記事では、Ajax を介して C# ASP.NETプロジェクトの WebService メソッド (.asmx ファイル形式) にアクセスする方法を示します。

この記事のプロジェクト構成については、前回の記事: C# で Web サービスプロジェクトをビルドする (1) を参照してください。

環境

ビジュアルスタジオ 2017 / VS2019

C# ASP.NET Web サービス

Win11 / Win10 類似

.NET Framework 4.8 (サーバー側)

jQuery-3.6.0.min.js (クライアント側)

.asmx ファイル

.asmx のフルネームは ASMXActive Server Methods です。

.asmx はASP.NET Web サービス (ASMX)です。

.asmx に基づくサービスは、SOAP を介して HTTP でアクセスされる B/S の形式に属し、デフォルトで XML 形式でデータを返します。

基本型と PUBLIC 構造型を返すことができます

Microsoft プラットフォームでは、.asmx は通常 .NET Web サービスに対応し、ファイルは VB や C# などの言語で記述できます。

SOAP (百度百科事典)

Simple Object Access Protocol は、データを交換するためのプロトコル仕様です. XML (標準的な一般的なマークアップ言語のサブセット) に基づく軽量でシンプルなプロトコルです. WEB 上で構造化されたデータと固定化された情報を交換するために設計されています.

注: Web サービス + WSDL + SOAP が一緒になって .NET Web サービスフレームワーク仕様を構成します。

Ajax (非同期 JavaScript および XML)

非同期 Javascript と XML。名前が示すように、Web サーバーから独立したクライアントブラウザーテクノロジは、ページ全体を再読み込み (更新) することなく、クライアントがサーバーに非同期にアクセスすることをサポートします。Ajax は、JavaScript、XML、HTML、CSS などの標準技術に基づいています。

AJAX は開発者の夢であり、Ajax によって次のことが可能になります。

ページを更新せずに Web ページを更新する

ページの読み込み後にサーバーからデータをリクエストする

ページの読み込み後にサーバーからデータを受信する

バックグラウンドでサーバーにデータを送信する

W3school のオンラインドキュメントによると:

AJAX はプログラミング言語ではありません。

AJAX は、Web ページから Web サーバーにアクセスするための技術です。

AJAX は Asynchronous JavaScript and XML の略です。

Ajax クロスドメインアクセスについて

セキュリティ上の理由から、最近のブラウザはクロスオリジンアクセスを許可していません。

これは、Ajax 経由で読み込もうとしている Web ページと XML ファイルの両方が同じサーバー上にある必要があることを意味します。

.NET フレームワークは、単純な構成で Ajax クロスドメインアクセスをサポートできます。

クロスドメインアクセス

この例では、この例の C# プロジェクトによって作成された Web アプリケーション (Web サイト) は、別のクロスドメインサーバー (ホスト) の Web クライアントからアクセスされます。つまり、ユーザーはドメインを越えて Web サイトにアクセスする必要があります。Web クライアントのクロスドメインアクセスをサポートするには、次のコンテンツをプロジェクトの Web.config ファイルに追加する必要があります。

便宜上 (コピー)、構成コードが添付されています。

<system.webServer>

<デフォルトドキュメント>

<ファイル>

<クリア/>

</ファイル>

</defaultDocument>

<httpプロトコル>

<カスタムヘッダー>

</customHeaders>

</httpプロトコル>

</system.webServer>

服务端回顾

根据上一篇文章，我们通过VS2017利用C#创建了一个ASP.NET Web应用项目。然后，我们在项目中添加了一个Web服务，对应生成了一个.asmx文件（WebService1.asmx）。最后，我们通过各种配置操作完成了项目的发布，即通过Windows的IIS服务向Web用户提供相应的Web服务。

Web服务对应的代码如下。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

namespace MyWebApp

{

/// <summary>

/// WebService1 的摘要说明

/// </summary>

[WebService(Namespace = ""http://sgin.pcl.ac.cn/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。

[System.Web.Script.Services.ScriptService]

public class WebService1 : System.Web.Services.WebService

{

[WebMethod]

public string HelloWorld()

{

return "Hello World";

}

[WebMethod(Description = "加法")]

public int Add(string a, string b)

{

int sum = 0;

sum = Convert.ToInt32(a) + Convert.ToInt32(b);

return sum;

}

[WebMethod(Description = "乘法")]

public int Multiply(string a, string b)

{

int rsult = 0;

rsult = Convert.ToInt32(a) * Convert.ToInt32(b);

return rsult;

}

可以看出，在上面的Web服务中，提供了三个服务：

HelloWorld服务：向客户端简单返回一个‘Hello World’字符串；

Add服务：客户端提供两个字符串，服务端将字符串转换为数字后，相加（做加法），然后将结果返回给客户端；

Multiply服务：客户端提供两个字符串，服务端将字符串转换为数字后，相乘（做乘法），然后将结果返回给客户端。

此外，根据服务端自动生成的代码中的提示，若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。取消该行注释后，务必重新生成解决方案，然后重新发布项目。

下面演示客户端通过各种方法（协议、标准及接口）访问服务端的相关服务。通过上面的跨域访问配置，客户端不用限于与服务端在一台主机上，客户端可以通过远程（跨域）访问服务端。

标准Ajax方式

本地访问（客户端和服务器端同一台主机或属于同一个域）

一、无参数的方法访问

客户端代码如下

<!DOCTYPE html>

function callHelloWorld() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("helloworld").innerHTML = this.responseText;

}

};

xhttp.open("POST", ""http://localhost:8081/WebService1.asmx/HelloWorld", true);

xhttp.send();

}

</script>

<body>

<h2>点击获取服务端返回的测试字符串</h2>

</div>

</body>

</html>

注意用的是POST方法，GET方法没有尝试（按照服务端提示，应该是不支持GET方法）。

客户端（浏览器）界面：

点击‘调用’按钮，正确返回结果。

二、带参数的方法访问

客户端代码如下

<!DOCTYPE html>

function callAdd() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("addValue").innerHTML = this.responseText;

}

};

xhttp.open("POST", ""http://localhost:8081/WebService1.asmx/Add", true);

xhttp.setRequestHeader("content-type", "application/json");

var params = {"a":"3", "b":"4"};

xhttp.send(JSON.stringify(params));

}

</script>

<body>

<h2>点击执行服务端Add()方法</h2>

</div>

</body>

</html>

本例中，由于客户端需要上传参数（数据）给服务端，所以需要显式指定‘content-type’，参数名称需要与Add方法中的参数名称保持一致。

客户端（浏览器）界面：

点击‘调用’按钮，正确返回结果。

注意：返回的结果是JSON格式的字符串。由此，建议当服务端方法需要返回多个结果值时，通过JSON格式返回是比较妥当的。

跨域访问（客户端和服务器处于不同的域）

一、无参数的方法访问

上述同样的客户端代码，跨域访问时不能正确访问，点击按钮页面没反应，经调试，xhttp（即Ajax的XMLHttpRequest对象）返回的状态为500。查询w3school（http://w3school.com.cn）官网，对应的解释为‘请求未完成。服务器遇到不可预知的情况。’

经各种网站问题的搜索查询尝试，发现是参数传递的问题，问题最终解决了，但中间的机理还值得深入探讨。

ASP.NET的服务框架基于SOAP协议，SOAP基于XML协议交换数据和指令，在C#默认给出的示例中也是给出了如何基于SOAP协议来访问服务端的接口。

实际应用中，客户端通常通过表单形式提供请求给服务器并返回结果，或者通过更流行的Ajax异步方式，其中由Ajax为客户端请求执行了所需的SOAP封装。

这个问题不深入讨论，一来自己也没有弄得特别清楚，二来有点太费功夫。直接说如何解决问题的（可参见本文的小结帮助解惑）。

首先，需要在前述服务端回顾中按照VS2017自动代码框架生成的代码提示取消相关的注释以允许Ajax访问。

其次，在Ajax的服务请求中添加相应的头部信息。

xhttp.open("POST", ""http://localhost:8081/WebService1.asmx/HelloWorld", true);

xhttp.setRequestHeader("Content-type", "application/json");

xhttp.send();

增加以上设置后，成功返回（JSON格式）结果。

数据名称为‘d’，是系统自动给出的，值为我们期望返回的‘Hello World’。

尝试了各种content-type，只有‘application/json’能够成功，其他尝试的包括：

text/xml

text/plain

text/html

application/xml

按理‘application/xml’应该是可以的，为何（跨域情况下）反倒是不支持？

经测试，当在本地调用服务时，不受客户端是否设置‘content-type’的影响，都能正确返回结果，只是在设置为‘application/json’返回的是JSON格式，其他设置下直接返回字符串。

也就是说，根据目前的测试，跨域访问的话，客户端只能且仅能将‘content-type’设置为‘application/json’才能正确获取结果。

说这么多，客户端是否能正确访问服务端的方法，跟HTTP请求的头封装密切相关，能够封装为正确的格式，就能获取内容。在跨域情况下，必须正确指定（格式化）相关请求头及请求参数（数据）。

二、带参数的方法访问

参见本地访问的例子。

JQuery + Ajax方式

本地访问

注意需要在客户端引入JQuery代码包（文件）。

利用JQuery + Ajax方式的好处：编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。（此处引用了网络原文描述，参见https://www.w3school.com.cn/jquery/jquery_ajax_intro.asp）

注意：在JQuery + Ajax方式下，访问接口、参数及响应与JQuery版本密切相关，本例中的JQuery版本为jquery-3.6.0.min.js

本例中仅对JQuery + Ajax方式下的POST方法进行了测试和验证，jQuery ajax – post()方法接口定义如下：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

详细内容可参见链接：https://www.w3school.com.cn/jquery/ajax_post.asp

一、无参数的方法访问

客户端代码如下：

<!DOCTYPE html>

<body>

$(document).ready(function(){

$("#btnCall").click(function(){

$.post("/WebService1.asmx/HelloWorld", function(data){

$("#HelloWorld").html(data);

alert(data);

});

</script>

<h2 id="HelloWorld">点击获取服务端返回的测试字符串</h2>

</div>

</body>

</html>

方法很简单，就是访问C# Web服务提供的无参数接口，然后通过alert方法测试返回的数据。

经测试，点击‘调用’按钮后，服务器返回了结果，在执行了‘$("#HelloWorld").html(data);’语句后，页面无反应，后续的‘alert(data);’语句未能执行。

注释掉语句‘$("#HelloWorld").html(data);’，alert结果如下。

提示返回一个[objectXMLDocument]，即一个XMLDocument对象。

这也是‘JQuery+Ajax’方式下，与C# Web服务接口访问后默认返回的对象。

注意jQuery.post()方法的最后一个可选参数‘dataType’，分别指定为xml, json, script和html后的反应如下：

“xml”，返回XMLDocument对象。

“json”，调用失败，无法返回结果。

“script”，返回XML格式的字符串，该字符串通过‘$(selector).html(data)；’方法解析后可直接在页面显示结果，即服务器返回的‘HelloWorld’字符串；通过‘$(selector).text(data)；’方法则可直接显示原始的XML文本（字符串）。

“html”，与指定为”script”结果一样。

如果需要返回JSON格式数据，需要在客户端请求（post方法）中指定contentType为‘application/jsom’

跨域访问

同样的客户端代码，本地访问均测试通过，跨域完全没反应！

直接给出跨域访问的正确代码，细节请移步小结。

<!DOCTYPE html>

<body>

$(document).ready(function(){

$("#btnCall").click(function(){

$.ajax({

type : "POST",

contentType : "application/json; charset:utf-8",

url : ""http://192.168.123.24:8081/WebService1.asmx/HelloWorld",

dataType : "json",

success : function (data) {

alert("success");

for(x in data) {

$("#HelloWorld").html(data[x]);

break; // retrieve only the first element

}

error : function(xhr) { // for test

alert("error");

$("#HelloWorld").html(xhr.responseText);

}

});

</script>

<h2 id="HelloWorld">点击获取服务端返回的测试字符串</h2>

</div>

</body>

</html>

带参数的访问：

<!DOCTYPE html>

<body>

$(document).ready(function(){

$("#btnCall").click(function(){

var params = {"a":"3", "b":"4"};

$.ajax({

type : "POST",

contentType : "application/json; charset:utf-8",

url : ""http://192.168.123.24:8081/WebService1.asmx/Add"

data : JSON.stringify(params),

dataType : "json",

success : function (data) {

for(x in data) {

$("#HelloWorld").html(data[x]);

break; // retrieve only the first element

}

error : function(xhr) { // for test

alert("error");

$("#HelloWorld").html(xhr.responseText);

}

});

</script>

<h2 id="HelloWorld">点击获取服务端返回的测试字符串</h2>

</div>

</body>

</html>

小结

直接总结吧，中间试错的过程全部忽略，下面的总结仅针对跨域访问，本地访问形式灵活且支持的协议更多，可以参照前述的示例。

提示：

由于软件、接口版本不同，本示例和总结仅针对前述环境一节中给出的各软件（或工具）版本。

服务端是基于C#的ASP.NET Web服务应用，客户端基于JQuery+Ajax。

关于本地和跨域访问，本地访问能够成功的代码，跨域会遇到各种各样的问题；反之，跨域能够执行的代码，本地均能执行。在JQuery + Ajax方式下，由于JQuery对Ajax进行了定制的封装，本地访问能够获取XML形式的结果，跨域通过Ajax访问只能获得JSON格式的数据。

总结要点：

根据服务端的服务提示，基于C#的Web服务（.asmx文件形式），服务端只接受来自客户端的POST方式的请求。

基于Ajax跨域访问服务端默认的‘contentType’为‘application/json’，切记！设置为其他类型访问将失败。

返回的data值与请求时设置的‘dataType’有关，dataType的设置不会影响对服务器的请求，其影响的是数据自服务器返回后JQuery执行的针对性的解析操作：

默认（不设置），返回一个JSON对象；

dataType : “json”：dataType的默认值，返回一个JSON对象；

dataType : “xml”：调用服务成功，但在客户端本地解析数据将失败；

dataType : “html”：得到的结果为格式化了的JSON字符串；

dataType : “script”：调用服务成功，但在客户端本地解析数据将失败；

dataType : “text”：得到的结果为格式化了的JSON字符串。

总之，只要在客户端请求数据中正确指定了URL和contentType，则总能成功访问服务端接口（服务），客户端需要根据本地的需求正确指定dataType以便正确解析数据。

C# ビルド Web サービスプロジェクトの戦闘 (2)

概要

環境

.asmx ファイル

SOAP (百度百科事典)

Ajax (非同期 JavaScript および XML)

クロスドメインアクセス

服务端回顾

标准Ajax方式

本地访问（客户端和服务器端同一台主机或属于同一个域）

跨域访问（客户端和服务器处于不同的域）

JQuery + Ajax方式

本地访问

跨域访问

小结

おすすめ

C# ビルド Web サービス プロジェクトの戦闘 (2)

概要

環境

.asmx ファイル

SOAP (百度百科事典)

Ajax (非同期 JavaScript および XML)

クロスドメイン アクセス

服务端回顾

标准Ajax方式

本地访问（客户端和服务器端同一台主机或属于同一个域）

跨域访问（客户端和服务器处于不同的域）

JQuery + Ajax方式

本地访问

跨域访问

小结

おすすめ

C# ビルド Web サービスプロジェクトの戦闘 (2)

クロスドメインアクセス