Webservice_javascript スキルを呼び出す XmlHttpRequest の経験を共有します

まず、JS に対する JSON の利便性を考慮して、JSON を介してデータをリクエストしたり返したりすることを検討してください。 JS で xmlHttpRequest オブジェクトをインスタンス化し、オンラインの指示に従ってアドレス (asmx ページ アドレス/Web メソッド名) を POST します。 RequestHeader の Content-Type を application/json に設定し、SOAPAction を Web メソッド名に設定します。 Web メソッドのパラメータは JSON 形式で送信されます。
コードは次のとおりです:

コードをコピーします コードは次のとおりです:

function getXmlHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
{ // IE7、Firefox、Chrome、Opera、Safari 用のコード
xmlHttp = new XMLHttpRequest(); }
else
{ // IE6、IE5 用のコード
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}
return
}
関数 Web サービス; (url, action, data , success, error, complete, failed) {
var xmlHttp = getXmlHttp(); //XMLHttpRequest オブジェクトを取得します
xmlHttp.open('POST', url '/' action, true ); //非同期リクエストデータ
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status == 200 && typeof ( success) == '関数' ) {
success(xmlHttp.responseText);
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (error) == ' function') {
error(xmlHttp.responseText, xmlHttp.status);
}
else if (xmlHttp.status / 100 == 200 && typeof (complete) == '関数') {
complete(xmlHttp.responseText, xmlHttp.status);
}
else if (typeof (failed) == 'function') {
failed(xmlHttp.responseText, xmlHttp) .status);
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8') ;
xmlHttp.setRequestHeader('SOAPAction', action);
xmlHttp.send(data);


例: Webservice1 で HelloWorld メソッドを呼び出します:

コードをコピー コードは次のとおりです:

webservice( '/Webservice1.asmx','HelloWorld','{ }',function (msg) {alert(msg) });

[System.Web.Script.Services] を必ずコメント解除してください。呼び出す前に、Webservice1 で .ScriptService] を実行してください。呼び出し後、ポップアップ警告ウィンドウが表示されます: {"d": "Hello World"}。 Content-Type が text/xml に設定されている場合、警告ウィンドウの内容は Hello World.

この時点では、パラメーター「{}」はまだ JSON 形式ですが、リクエストは XML 形式ですが、Hello World にはパラメーターがないため、コンテンツの形式は無視され、値を取得できます。普通に戻ってきました。
サーバー側で HelloWorld メソッドを変更する場合は、文字列型パラメータを追加してください。

コードをコピー コードは次のとおりです。

[WebMethod]

public string HelloWorld (string somebody ) {
return "Hello World&Hello, " somebody "!"
}


リクエスターの Content-Type を application/json に戻し、送信を変更します。パラメータを {"somebody": "Krime"} に設定すると、ポップアップ ウィンドウの内容が {d: "Hello World&Hello, Krime!"} になります。

ただし、この時点で Content-Type を text/xml に直接変更すると、呼び出し後にサーバーはエラーを報告します: System.InvalidOperationException: 要求形式が無効です: text/xml; System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() 内 System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()
そこで、Web サービスのデバッグ ページの例に従って、パラメーターの形式も変更します。パラメータ コードをコピーします:

コードは次のとおりです:

これは XML の結果を正常に返すことができるはずですよね?結果は予期せぬもので、サーバーは依然として同じエラーを報告しました。
長い間苦労した結果、気が狂いそうになりました。もしかして、ASP.NET が突然 XML を理解できなくなったのでしょうか?この時点で、Web サービスのデバッグ ページの例に戻って詳しく見てみると、最終的に問題が見つかりました:

コードをコピー コードは次のとおりです。

POST /WebServiceTest/Webservice1.asmx HTTP/1.1
ホスト: localhost
Content-Type: text/xml;
Content-Length: 長さ
SOAPAction: "http://tempuri.org/HelloWorld"

< ;soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http ://schemas.xmlsoap.org/soap /envelope/">


