非同期処理を覚える！jQueryでajaxを利用する方法【初心者向け】
プログラミング初心者向けに、jQueryでajaxを使って非同期処理をする方法を解説しています。Webサイトを作る上でajaxを利用すれば非同期通信でリロードせず表示することが可能なので、ぜひ使い方を覚えておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事を書いた人
テックアカデミーマガジン編集部
JavaScriptのライブラリであるjQueryでのAjaxの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
Ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。
非同期処理によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。
目次
- 非同期処理とは
- Ajaxとは
- jQueryでのAjaxの書き方
- jQueryでの$.ajaxを実際に書いてみよう
- jQueryの$.ajaxの引数settingsで利用できるパラメーターまとめ
- jQueryの$.ajaxでのGETとは
- jQueryの$.ajaxでのPOSTとは
- まとめ：jQueryの$.ajaxを活用してユーザー体験を最適化させよう！
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
田島メンター！Ajaxとは何でしょうか？
ページ全体を読み直さずに、ページの一部を書き換える仕組みのことだよ。
そういうWebアプリ多いですよねー。
少し前から当たり前に使われるようになってるよね。さっそくAjaxを書いてみよう！
非同期処理とは
別の記事にて説明をしておりますので、こちらを先にご覧になることをお勧めします。
https://techacademy.jp/magazine/21141
Ajaxとは
Ajax（エイジャックス）とは、「Asynchronous JavaScript And XML」の略で JavaScriptやJavaScriptのフレームワークもしくはライブラリを使用して行われる非同期処理のことです。
通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、Ajaxを使用すればリロードせずにページの内容を変更できます。
そのためサーバーの負荷軽減やリロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。
Ajaxが使用されているページの代表例がGoogle Mapです。
地図をドラッグするときに、ページ外の地図をリロードなしで表示できます。
JavaScriptのフレームワークはいくつかありますが、その中でも本記事ではjQueryを利用しAjaxの実装を行ってみます。
jQueryでのAjaxの書き方
Ajaxの基本となる書き方を紹介していきます。
jQueryでは$.ajaxを利用することでAjaxを使えます。
以下のようにscriptタグでjQueryのライブラリを読み込んでおき、さらにべつのscriptタグで以下のように処理を記述します。
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$( function() {
$.ajax( {
//実行する処理。
} );
} );
</script>
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
jQueryでの$.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.6.1.min.js"></script>
<script>
$(function() {
$('#button').click(
function() {
$.ajax({
url: 'sample2.html',
dataType: 'html'
}).done(function(html) {
$('#text').html(data);
}).fail(function() {
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などのメジャーなファイルを読み込むことができます。
doneですが、無事ファイルが読み込めた時の処理を記入します。
逆にfailにはファイルが読み込めなかった時の処理を記入します。
Safariを使って表示の確認をしてみましょう。
ボタンを押してみて、ボタンの下にsample2の内容が表示されれば成功です。リロードせずに表示できていることがわかります。
jQueryの$.ajaxの引数settingsで利用できるパラメーターまとめ
settingsには上記で出てきたものを含め、利用可能なパラメーターがあります。
以下にいくつかご紹介します。
| パラメーター名 | 解説 |
| async | 非同期通信かどうかを指定します。非同期通信の場合は true、同期通信の場合は falseを設定します。 |
| data | サーバに送信するデータを指定します。 |
| dataType | 期待するサーバの応答データの形式を指定します。指定された形式に従い、応答データを評価します。
指定しない場合は、応答データのMIMEタイプから自動的に判断します。 |
| type | “POST” もしくは “GET” を指定します。 |
| url | アクセス先のURLを指定します。 |
jQueryの$.ajaxでのGETとは
typeに ‘GET’ を指定することでGETが実行できます。
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(function () {
$.ajax({
url: 'sample2.html',
type: 'GET',
dataType: 'html'
}).done(function(html) {
console.log(html);
}).fail(function() {
alert('エラーが起きました');
});
});
</script>
jQueryの$.ajaxでのPOSTとは
typeに ‘POST’ を指定することでPOSTが実行できます。
POSTするデータはdataパラメータに設定をします。
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(function () {
$.ajax({
url: 'sample2.html',
type: 'POST',
dataType: 'json',
data: { id = 1 }
}).done(function(json) {
console.log(json);
}).fail(function() {
alert('エラーが起きました');
});
});
</script>
まとめ：jQueryの$.ajaxを活用してユーザー体験を最適化させよう！
今回はajaxの基礎について解説していきました。
非常に簡単なサンプルでしたが、Ajaxの便利さは分かっていただけたと思います。
Ajaxはページのユーザビリティーを一つ上に押し上げてくれます。ぜひとも習得を目指しましょう。
Ajaxって自分のサイトに設置してあるファイルしか利用できないんですか？
基本的にはそうなんだ。ドメインが同じでなければいけないんだよね。
ただ、Ajaxでは、PHPファイルにもアクセスしたり出来るんだよね。
PHPプログラムで外部のサイトにアクセスしたり、データベースに接続したりが出来る感じですか？
そうそう。その結果をAjaxで受け取ることが出来るんだよ。Ajaxは使える幅が広いので覚えておきたいね。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
