For Want Of A Better Word

クロスドメインのJSの利用とAjax通信の整理

   

jsonpとかcors設定とか、どういうときに必要か良く分からなくなったので整理。

 

①シンプルに別のドメインに配置されているJSファイルを読む。

これはどのブラウザでも問題なし。外部JSのfunctionをローカルで実施することも可能。みんな普通にやっている奴。

 

②別ドメインにAjaxリクエストをする。

 

この場合が注意が必要で、基本はエラーとなってしまう。

apacheの設定か、jsonpで回避する。

apache設定例

リクエストを受ける側のサーバーに以下の設定を行う。.htaccessでもOK

これでIE11,chrome,firefoxはOK。

古いIEの場合はこの設定では回避できないので、XDomainRequestを利用してリクエストすることになる。

以下 IEの場合条件分岐した例

 

 

JSONPについて

以下のリンクが分かりやすかった

https://qiita.com/stkdev/items/f3e6cae58ab73faee502

http://tsujimotter.info/2013/01/03/

 

おおよその流れとして、、

・予めコールバック関数(ajaxのデータを受け取ってから動かす関数)を用意しておいて、scriptタグのsrcにリクエスト先ファイルを設定し、そのパラメータにコールバック関数名を渡しておく。
・被リクエスト側はそのコールバック関数名にデータを入れた形式で「スクリプトとして返却する」(headerの出力に注意。Jsonではないよ。)
・戻ってきた時にスクリプトは実行される。
別ドメインでもスクリプトのプロパティとしてのファイルは取得できるので、それを応用した形。
良くある外部サービスのタグで以下のような形のやつがそれ。

 

考えた人すげーなー

 

参考リンク

■CORS参考リンク

https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control

 

mautic利用時の.htaccess設定(クロスドメインとアクセス制御)

 

 

 

 

 - javascript | js, jquery

  関連記事

[js][GoogleAnalytics]GoogleAnalyticsのデフォルトのスクリプトについて調査

googleAnalyticsで貼り付けるスクリプトの中身ってなにやっているの& …

[js] chart.jsのグラフをwkhtmltopdfでpdfに保存する

表題のことをしたいとなった。   結論目的は果たされたのだけどハマリポ …

【Javascript】グラフ・チャート描画用のjsライブラリまとめ

ちょっとWEBでグラフを描画しようと思いまして、jsのライブラリを物色。 色々サ …

【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (4) Casper動くもGoogleトレンドのバグ?にはまる

casperjsで値を取るため 念のためもう一回埋め込み用のタグからURLを確認 …

mautic利用時の.htaccess設定(クロスドメインとアクセス制御)

mauticをインストールは下記参照。 http://qiita.com/bez …