こんにちは！
デザイナーのひろきちです！
夏ですね、暑いですね。
こんなに毎日暑いとjqueryなどを使ってクールにコードを書いてみたくなります。
前まではjsなどで動きとかを付けたいときは全部プラグイン任せって感じだったのですが、少し調べて簡単なものは自分でコードをかくようにしてます。
そっちのほうが色々機能を変更できたりと効率がよかったりします。
そこで今回はAjaxを使って他のページの情報をひとつのページで読み込む方法を試していきます！。
jqueryの.loadを使えば似たようなことは出来るのですが、今回は色々融通が効くAjaxを使いました。
まずAjaxとはなにか。
Ajax（エイジャックス、アジャックス、アヤックス [要出典]）は、
ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。 XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。
wiki参照
これで見るとちょいとややこしいですが、要するに非同期通信を使ってウェブページのデータを取得できるといった感じでしょうか。
読み方は「エイジャックス」が一般的っぽいです。
僕ははじめ「アジャックス」と読んでいましたが。
ではコードをどうぞ！
HTML
<p id="button"> <a href="#"> クリック </a> </p> <div id="result"> ここに結果が表示されます。 </div>
HTMLでは他のページを読み込むトリガーとなるボタンを設置します。
結果を#resultに表示するようになってます。
CSS
#button a{
padding: 10px;
list-style: none;
overflow: hidden;
}
#result{
margin-top: 10px;
margin: 20px;
display: block;
padding: 10px;
border: 1px solid #ddd;
opacity: 0;
}
CSSではボタンがクリックされると結果がふわっと表示されるように#resultのopacityを0にしています。
JS
$(function(){
$('#button').click(function(){
$('#result').animate({
opacity: 1
},1000);
$.ajax({
type: 'GET',
url: 'result.html',
dataType: 'html',
success: function(data) {
$('#result').html($(data));
},
error:function() {
$('#result').html('読み込みに失敗しました');
}
});
});
});
result.html
<body> <p>読み込んだHTML</p> </body>
jqueryではボタンを押したときに同じ階層にあるresult.htmlのデータを持ってくるという風に書き方です。
結果表示にanimateを使いました。
なにかエラーが起こったときは「読み込みに失敗しました」と表示されます。
短いコードで簡単にできました。
DEMO
ちょっとつまずいた点は最初ローカルでこれを作ったのですが、Chromeで表示するとコンソールにこんなエラーが出ました。
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
どうやらChromeではローカルでAjaxは使えない様です。
Firefoxで確認すると表示できました。
以上、「jQueryの$.ajaxで他のページを読み込む！」でした。
実際に使える場面が多いこのAjax。
またプラグイン化でもしようかなと思ってます。
では。