< somebody>string

JSON データをリクエストする場合と同様に、その後に / が続きます。また、SOAPAction メソッド名の前に名前空間を付ける必要があります。そこで、XMLHttpRequest のリクエスト ヘッダーを変更し、それに応じて URL とアクションを変更し、最終的には通常どおり XML 結果を返しました。 soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www. w3 .org/2001/XMLSchema">Hello World&Hello, Krime!
その後、テストを続けたところ、リクエストのコンテンツ タイプが application/json の場合、SOAPAction は完全に無視できるが、/ メソッド名はURL の後に追加されない場合、サーバーはデータを返しません。 text/xml をリクエストする場合は、SOAPAction が必要であり、その前に名前空間を付ける必要があります。URL の後に / メソッド名を付けることはできません。
最後に、要約の後、コードが最終的な外観に変更されました:

コードをコピーします コードは次のとおりです。

function getXmlHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
{ // IE7、Firefox、Chrome、Opera、Safari 用のコード
xmlHttp = new XMLHttpRequest( );
}
else
{ // IE6、IE5 用のコード
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}
return xmlHttp;
}
function webservice(url, options) {
if (typeof (url) == 'object') { //オプションに URL を書き込みます
options = url; url .url;
}
if (!url) return;
if (options.dataType.toLowerCase() == 'json') { //JSON 形式のデータをリクエストする場合は、 URL "/メソッド名" の後にあります
url = url '/' options.method;
}
var xmlHttp = getXmlHttp(); //XMLHttpRequest オブジェクトを取得します
xmlHttp.open(' POST', url, true); //非同期リクエストデータ
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status) == 200 && typeof (options.success) == 'function') {
options.success(xmlHttp.responseText);
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (options.error) == 'function') {
options.error(xmlHttp.responseText, xmlHttp.status)
}
else if (xmlHttp) .status / 100 = = 200 && typeof (options.complete) == 'function') {
options.complete(xmlHttp.responseText, xmlHttp.status)
}
else if (typeof (options); .failed) == 'function') {
options.failed(xmlHttp.responseText, xmlHttp.status);
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', options.contentType); //リクエストヘッダーの ContentType を設定します
xmlHttp.setRequestHeader('SOAPAction', options.namespace options.method); //SOAPAction を設定します
xmlHttp.send(options.data) // パラメータ データを送信します
}


リクエスト JSON データ:

コードをコピーします コードは次のとおりです:

window.onload = function () {

var data = '{"somebody": "Krime"}';
var options = {
namespace: 'http://tempuri.org/',
method: 'HelloWorld',
contentType: 'application/json; utf-8'、
dataType: ' json'、
データ: データ、
成功: 関数 (msg) {
alert(msg)
}; >webservice('http://localhost:8003 /WebServiceTest/Webservice1.asmx',
};
XML データのリクエスト:

コードのコピー コードは次のとおりです:

ウィンドウ。 onload = function () {
var data = ''
' ''
''
'/somebody> ;'
''
''; http:// /tempuri.org/'、
メソッド: 'HelloWorld'、
contentType: 'text/xml; charset=utf-8'、
dataType: 'xml'、
データ: データ、
成功: 関数 (msg) {
alert(msg);
}; , オプション);
};


テストは正常です。
注意すべき点は、JSON データをリクエストする場合、戻り値の型が DataTable である場合は、対応するデータ エンティティ クラスの List<> に変換して返す必要があることです。

XML を返す問題を解決する過程で、別の解決策も見つかりました。特定の操作中、ContentType は application/x-www-form-urlencoded に設定されます。データ本体は JSON または XML 形式の SOAP パッケージを使用しませんが、QueryString と同様に「argument1=XXX&argument2=XXX」を使用します。このメソッドは、フォーム データの HTTP POST 形式をシミュレートし、各コントロール値を名前=値のペアとしてエンコードして送信します。

この場合、ページアドレスの後に /method 名を続ける必要もあります。