Ajaxの仕組み

Ajaxの仕組み
■ ４．JSONP
■ １．XMLHttpRequest
普通のajaxは別ドメインでは参照出来ない。しかし、
scriptタグでの外部スクリプト参照は別ドメインも参照
可能。
ajaxによる通信はXMLHttpRequest オブジェクトを使用す
る。
◎XMLHttpRequestのメソッド
open("GET" , URL , 非同期かどうか)
send(null)
通信準備
送信
◎XMLHttpRequestのプロパティ
responseText サーバからの応答（テキスト）
responseXML サーバからの応答（XML）
readyState 現在の通信状態（4のとき完了）
status
サーバからの応答状態(200なら成功)
onreadystatechange 非同期通信時、呼び出される関数
※注意
XMLHttpRequestは同一ドメイン間の通信しかできない
別のドメイン（クロスドメイン）は不可。
■ ２．同期通信
単純な例として同期通信を行う。
１．XMLHttpRequestを生成
２．open で URL を指定（同一ドメイン内のみ）
３．send を行う
４．responseText または responseXML に結果が入る。
同期通信の例：
var req = new XMLHttpRequest();
req.open("GET", "http://localhost/test.txt", false);
req.send(null);
document.write(req.responseText);
■ ３．非同期通信
同期通信では通信が終了するまで他の処理・操作が行えな
い。それを避けるには非同期通信を行う。
open を行う際の第三引数を true にすると非同期通信に
なる。非同期通信では、通信完了時の処理を行うために、
onreadystatechangeに呼び出される関数を指定する。
非同期通信の例：
var req = new XMLHttpRequest();
req.onreadystatechange = check;
req.open("GET", "http://localhost/test.txt", true);
req.send(null);
function check()
{
if( req.readyState == 4 && req.status == 200 ){
document.write(req.responseText);
}
}
<script type="text/javascript"
src="http://localhost/jsonp.php"></script>
そこで、scriptタグでXML/JSONを呼び出し、そこに関数名
を渡して呼び出せば、クロスドメインが実現できる。
●外部スクリプトからのデータ受け渡しの例
１．scriptタグでの外部スクリプトで指定したファイルで
以下を記述。
num = 10;
参照元ではnumを表示する。これにより、外部から内部の
変数に値を設定することが可能なことが分かる。
２．次に関数testを作成し、外部スクリプトで以下を試す。
test(10);
参照元では関数testを定義しておく。
function test(num){
document.write(num);
}
これにより、外部ファイルから参照元の関数を呼び出し、
値を渡すことが可能なことが分かる。
３．外部スクリプトをphpで作成し、echo でJavaScriptを
表示してみる。
echo 'test(10)';
これも同じ結果になることがわかる。
４．phpにパラメータとして関数名 test を渡し、それを
呼び出してもらうようにする。
<script type="text/javascript"
src="http://localhost/jsonp.php?callback=test">
</script>
５．最後にphpで関数呼び出し時、JSON文字列を渡すよう
にしてみる。参照元文字列を受け取った後、JSON.parseで
オブジェクトに変換する。

Download Report