🎬

JQueryを使ってAJAXを使う方法

2023/09/11に公開

JavaScript

この記事では

この記事では「AJAXは何か」、「AJAXのメリットとデメリット」、非同期処理を紹介します。
また、JQueryを利用してAJAXの使用方式を見てAJAX書式とプロパティを説明します。
最後はAJAXコードの例を紹介します。

AJAXとは？

AJAXはAsynchronous Javascript + XMLです。

JavaScriptを利用してサーバとブラウザが非同期方式でデータを交換できる通信機能で、クライアントとサーバ間でXMLデータをやり取りする技術です。

非同期処理とは？

ウェブページをリロードせずにデータを読み込む方式です。
ウェブページでその他のコードを要求する場合、ウェブページをリロードして不要なリソースが発生されるが、非同期方式は必要なデータだけを読み込んでリソースの発生が減らすことができす。
AJAXはXMLHttpRequestオブジェクトを利用してサーバにrequestします。
JSONやXML形式で必要なデータだけを受け取り更新するため、それだけのリソースと時間を節約でます。

AJAXのメリット

ウェブページの速度向上します。
サーバの処理が完了するまで待たずに処理可能です。
既存のウェブで不可能だったUIが可能になります。

AJAXのデメリット

ページ移動のない通信によりセキュリティ上の問題が発生する可能性があります。
連続でデータ要求時にサーバー負荷が増加します。
ヒストリーの管理ができないです。
Scriptで作成されているため、デバッグが難しい。

JQueryを利用してAJAXの使用

AJAX書式

$.ajax({
    type : 'post',           // HTTP通信のタイプ(get, post, put など)
    url : '/test',           // リクエストを送信する先のURL
    async : true,            // 非同期化の設定 (default : true)
    headers : {              // Http header
      "Content-Type" : "application/json", // 送信するデータの型
      "X-HTTP-Method-Override" : "POST"
    },
    dataType : 'text',       // サーバから返されるデータの型(html, xml, json, text など)
    data : JSON.stringify({  // 送信するデータの型(Object , String, Array)
      "no" : no,
      "name" : name,
      "nick" : nick
    }),
    success : function(result) { // 成功時に実行されるコールバック関数
        console.log(result);
    },
    error : function(request, status, error) { // 通信に失敗したときに呼ばれるコールバック関数。
        console.log(error)
    }
})

プロパティの説明

url

通信する URL（デフォルト、現在開いているURL）

async

同期非同期の設定(boolean)

type

デフォルトは、「GET」。「GET」か「POST」を指定。「type」ではなく「method」で指定しても可能。

data

サーバーに送信するデータ。文字列やオブジェクト形式で指定可能。

dataType

受信時に受け取るデータタイプを指定。「text」「html」「xml」「json」「jsonp」「script」などが設定可能。省略すると「jQuery」が自動検出・設定してくれる。

beforeSend

AJAX通信開始前に呼ばれるコールバック関数を指定。

success

成功時に実行されるコールバック関数。成功した時のデータの処理を記述する。

error

通信に失敗したときに呼ばれるコールバック関数。通信の失敗したときに、どうするかを記述する。

complete

「Ajax」の通信終了時に呼ばれるコールバック関数。通信の成功・失敗にかかわらず実行される処理。

timeout

通信がエラーとして処理されるまでの時間（ミリ秒）を指定。デフォルトは、「0（制限なし）」。

cache

「GET」方式において、「false」に設定すると、毎回最新データを取得しに行く。キャッシュデータを利用しない設定になる。
デフォルト設定は、「true（キャッシュする）」なので、キャッシュデータを取得していることもある。

AJAXコードの例

//   要求したデータ : {"member_list":[
//    {"id":"aa1","pw":"bb","addr":"cc","tel":"dd"},
//    {"id":"aa2","pw":"bb","addr":"cc","tel":"dd"},
//    {"id":"aa3","pw":"bb","addr":"cc","tel":"dd"}
//  ]}
 
<script>
$(document).ready(function(){
    $("#listButton").click(getMemberList); //id="listButton"タグをクリックすると、function getMemberList()を実行
});
function getMemberList(){
    $.ajax({
        url:"list.jsp",                    //list.jspに AJAX要求
        success:function(data){
            let obj=JSON.parse(data);      //dataをJSON形に変換
            let array=["<ol>"]; 
            obj["member_list"].forEach(
                    member =>  array.push("<li>"+member.id+"</li>")    
                    //JSONにあるmember.idのvalueをliタグに入れてarrayに入れる
            );
            array.push("</ol>");                                   
 
            $("#result").html(array.join(""));  
            //arrayの要素を全部一つに集まてid="result"タグに htmlで出力。
        }
    });    
}
</script>
<body>
    <a href="#" id="listButton">会員一覧</a><br/>
    <div id="result">ここで会員一覧を出力してください。</div>
</body>

まとめ

Ajaxを理解するにはJavaScriptだけではなくHTTP通信の知識も必要で、Webの基礎知識が大切だと思います。
これを読んで、少しでもJQueryを利用してAJAXの使用方式について理解が深まったら幸いです。