今日はJavaScriptのライブラリにあるjQueryでのajax(エイジャックス）を使う方法についての記事です。
まずajax(エイジャックス）ってなに？
とか、「非同期処理って何かすると得あるの？」とか、そういう初心者が気になるポイントも中心に解説します。
この記事を最後まで読むと、ajax(エイジャックス）を使いこなせるようになります。
ajax(エイジャックス）とは？
ajax(エイジャックス）とは、Asynchronous（エイシンクラナス）とJavaScriptに、XMLを組み合わせて作られた造語です。
Asynchronous（エイシンクラナス）とは、非同期、タイミングを合わせず複数の処理または通信を行う方法を指します。
XMLはマークアップ言語です、それにWEBページを動かすための言語、JavaScriptが組み合わさってできたのが、ajax(エイジャックス）です。
具体的に何ができんの？って話なんですけど、非同期通信を、「JavaScriptの技術で実行すること」ができます。
ちょいちょい待て。非同期通信ってなんすか？は今から説明します。
非同期通信とは様々な処理を並列に行える通信方法のこと
ajax(エイジャックス）の具体的な説明に入る前に、
- 同期通信と
- 非同期通信
について勉強しましょう。
この2つの用語はどちらも「サーバーへの通信方法」として使われる言葉です。
基本的にはユーザーがWEBサイトを閲覧しようとした場合、
- サーバー側との通信（リクエスト）
- データ交換
- ページの更新（画面遷移・レスポンス）
この３つの流れが一般的です。この一般的な通信の流れを同期通信と言います。
この一般的な通信の流れが時にはユーザーにとってストレスにもなります。
レスポンスの処理が完了するまで、当然時間が掛かりますので、仕方ない部分もありますが、
それらを解消できるのが「非同期通信」という仕組みです。
非同期通信は、「タスクの順序を無視する方法」であり、サーバ側がレスポンスの処理を行っている最中でもユーザーは新たな操作ができます。
なので、同期通信とは違い上記3つの通信の流れをフル無視して自由に通信が行えるので、ユーザーにとっても便利な仕組みです。
ajax(エイジャックス）が具体的に使われているWEBサービス
ajax(エイジャックス）、非同期通信の良さがわかったところで、より具体的にどこでどんな風に使われているのか、簡単に具体例をいくつか紹介します。
その後に実際の実装方法やらを見ていきましょう！
検索エンジン
ajax(エイジャックス）が使われている代表的なものとしては検索エンジンですね。
例えば画像のように、検索したいキーワードを全て入力しなくても、予測されたキーワードの候補が並ぶ仕組みにもajax(エイジャックス）は利用されています。
キーワードを入力しながら、サーバー側でも処理を行い予測キーワードだけを検索フォームに出力しています。
地図アプリ
Googleマップのような地図アプリにも、ajax(エイジャックス）は使われています。
地図をスクロールしても、ページ全体を更新する必要なく地図を表示させ続けることができるのは、ajax(エイジャックス）のお陰です。
今Googleマップを利用しているすべての人類は、ajax(エイジャックス）に感謝しかありません。
SNS
ツイッターのタイムラインにも、ajax(エイジャックス）の技術が使われています。
ブラウザをスクロールするだけで過去のタイムラインを表示できる機能は、ajax(エイジャックス）様様です。
ECサイト
楽天市場とか、Yahooショッピングとか、扱う商品の数が多いショッピングサイトにもajax(エイジャックス）の技術は使われています。
ページを移動するたびに更新の処理が発生すると、ユーザーへの負担も大きいので、ajax(エイジャックス）でページを移動させずに商品を次々に表示させる機能は活躍しています。
ajaxは、パフォーマンスを高めるメリットがある
色々これでもかというくらい、実例を紹介した通りajaxはサイトのパフォーマンスを高めるメリットがあります。
コーポレートサイトやECサイトに「地図アプリやSNSを企業サイトに導入したい」という場合は、ajaxの技術を使えば簡単に搭載することができます。
そんなメリットだらけのajax(エイジャックス）の使い方は今から解説します！
ajax(エイジャックス）の基本的な書き方と実装方法
それではajax(エイジャックス）の基本的な書き方を、jQueryを使って解説します。
なんでJavaScriptじゃなくてjQueryなの？
わかりやすい記述で実装できるようになるからです。
メリットもデメリットもありますが、複数の非同期通信を行わない限りとりあえずは、jQueryでも事足りるので、一旦はjQueryの使い方をマスターしてから、複数の非同期通信を扱うJavaScriptやaxiosを使って実装すればいいかと思います。
基本的な書き方
$.ajax({
type: 'POST', // HTTPリクエストメソッドの指定
url: '/bar/foo.txt', // 送信先URLの指定
async: true, // 非同期通信フラグの指定
dataType: 'json', // 受信するデータタイプの指定
timeout: 10000, // タイムアウト時間の指定
data: {
id: 1,
name: 'brisk' // クエリパラメータの指定。サーバーに送信したいデータを指定
}
})
.done(function(data) {
// 通信が成功したときの処理
})
.fail(function() {
// 通信が失敗したときの処理
});
.always(function() {
// 通信が完了したときの処理
});オプションの説明は下記にまとめました。
| オプション名 | 説明 |
| type | HTTPリクエストメソッドを指定 GETかPOSTなど。初期値: GET |
| url | リクエストを送信する先のURL 省略した場合、呼び出し元に送信 |
| async | 非同期通信フラグ 初期値: true（非同期通信） falseだと同期通信になる |
| dataType | サーバーからレスポンスされるデータの型を指定 返ってくるデータのMIMEタイプとの整合性をとる 値の例: xml、html、script、json、jsonp、text |
| timeout | タイムアウト時間をミリ秒で指定 |
| data | サーバーに送信する値 オブジェクトが指定された場合、 クエリー文字列に変換されてGETリクエストとして付加される |
GET/POSTとは？違いについて
ajaxのパラメーターの中にある
- type: ‘POST’
- type: ‘GET’
の違いについて解説します。
WEBサイトが画面に映る仕組みは冒頭で紹介したので簡単に説明しますが、
WEBサイトが置かれているサーバーとの間では、毎回リクエスト（要求）とレスポンス（応答）が繰り返し行われて画面が表示されます。
このリクエストを行う際に、サーバーに対して「何らかのデータ」を渡したい場合があります。
例えば、
- 見たい商品や動画のID
- ページ移動する際のページ番号
- ログイン画面に入力するメールアドレスやパスワード
- 注文画面に入力する名前や住所などの個人情報
などのデータです。
このような、パソコンからサーバーに送るデータのことを「リクエストパラメーター」と言います。
GETやPOSTというのは、リクエストの方式の1つです。
GET、POSTの違いは、サーバーへのリクエストパラメーターの送り方にあります。
POST方式とは？
POSTは、情報を「送信」するためのリクエストのことです。
例えば、ログインIDや個人情報などをリクエストする際に使用します。
個人情報やパスワードを入力する場合、膨大なデータを送信する場合は必ずこのPOST方式を使います。
GET方式とは？
GET方式は、URLの末尾にパラメータをくっつけて送る方法です。
表示したい商品や動画のID、ページ番号などを取得するためのリクエストのことです。
末尾に「?」や「&」の付いた、長いURL、画像のような形式のものがGET方式でリクエストで渡されたデータになります。
通常URLを直接入力や、お気に入りからのアクセス、ページ内のリンクをクリックした場合は、基本的にGET方式でリクエストが送られます。
GET方式は、URL上にパラメーターが丸見えになってしまうことがデメリットでもあります。
個人情報やパスワードがURL上に記載されてしまうのはまずいので、そのような個人情報を扱うときはPOST方式を使います。
使い分け方は、ざっくりこのような形です。
ajax(エイジャックス）とは？から始まり、基本的な使い方やメリット、POST形式、GET形式などの違いについてもまとめて解説しました。
さらに深い内容は追々記事にできたらさせて頂きます。では。
