Ajax クロスドメイン呼び出し Web サービス実装コード

最近、Webサービスにアクセスするときにajaxでクロスドメインの問題が発生しました。私はオンラインで情報を検索し、次のようにまとめました（その多くは、要約が良いと思われた他の人からのコピーです）

924751e801ab9c0f82f6e8818c8c9f36> ;

まず、私の実装コード:

フロントエンドコード:

$.ajax({
 type: "get",
 url: "http://localhost/Service1.asmx/getElevatorStatusJsonData?jsoncallback=?",
 dataType: "jsonp",
 jsonp: "json",
 data: "",
 success: function (result) {
 var data = eval(result);
 for (var i = 0; i < data.length; i++) {
 alert(data[i].ID + "--" + data[i].Name);
 }
 },
 error: function (a, b, c) {
 alert(c);
 }
 });

サーバーコード:

/// <summary>
/// 获取状态数据信息
/// </summary>
/// <returns></returns>
[WebMethod]
public void getElevatorStatusJsonData()
{
List<List<DeviceInfo>> elevatordatas = new List<List<DeviceInfo>>();
List<SendDicdate> searchList = XmlSerializeHelper.XmlDeserializeFromFile<List<SendDicdate>>(@ConfigUtil.servicePath + ConfigUtil.getConfigByKey("xmlPath") + "查询指令信息.xml", Encoding.UTF8);
foreach (SendDicdate item in searchList)
{
string key = item.portno + "-" + item.bordrate + "-" + item.sendtype;
List<DeviceInfo> deviceInfoList = (List<DeviceInfo>)Context.Cache.Get(key);
elevatordatas.Add(deviceInfoList);
}
 
String result = "";
DataContractJsonSerializer json = new DataContractJsonSerializer(elevatordatas.GetType());
using (MemoryStream stream = new MemoryStream())
{
json.WriteObject(stream, elevatordatas);
result = Encoding.UTF8.GetString(stream.ToArray());
}
String jsoncallback = HttpContext.Current.Request["jsoncallback"];
result = jsoncallback + &#39;(&#39; + result + &#39;)&#39;;
HttpContext.Current.Response.Write(result);
HttpContext.Current.Response.End();
 
}

c#

上記は、C# サーバーを呼び出すための実装コードです。以下は Java 側です。パラメータは異なる場合がありますが、原則は同じです

java:

String callbackFunName = context.Request["callbackparam"];
　　context.Response.Write(callbackFunName + "([ { \"name\":\"John\"}])");

PS: クライアントの jsonp パラメータは、URL 経由でパラメータを渡し、パラメータ名を渡すために使用されます。 jsonpCallback パラメータ。平たく言うと、次のようになります。

jsonp: ""

jsonpCallback:""

ちなみに、Chrome ブラウザでは、ヘッダー情報コンテキストを設定することもできます。 .Response.AddHeader("Access-Control-Allow-Origin", "*"); サーバー側でクロスドメインリクエストを実現するため、次の ajax パラメーターを設定する必要はありません

dataType : "jsonp",
　　jsonp: "callbackparam",
　　jsonpCallback:"jsonpCallback1"

通常のajaxリクエストメソッドでデータを取得できます。

他の人が説明したことを読むと、次のような原理が理解できます:

1. よく知られている問題は、Ajax が通常のファイルを直接リクエストするため、クロスドメインの不正アクセスの問題があります。静的ページ、動的 Web ページ、または Web ページである場合、クロスドメイン要求である限り、サービス、WCF は許可されません

2. ただし、js ファイルを呼び出す場合も同様です。 Web ページでは、それがクロスドメインかどうかには影響されません (それだけでなく、「src」を持つすべてのファイルがこの属性のタグにすべてクロスドメイン機能を持っていることもわかりました。たとえば、

3)。現段階では、純粋なWeb側（ActiveXコントロール、サーバー側プロキシ、将来のHTML5 WebSocketなどは含まれません）を介してクロスドメインにアクセスしたい場合、データの可能性は1つだけであると判断できます。クライアントの呼び出しとさらなる処理のために、データをリモート サーバー上の js 形式ファイルにロードしようとすることです。

4. 偶然ですが、複雑なデータを簡潔に記述することができる JSON と呼ばれる純粋な文字データ形式があることはすでにわかっています。さらに優れているのは、JSON も js によってネイティブにサポートされているため、クライアントはこの形式のデータをほぼ希望どおりに処理できることです

5. このようにして、ソリューションの準備が整い、Web クライアントはスクリプトを使用してそれを呼び出すことができます。クロスドメイン サーバーで動的に生成された js 形式のファイル (通常は JSON をサフィックスとして使用) を呼び出すのと同じメソッドです。明らかに、サーバーが JSON ファイルを動的に生成する理由は、クライアントが必要とするデータをロードするためです。 6. クライアントが JSON ファイルの呼び出しに成功すると、残りは必要に応じてデータを処理して表示します。この方法は AJAX によく似ていますが、実際には AJAX と似ています。

7. クライアントがデータを使用しやすくするために、JSONP と呼ばれる非公式の送信プロトコルが徐々に形成されてきました。このプロトコルの重要な点の 1 つは、ユーザーがコールバック パラメーターを渡すことができることです。サーバーがデータを返すとき、サーバーはこのコールバック パラメーターを関数名として使用して JSON データをラップするため、クライアントは返されたデータを自動的に処理する独自の関数をカスタマイズできます。賢い開発者はそれを簡単に考えることができます。サーバーが提供する限り、js スクリプトは動的に生成されるため、呼び出し元はパラメーターを渡してサーバーに「XXX 関数を呼び出す JS コードが必要なので、それを返してください」と伝えることができます。クライアントのニーズに従い、js スクリプトが生成され、応答されました。

コールバック関数が自動的に生成され、success 属性メソッドが呼び出すデータが取得されます。

の実装コードに関連するその他の記事については、 ajax クロスドメイン呼び出し Web サービス、PHP 中国語 Web サイトにご注意ください