Ajax入門

2018/11/26 2021/12/13

Ajaxとは、HTMLページ内（クライアント）から、外部API（サーバサイド）へ非同期通信するための実装形態のことです。

ページ全体を読み直さずに、ページの一部を書き換える仕組みのことです。

Ajaxを実装しているWebアプリで有名なのが GoogleMap ですよね。

JavaScript での実装がメジャーでしたが、昨今では（2014年以降） jQuery で書く方法の方がメジャーになっています。

仕事では主に Laravel での開発を行っているのですが、Ajax 通信をつかって API を呼び出すケースがあったのでこの機会に勉強しました。

今回は Ajax についてのエントリーです。

まずは基本の書式を学んで、そのあと簡単なコードを書いてみようと思います。

今回の演習のデモはこちら

基本の書式


$.ajax( {  // ajax の非同期通信として ajaxメソッドを使用
  // 以下Ajax のオプション指定
  type: リクエストタイプ,
  url: リクエスト送信先のURL,
}).done(function(data, textStatus, jqXHR){
  // 成功の場合の処理
     ：
}).fail(function(jqXHR, textStatus, errorThrown){
  // エラーの場合処理
     ：
} );

ポイント

Ajax を用いて url を非同期に読み込む書式です。$.ajax() は jqXHR オブジェクトを返します。
このオブジェクトの done()メソッド でコールバック関数を指定することでデータを受け取ることができます。
失敗した場合のコールバック関数は fail()メソッド で指定します。

Ajaxの初期設定 | $.ajaxSetup()

$.ajax() を呼び出す際のオプションの値をあらかじめ設定します。


// $.ajax()を呼び出す際の options の値をあらかじめ設定
$.ajaxSetup({
  type: "POST",
  timeout: 10000, // 10sec
});
// $.ajax()を呼び出す。
$.ajax({
  url: "../getdata.php",
  data: { "id": 345 ),
}).done(function(data){ ... });

Ajaxでよく使用するオプション | $.ajax()

Ajax メソッドで使用するオプションではキーと値のペアで指定します。

type:

主に GET か POST を指定します。受け取るときは GET、送信するときは POST。

url:

読み込み先または送信先の URL を指定します。

例えば URL をたたいて API を呼び出し、結果を JSON で受け取るとき。


$.ajax({
  type: "POST",
  url: baseURL + '/message_read_api',
  dataType: "json",
  data: null
});

datatype:

json や jsonp などのデータ形式を指定します。

datatype がないと自動判断されます。

ただし、指定しておくと何のデータ形式がわかりやすいし間違った形式を自動判断されることがないです。

data:

サーバに送信するフォームデータを指定します。


$.ajax({
  type: "GET",
  url: 'https://api.laraweb/data.json',
  dataType: "json",
  data: {p1 : 'hoge', p2: 'fuga' }
});

この書き方の場合、https://api.laraweb/data.json?p1=hoge&p2=fuga になります。

演習

Ajax を使って非同期で「sample2.html」を読み込んでみます。

今回の演習のデモはこちら

Sample.html

Ajax 通信を使って sample2.html を読み込む処理を書きます。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function(){ // 遅延処理
$('#button').click(
function() {
  $.ajax({
    type: 'GET',
    url: 'sample2.html', // url: は読み込むURLを表す
    dataType: 'html', // 読み込むデータの種類を記入
  }).done(function (results) {
    // 通信成功時の処理
    $('#text').html(results);
  }).fail(function (err) {
    // 通信失敗時の処理
    alert('ファイルの取得に失敗しました。');
  });
}
);
});
</script>
</head>
<body>
<input type="button" id="button" value="「sample2.html」取得" />
<br>
<div id="text"></div>
</body>
</html>

遅延処理について | $(document.ready)

これはHTML（＝DOM）の読み込みが終わったら function() の中の処理を実行するという意味です。


$(document).ready(function(){
  // 何かしらの処理
});

ちなみに以下の書き方も同じ動作をします。


$(function(){
 // HTML の読み込みが終わった時点で処理が実行される
});

jQuery(function(){
// HTML の読み込みが終わった時点で処理が実行される
});

Sample2.html

読み込み先のファイルを作成します。普通の HTML ファイルです。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sample2</title>
</head>
<body>
<h1>「Sample2.html」取得成功！</h1>
<p>このように ajax を使うとリロードせずに表示させることができます。</p>
</body>
</html>