スクレイピングで取得した文字を変数表示

質問

javascriptでiphoneアプリを作成中です。
ゲームにあたり、自社サーバーのhoge.ne.jp/read1000.php上のデータベース
情報をスクレイピンクしてiphone上で表示させます。

下記により、「hoge.ne.jp/read1000.php」にあるソースの中から
「吉本」の文字をスクレイピング表示することが可能です。

****【hoge.ne.jp/read1000.php】(DBサーバー)********************

　　　<td class="class3_sql_name">吉本</td>

****【hogehoge.com/index.html】(iphone仮想サーバー)**************

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.xdomainajax.js"></script>
<script>
url = 'http://hoge.ne.jp/read1000.php';
$.get(url, function(data){
var content3_sql_name = $(data.responseText).find('.class3_sql_name').text();
$("#text3_sql_name").text(content3_sql_name);
});
</script>

<div id="text3_sql_name"></div>　 //←この部分にhoge.ne.jpからスクレイピング
　　　　　　　　　　　　　　　　　　　　　　した吉本の文字が表示される

************************************************************

やりたいこと

ここで取得できた「吉本」の文字を変数としてjavascript上で表示させたいと考えています。
下記のようにしたのですがグローバル変数、ローカル変数とも表示出来ません。
どうすれば表示できるでしょうか?

****【hogehoge.com/index.html】(iphone仮想サーバー)*************

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.xdomainajax.js"></script>
<script>
url = 'http://hoge.ne.jp/read1000.php';
$.get(url, function(data){
var content3_sql_name = $(data.responseText).find('.class3_sql_name').text();
$("#text3_sql_name").text(content3_sql_name);
//テスト用としてグローバル変数追加
content3=$("#text3_sql_name").text(content3_sql_name);
});
</script>

<script>
document.write(""+content3_sql_name+"");
</script>

<script>
document.write(""+content3+"");
</script>

　↑上記のふたつとも表示出来ない

宜しくお願い致します。

回答No.3

Taiyonoshizuku

＞実は、ここで拾ってきた数値は<select><option></option><select>
＞の中で使おうとしています。
変な後出しは回答が遠回りになるからやめたほうがいいよ。

単純に項目を一つ設定したいなら
var ajaxValue = 'a';
$option = $('<option>').html(ajaxValue).val(ajaxValue);
$('#select').append($options);

これで<select id="select">に<option value="a">a</option>
になるけど、こういうことじゃない？
これがDOMの操作。

補足

有難うございます。
早速、テストさせて戴きました。
まず、ご指導戴きましたソースをそのまま用いてみたのですが、残念ながら表示することができませんでした。
あまりにご迷惑をお掛けしているため、なんとか、今回限りで当方の力でものにすべく、このソースをベースにGoogleで類似ソースを数日調べてみたのですが、やはり表示ができるソースがありませんでした。
わずかな違いなのかもしれません。
本当に申し訳ございません。
もし、お時間が許されるのであれば、ご指導をお願いいたします。
本当に申し訳ございません。

回答No.2

Taiyonoshizuku

<script>
url = 'http://hoge.ne.jp/read1000.php';
$.get(url, function(data){
var content3_sql_name = $(data.responseText).find('.class3_sql_name').text();
global: false;
$("#text3_sql_name").text(content3_sql_name);
global: true;
}
// $.ajax(文字列)なんて関数あったっけ？
// あったならごめん
$.ajax(content3_sql_name);
$(document).ajaxComplete(function(){
document.write(""+content3_sql_name+"");
});
</script>

取得以外のものが表示されないのはdocument.write使ってるからじゃないの？
DOM構築後にdocument.write使うと全部塗り替えられちゃうよ

補足

本当に有難うございます。

<script>
url = 'http://hoge.ne.jp/read1000.php';
$.get(url, function(data){
var content3_sql_name = $(data.responseText).find('.class3_sql_name').text();
global: false;
$("#text3_sql_name").text(content3_sql_name);
global: true;
$("p2").append(""+content3_sql_name+"");
});
</script>

<p2></p2>

とすることで<p2></p2>欄に表示できました。
本当に有難うございました。
心より御礼申し上げます。

【新たな困りごと】

実は、ここで拾ってきた数値は<select><option></option><select>
の中で使おうとしています。

ところが、<p2></p2>だけだと「拾ってきた数値が表示」されるのですが、
<select><option><p2></p2></option><select>とした途端、表示されなくなります。

しかしながら、
<select><option><script>…………</script></option><select>

のように、<option></option>の間がjavascriptだと表示されるのです。
document.write にこだわっていたのはこの理由からでした。

従い、DOMではなく、<script>…………</script>内で数値が表示されるようにしたいです。

またはDOMのままでも<select><option></option><select>で使用可能であればいいのですが….

document.write 以外で、この用途に合う方法はありませんでしょうか?

本当にお手数をおかけし申し訳ございません。
不可能なことを言っているのかもしれません。
お忙しい中大変恐縮ですが、お時間が許されるのであれば、ご指導のほど宜しくお願い致します。

回答No.1

Taiyonoshizuku

実行される順番をかんがえてみ？

$.getが非同期で実行される→read1000.phpを取得する
document.write(""+content3_sql_name+"");が実行される
document.write(""+content3+"");が実行される

やっとこさread1000.phpの処理が終了してコールバック関数が呼ばれ
var content3_sql_name = $(data.responseText).find('.class3_sql_name').text();
$("#text3_sql_name").text(content3_sql_name);
//テスト用としてグローバル変数追加
content3=$("#text3_sql_name").text(content3_sql_name);
が実行される。

そう考えればおのずと変数に値が入っていないことがわかると思う。
同期処理にするか、コールバック関数が呼ばれた後にしか利用できないってこと。

補足

ご指導、有難うございます。
順番にまで思い至りませんでした。
早速、下記の2種類の方法を試してみました。

<script>
url = 'http://hoge.ne.jp/read1000.php';
$.get(url, function(data){
var content3_sql_name = $(data.responseText).find('.class3_sql_name').text();
global: false;
$("#text3_sql_name").text(content3_sql_name);
global: true;
document.write(""+content3_sql_name+"");
});
</script>

上記の結果
見事にスクレイピングしたデータを表示しました。
しかしながら、その結果以外のコンテンツは一切表示されません。
少なくとも、この方法で順番を遅らせ、表示させることが出来ることがわかりました。

そこで、下記のようにしました。

<script>
url = 'http://hoge.ne.jp/read1000.php';
$.get(url, function(data){
var content3_sql_name = $(data.responseText).find('.class3_sql_name').text();
global: false;
$("#text3_sql_name").text(content3_sql_name);
global: true;
}
$.ajax(content3_sql_name);
$(document).ajaxComplete(function(){
document.write(""+content3_sql_name+"");
});
</script>

結果、何も表示されません。

あと一息かと思いますので、何卒、ご指導宜しくお願い致します。