最近、AjaxはWebサービスを訪れる際にクロスドメインの問題に遭遇しました。オンラインで情報を検索し、次のように要約しました(彼らの多くはそれらをうまくコピーしたと考えています)
<< JSONを使用してデータを転送し、JSONPに頼ってクロスドメイン>>
まず、実装されたコードを追加します。
フロントエンドコード:
$ .ajax({type: "get"、url: "http://localhost/service1.asmx/getelevatorstatusjsondata?jsoncallback =?"、datatype: "jsonp"、jsonp: "json"、data: "" ""、ungent:fultis(restr(suld); i ++){alert(data [i] .id + " - " + data [i] .name)、function(a、b、c){alert(c)};サーバーコード:
/// <summary> ///ステータスデータ情報を取得するList <SendDicdate> SearchList = XmlSerializeHelper.xmldeserializefromfile <list <senddicdate >>(@configutil.servicepath + configutil.getConfigbykey( "xmlpath") + "query directive information.xml"、encoding.utf8); foreach(SearchListのSendDicDateアイテム){String key = item.portno + " - " + item.bordrate + " - " + item.sendtype;リスト<DeviceInfo> deviceInfolist =(list <deviceInfo>)Context.cache.get(key); Elevatordatas.add(deviceInfolist); } string result = ""; dataContractJSonserializer json = new DataContractJSonserializer(EleverAdatas.getType()); (MemoryStream Stream = new MemoryStream()){json.WriteObject(Stream、EleveTordatas); result = encoding.utf8.getString(stream.toarray()); } string jsoncallback = httpcontext.current.request ["jsoncallback"]; result = jsoncallback + '(' + result + ')'; httpcontext.current.response.write(result); httpcontext.current.response.end(); }C#
上記は、C#サーバーを呼び出す実装コードで、以下はJava側です。パラメーターは異なる場合がありますが、原則は同じです
Java:
文字列callbackfunname = context.request ["callbackparam"]; context.response.write(callbackfunname + "([{/" name/":/" john/"}])");PS:クライアントのJSONPパラメーターは、パラメーターをURLに渡し、JSONPCallbackパラメーターのパラメーター名を渡すために使用されます。発音することは困難であり、簡単に言えば:
JSONP: ""
jsonpcallback: ""
ちなみに:Chromeブラウザでは、ヘッダー情報コンテキストを設定することもできます。Response.AddHeader( "Access-Control-Allow-Origin"、 "*");サーバー上でクロスドメイン要求の目的を達成し、AJAXの次のパラメーターを設定する必要はありません
データタイプ: "jsonp"、jsonp: "callbackparam"、jsonpcallback: "jsonpcallback1"
データは、通常のAJAX要求モードで取得できます。
以下が原則です。他の人が説明したことを読んだとき、それは非常に合理的に感じます:
1。よく知られている問題。 Ajaxは、ドメイン間でアクセスする許可なしに通常のファイルを直接要求します。静的ページ、動的Webページ、Webサービス、またはWCFであろうと、クロスドメインのリクエストである限り、それは正しくありません。
2。しかし、WebページでJSファイルを呼び出すとき、それらはクロスドメインであるかどうかによって影響を受けることがありません(それだけでなく、属性「SRC」を持つすべてのタグには、クロスドメイン機能があることもわかりました。
3。したがって、この段階では、純粋なWeb(ActiveXコントロール、サーバープロキシ、将来のHTML5ウェブケットなどを介してドメイン間のデータにアクセスする場合、クライアントが呼び出してさらに処理できるようにリモートサーバーのJS形式ファイルにデータをロードしようとすることができます。
4.複雑なデータを簡潔に説明できるJSONと呼ばれる純粋な文字データ形式があることを知っています。さらに良いのは、JSONがJSによってネイティブにサポートされているため、クライアントはあなたが望むようにこの形式でデータを処理できることです。
5。このソリューションが出てきています。 Webクライアントは、JSフォーマットファイル(通常はjsonを接尾辞として)を呼び出し、呼び出しスクリプトと同じ方法でCross-Domainサーバーで動的に生成します。サーバーがJSONファイルを動的に生成したい理由は、クライアントが必要とするデータをロードすることであることは明らかです。
6.クライアントがJSONファイルを正常に呼び出すと、必要なデータを取得します。残りは、彼自身のニーズに応じてそれを処理して表示することです。リモートデータを取得するこの方法は、Ajaxと非常によく似ていますが、実際には異なります。
7.クライアントがデータを使用するように促進するために、非公式の伝送プロトコルが徐々に形成されました。人々はそれをjsonpと呼んでいます。このプロトコルの重要なポイントの1つは、ユーザーがコールバックパラメーターをサーバーに渡すことを許可することです。サーバーがデータを返すと、このコールバックパラメーターを関数名として使用してJSONデータをラップし、クライアントが独自の関数をカスタマイズして戻りデータを自動的に処理できるようにします。
スマート開発者は、サーバーが提供するJSスクリプトが動的に生成されている限り、パラメーターを渡して「XXX関数を呼び出すJSコードが必要です。それを返してください。
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> </title> <script = "text/javascript"> //フライト情報query query query query query result flight flight handler = function = function(data){light sults you 'yuan firice'+firic piao ' + data.tickets +' Zhang); }; // JSONPサービスのURLアドレスを提供します(アドレスのタイプに関係なく、最終的な返品値はJavaScriptコードの一部です) //スクリプトタグを作成し、その属性を設定するvar script.createelement( 'script'); script.setattribute( 'src'、url); //スクリプトタグをヘッドに追加すると、呼び出しが始まります//document.getelementsbytagname('head') [0] .AppendChild(Script); </script> </head> <body> </body> </html> <!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transital.dtd" xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> untitled page </title> <script type = "text/javascript" src = jquery.min.js "> </script> <script =" text/javaScript "> jquery(a)。 「get "、async:false、url:" http://flightquery.com/jsonp/flightresult.aspx?code=ca1998 "、dataType:" jsonp "、jsonp:" callback "、//リクエストハンドラーまたはページに渡されて、jsonp name name of jsonp callback name is(defally:callback) jsonpcallback: "flighthandler"、//カスタマイズされたJSONPコールバック関数名、デフォルト、ランダム関数名はjQueryによって自動的に生成されますか、それとも書くことができますか? "?"? "?"? Zhang。 ')、function(){' fail ')}}};少し奇妙ではありませんか?今回、関数が乱れたのはなぜですか?そして、それは実際に正常に実行されました!ハハ、これはjQueryの信用です。 jQueryがJSONPタイプのajaxを処理すると(私は文句を言うしかありません。JQueryはJSONPもAjaxに分類しますが、実際には同じものではありません)、コールバック関数を自動的に生成し、成功属性メソッドのデータを取り出して呼び出します。とてもいいですか?