@blog.justoneplanet.info

日々勉強

クロスドメインAjaxとは(1)

■前置き

XMLHttpRequestを使って、他ドメインのサーバーと通信は出来ない。

どのようにすれば他サーバーからデーターを取得できるのか?

  1. XMLHttpRequestで同ドメイン内の(PHPなどの)プロキシを使用し、プロキシが他のサーバーと通信する
  2. scriptタグを書き換えて通信する
  3. 隠しフレームを使う

今回は2番を使う。

■簡単な流れ

headタグ内にと空のスクリプトタグを記述

(スクリプト書き換え用)

<script type="text/javascript" charset="utf-8" id="import"></script>

データが戻ってきた場合の処理を定義

(下記はテスト用でアラート)

function callBackFunction(JSON){
    alert('test');
}

スクリプト要素の書き換え関数と書き換えるタイミングを定義

(下記はロード時に実行)

window.onload = function(){
    var originalScriptNode = document.getElementById('import');
    var newScriptNode = document.createElement('script');
    newScriptNode.src =  '/*ここにスクリプトのsrc属性値を記入(他ドメイン)*/';
    newScriptNode.charset = 'utf-8';
    newScriptNode.id = 'import';
    originalScriptNode.parentNode.replaceChild(newScriptNode, originalScriptNode);
}

上記スクリプトで入れ替えるJavaScriptにというように記述

(→このデータを受け取った瞬間にcallBackFunctionが実行される)

callBackFunction(/*引数*/);

つまり、scriptタグのsrc属性には他ドメインも可能という特性を利用している

コメントはまだありません»

No comments yet.

RSS feed for comments on this post.TrackBack URL

Leave a comment