Ajax クロスドメイン呼び出し Web サービス実装コード_JavaScript スキル
最近、web サービスにアクセスするときに ajax でクロスドメインの問題が発生したため、オンラインで情報を検索し、次のようにまとめました (多くは、他の人の良いと思われる要約をコピーしたものです)
> を実行します
実装したコードから始めましょう:
フロントエンド コード:
$.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 + '(' + result + ')';
httpcontext.current.response.write(result);
httpcontext.current.response.end();
}
c#
上記は c# サーバーを呼び出すための実装コードです。以下は java 側です。パラメータは異なる場合がありますが、原理は同じです。
java:
string callbackfunname = context.request["callbackparam"];
context.response.write(callbackfunname + "([ { \"name\":\"john\"}])");
追記: クライアントの jsonp パラメータは、url を通じてパラメータを渡すために使用され、jsonpcallback パラメータのパラメータ名が渡されます。少し混乱しますが、平たく言うと次のようになります。
jsonp: ""
jsonpcallback:""
ちなみに: chrome ブラウザでは、クロスの目的を達成するために、サーバー側でヘッダー情報 context.response.addheader("access-control-allow-origin", "*"); を設定することもできます。 -domain リクエスト。また、次の ajax パラメータを設定する必要はありません。
datatype : "jsonp", jsonp: "callbackparam", jsonpcallback:"jsonpcallback1"
データは通常の ajax リクエストを通じて取得できます。
原則は次のとおりです。他の人が説明した内容を読むと、それは理にかなっているようです。
1. よく知られている問題として、通常のファイルに対する ajax 直接リクエストには、静的ページ、動的 web ページ、web サービス、または wcf のいずれであっても、ドメインを越えた不正アクセスの問題があります。クロスドメインリクエストであるため、許可されていません;
2. ただし、webページ上でjsファイルを呼び出す場合、クロスドメインであるかどうかに影響を受けないこともわかりました（それだけでなく、「src」属性を持つタグはすべてクロスであることもわかりました） -ドメイン機能 (
など)3. 現段階では、純粋な web 側 (activex コントロール、サーバー側プロキシ、および将来の html5 websocket は含まれません) を介してドメインを越えてデータにアクセスしたい場合、存在するのは 1 つだけであると判断できます。可能性があり、それはデータにリモート アクセスすることです。サーバーは、クライアントの呼び出しとさらなる処理のために、データを js 形式のファイルにロードしようとします。
4. 複雑なデータを簡潔に記述することができる、json と呼ばれる純粋な文字データ形式があることはすでにご存知です。さらに優れているのは、json も js によってネイティブにサポートされているため、クライアントはこの形式のデータをほとんど処理できることです。必要に応じて。 ;
5. これで、ソリューションの準備は完了です。web クライアントは、スクリプトを呼び出すのとまったく同じ方法で、クロスドメイン サーバー上で動的に生成された js 形式のファイル (通常は接尾辞として json を付けます) を呼び出します。サーバーが json ファイルを動的に生成する目的は、クライアントが必要とするデータをそのファイルにロードすることであることは明らかです。
6. クライアントは、json ファイルの呼び出しに成功すると、必要なデータを取得します。残りは、独自のニーズに従って処理および表示します。リモート データを取得するこの方法は、ajax に非常によく似ています。実際には同じではありません。
7. クライアントがデータを使用しやすくするために、非公式の送信プロトコルが徐々に形成されてきました。人々はそれを jsonp と呼んでいます。このプロトコルの重要なポイントの 1 つは、ユーザーがコールバック パラメーターをサーバーに渡せるようにすることです。このコールバック パラメータは json データをラップする関数名として使用されるため、クライアントは返されたデータを自動的に処理するように独自の関数をカスタマイズできます。
賢い開発者であれば、サーバーが提供する js スクリプトが動的に生成されている限り、呼び出し元はパラメーターを渡してサーバーに「ピースが欲しい」と伝えることができると簡単に考えることができます。 xxx 関数を呼び出す js コードを返してください。」すると、サーバーはクライアントのニーズに応じて js スクリプトを生成し、応答します。
<!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><title></title><script type="text/javascript">// 得到航班信息查询结果后的回调函数var flightHandler =function(data){
alert('你查询的航班结果是：piao价 '+ data.price +' 元，'+'余piao '+ data.tickets +' 张。');
}; // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）var url ="http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签，设置其属性var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
//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-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title><script type="text/javascript" src=jquery.min.js"></script><script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){
alert('您查询到航班信息：piao价： '+ json.price +' 元，余piao： '+ json.tickets +' 张。');
},
error: function(){
alert('fail');
}
});
}); </script></head><body></body></html>それは少し奇妙ではありませんか？なぜ今回はflighthandler関数を書かなかったのでしょうか?そして実際にそれはうまくいきました！これは jquery の功績で、jquery が jsonp タイプの ajax を処理するとき (jquery は jsonp を ajax に分類することもありますが、実際には同じものではありません)、jsonp タイプの ajax を処理するときに、それを自動的に生成します。関数をコールバックして、success 属性メソッドが呼び出すデータを取り出すのは素晴らしいことではないでしょうか?
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7356
15
1628
14
1353
52
1265
25
1214
29
jQuery AJAX リクエストで発生した 403 エラーを解決する方法
Feb 20, 2024 am 10:07 AM
タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。
jQuery AJAXリクエスト403エラーを解決する方法
Feb 19, 2024 pm 05:55 PM
jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。
Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?
Mar 09, 2024 pm 05:36 PM
Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。
jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか?
Feb 23, 2024 pm 04:27 PM
jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る
PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション
Jun 06, 2024 pm 01:12 PM
Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。
PHP と Ajax: オートコンプリート提案エンジンの構築
Jun 02, 2024 pm 08:39 PM
PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。
Javaを使用してWebServiceを呼び出す方法
Dec 29, 2023 pm 02:32 PM
Java を使用して WebService を呼び出す方法の手順には、特定のコード サンプルが必要です。Web サービスは、ネットワークを介してさまざまな機能を提供する Web ベースのアプリケーション プログラム インターフェイスです。 Java 開発では、多くの場合、Web サービスを使用して他のシステムと対話する必要があります。この記事では、Java を使用して WebService を呼び出す方法と、具体的なコード例を紹介します。 1. WebService を理解する WebService は、XML 形式を使用した標準化された通信プロトコルです。
Ajax機能を利用した非同期データ交換
Jan 26, 2024 am 09:41 AM
Ajax 機能を使用して非同期データ対話を実現する方法 インターネットと Web テクノロジーの発展に伴い、フロントエンドとバックエンド間のデータ対話が非常に重要になってきました。ページの更新やフォームの送信などの従来のデータ操作方法では、ユーザーのニーズを満たすことができなくなりました。 Ajax (非同期 JavaScript および XML) は、非同期データ対話のための重要なツールとなっています。 Ajax により、Web で JavaScript と XMLHttpRequest オブジェクトを使用できるようになります
