非同期処理を覚える！jQueryでajaxを利用する方法【初心者向け】
プログラミング初心者向けに、jQueryでajaxを使って非同期処理をする方法を解説しています。Webサイトを作る上でajaxを利用すれば非同期通信でリロードせず表示することが可能なので、ぜひ使い方を覚えておきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。
JavaScriptのライブラリであるjQueryでajaxの使い方を解説しています。非同期通信によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。
ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
ajaxとは
ajax（エイジャックス）とは、JavaScriptを使用して行われる非同期処理のことを言います。
通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを使用すればリロードせずにページの内容を変更することができます。
サーバーにアクセスすることなくページを変更できるのでサーバーの負荷軽減や、リロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。
元々、JavaScriptでの実装がメジャーでしたが、昨今はjQueryで書く方法の方がメジャーになっています。
有名な使用されているページとしてはgoogleMapが挙げられます。地図をドラッグするときに、ページ外の地図をリロードなしで表示することができます。その処理を担っているのがajaxです。
ajax()の書き方
ajaxの基本となる書き方を紹介していきます、
ajaxはscriptタグ内に処理を書くことができます。
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
$( function() {
$.ajax( {
//実行する処理。
} );
} );
実際に書いてみよう
それでは実際に処理を書いてみましょう。今回はローカルにあるファイルをリロードなしで読み込んでみましょう。
ここで注意ですがChromeではローカルファイルの読み込みができないのでChrome以外のブラウザで実行するようにしてください。
//sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
$('#button').click(
function() {
$.ajax({
url: 'sample2.html',
dataType: 'html',
success: function(data) {
$('#text').html(data);
},
error: function(data) {
alert('error');
}
});
}
);
});
</script>
</head>
<body>
<input type="button" id="button" value="button"/>
<br/>
<div id="text"></div>
</body>
</html>
//sample2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow</title>
</head>
<body>
<p>Sample2</p>
</body>
</html>
urlは読み込むURLを表します。今回の場合「sample2.html」を読み込むのでsample2.htmlを記入してください。
dataTypeは読み込むデータの種類を記入します。今回の場合htmlを読み込むので、htmlと記入してください。
dataTypeはhtmlの他にもjsonやcsvなどのメジャーなファイルを読み込むことができます。
successですが、無事ファイルが読み込めた時の処理を記入します。逆にerrorにはファイルが読み込めなかった時の処理を記入します。
Safariを使って表示の確認をしてみましょう。
ボタンを押してみて、ボタンの下にsample2の内容が表示されれば成功です。リロードせずに表示できていることがわかります。
まとめ
今回はajaxの基礎について解説していきました。非常に簡単なサンプルでしたが、ajaxの便利さは分かっていただけたと思います。ajaxはページのユーザビリティーを一つ上に押し上げてくれます。ぜひとも習得を目指しましょう。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
