非同期処理を覚える！jQueryでajaxを利用する方法【初心者向け】
プログラミング初心者向けに、jQueryでajaxを使って非同期処理をする方法を解説しています。Webサイトを作る上でajaxを利用すれば非同期通信でリロードせず表示することが可能なので、ぜひ使い方を覚えておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでajaxの使い方を解説しています。非同期通信によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。
ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
ajaxとは
ajax（エイジャックス）とは、JavaScriptを使用して行われる非同期処理のことを言います。
通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを使用すればリロードせずにページの内容を変更することができます。
サーバーにアクセスすることなくページを変更できるのでサーバーの負荷軽減や、リロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。
元々、JavaScriptでの実装がメジャーでしたが、昨今はjQueryで書く方法の方がメジャーになっています。
有名な使用されているページとしてはgoogleMapが挙げられます。地図をドラッグするときに、ページ外の地図をリロードなしで表示することができます。その処理を担っているのがajaxです。
田島メンター！ajaxとは何でしょうか？
ページ全体を読み直さずに、ページの一部を書き換える仕組みのことだよ。
そういうWebアプリ多いですよねー。
少し前から当たり前に使われるようになってるよね。さっそく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はページのユーザビリティーを一つ上に押し上げてくれます。ぜひとも習得を目指しましょう。
ajaxって自分のサイトに設置してあるファイルしか利用できないんですか？
基本的にはそうなんだ。ドメインが同じでなければいけないんだよね。ただ、ajaxでは、PHPファイルにもアクセスしたり出来るんだよね。
PHPプログラムで外部のサイトにアクセスしたり、データベースに接続したりが出来る感じですか？
そうそう。その結果をajaxで受け取ることが出来るんだよ。ajaxは使える幅が広いので覚えておきたいね。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
