※ ChatGPTを利用し、要約された質問です（原文：JSONPでのおかしな挙動）
JSONPでのおかしな挙動
このQ&Aのポイント
最近Ajaxの勉強を始めたものです。クロスドメインでの通信を行うため、レンタルサーバー２個の環境で、JSONPを使って下記のようなコードを記述したところ、無事に動作が確認できました。
ブログとしては、SeesaaとFC2を利用したところ、どちらもNGでした。alertで変数をチェックしたところ、本来「初期値です」というテキストが表示されるはずのところが、nullになっており、どうも該当タグがDOMで認識されていないようです。
関数での変数のスコープの問題かとも思いますが、どうにも理解できなくて困っています。
最近Ajaxの勉強を始めたものです。
クロスドメインでの通信を行うため、レンタルサーバー２個（ドメイン２個）
の環境で、JSONPを使って下記のようなコードを記述したところ、無事に
動作が確認できました。
●HTML（ドメイン１）
<html>
<head>
<title>JSONPテスト</title>
<script type="text/javascript">
function callback(data) {
contents = "姓: " + data.sei + " 名: " + data.mei;
alert(document.getElementById('here').innerHTML); //初期値です
document.getElementById('here').innerHTML = contents;
}
var url = "ドメイン２のURL/callback.js";
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
<div id="here">初期値です</div>
</body>
</html>
●callback.js（ドメイン２）
callback({"sei": "山田", "mei": "太郎"});
ところが、上記のドメイン１の代わりにブログを使い、ドメイン２
としてレンタルサーバーでテストしたところ、
document.getElementById("here") is null
というエラーが出てしまいます。
ブログとしては、SeesaaとFC2を利用したところ、どちらもNGでした。
alertで変数をチェックしたところ、本来「初期値です」というテキスト
が表示されるはずのところが、nullになっており、どうも該当タグが
DOMで認識されていないようです。
一方で、同じく無料ブログにおいて、単純に、
<script type="text/javascript">
alert(document.getElementById('here').innerHTML); //初期値です
</script>
のみを実行すると、こちらはうまくいくのです。
関数での変数のスコープの問題かとも思いますが、どうにも理解でき
なくて困っています。
アドバイスをよろしくお願いいたします。
お礼
ご回答ありがとうございます。 アドバイスの通り対応したところ、無事に動作できました。 レンタルサーバーとブログでは、読み込みに差があるようですね。 ありがとうございました。