ホームページ >ウェブフロントエンド >jsチュートリアル >jsonのcross-domain_javascriptスキルについて簡単に説明します
この記事の主な理由は、他の人が以前に json クロスドメインとクロスドメインについて話しているのを聞いたことがあるからですが、私はまだ混乱していて、1 つのことしか知りません。そこで、激怒してさまざまな情報を読み、存在するかどうかを確認しました。何か間違っていたので修正してください^_^
まず、ブラウザーには同一生成元ポリシーという非常に重要なセキュリティ制限があることを理解してください。異なるドメインのクライアント スクリプトは、明示的な承認なしに相互にリソースを読み取ることができません。クロスドメインとは、異なるソースを意味します~
簡単に言うと、プロトコル、ポート、ドメイン名が違えばクロスドメインです!
ただし、詳細なフロントエンド プログラミングを行う場合、クロスドメイン操作が必然的に必要になります。現時点では、「同一生成元ポリシー」は厳しすぎるようです。
解決策:
1. jsonp を使用してクロスドメインの問題を解決します: (GET リクエストの場合のみ)
実装原則: 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは、同じオリジンを必要とせずに、どこからでも JavaScript ファイルをロードできます。
つまり、JSONP の考え方は、関数名についてサーバーと合意し、ファイルをリクエストするとサーバーが JavaScript を返すというものです。この JavaScript は、合意した関数を呼び出し、データをパラメータとして渡します。非常に偶然ですが (実際にはそうではありません)、JSON のデータ形式は JavaScript 言語のオブジェクトの形式とまったく同じです。したがって、このオブジェクトは、合意した関数で直接使用できます。
JavaScript コードを使用して
を解決しますvar eleScript = document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = "http://example2.com/getinfo.php"; document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
jquery を使用して解決します
$.ajax({ url: http://跨域的dns/document!searchJSONResult.action, type: "GET", dataType: 'jsonp', //主要是这里和原来的json改变了! jsonp: 'jsoncallback', })
2. HTML5 の window.postMessage メソッドを使用して、ドメイン間でデータを送信します (IE8+、FireFox、Chrome、Opera およびその他のブラウザーとのみ互換性があります)
window.postMessage(message,targetOrigin) メソッドは、HTML5 で新しく導入された機能で、ウィンドウ オブジェクトが同じオリジンに属しているか、異なるオリジンに属しているかに関係なく、他のウィンドウ オブジェクトにメッセージを送信するために使用できます。
---------- とりあえずはこの 2 つの解決策を紹介しましょう。実際には他にもたくさんあります。後で 1 つずつ追加します。 ----------- ----