jsWaffleでAndroidアプリを作ろう！クイズアプリ編⑬
サクウェブＴＶはコチラ↓↓↓
簡単な方法はload()メソッドを使う方法です。
例えば以下のソースをindex.htmlとして保存したとします。
jQueryは以下のように読み込んでおいてください。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="script.js"></script>
<title>Ａｊａｘテスト</title>
<body>
<div id="box">
</div>
</body>
</head>
</html>
これをブラウザで表示しても当然何も表示されません。
※chromeでの実行はxamppなどをインストールしたローカルサーバで行ってください。
→ localhost/ajax/index.html みたいな感じで
では、もう一つ同じディレクトリにajax.htmlを作成しましょう。
ソースは以下の通りです。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Ａｊａｘテスト２</title>
<body>
<div id="ajax">
読み込み成功ならココが表示されます！
</div>
</body>
</head>
</html>
これをブラウザで表示すると「読み込み成功ならココが表示されます！」と表示されます。当然ですが。。。
しかし、この段階でindex.htmlには何も表示されない状態は変わりません。
では、同じディレクトリに更にscript.jsを作成し以下を記述します。
$(function(){
$("#box").load("./ajax.html #ajax");
});
これで、index.htmlをブラウザで表示してみてください。
すると、index.htmlには文字を何も記述していないにも関わらず、ajax.htmlに記述してある文字と同じものが表示されたはずです。
つまり、Ajaxを使用して、index.htmlの<div id="box"></div>に、ajax.htmlの<div id="ajax"></div>の部分を挿入してあげたということです。
はい。Ajaxからサーバにアクセスし、ajax.htmlという外部のファイルから情報をとってこれることが確認できました。
ちなみに、load()メソッドはAjaxを非常に簡略的にしようするためのメソッドです。
細かい設定を行ったうえでAjaxを使用したい場合は
例えば上記スクリプトを$.ajax()を使用して書きかえるとすると
$(function(){
$.ajax({
url: "./ajax.html #ajax",
datatype:"html",
success: function(data){
$("#box").html(data);
}
});
});
引数で様々な設定ができます。
ちなみに設定の項目の説明は
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
が詳しいので見てもらうといいと思います。
load()を使用する場合、それでも設定を少し変えたいような場合は
$.ajaxSetup()を使用すれば設定できます。
簡単ですがこれでAjaxの説明を終えます。
