非同期通信(Ajax)とはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。今回はこの技術を用いたデータの送信方法、取得方法、参照方法について紹介します。
非同期通信(Ajax)におけるデータの扱い方
前回同様にJQueryを用いた記載方法を紹介します。
データの送信
HTTPリクエストメソッド、送信先のURI、送信するデータを下記のように指定します。
JavaScript
$.ajax({
type: 'POST', //HTTPリクエストメソッドのPOSTを指定します
url: 'POSTするURI', //送信先のURLを指定します
data: { name: ‘値’ }, // dataとして送信するデータを記載します
dataType: 'json' //データの形式を指定します。
}).then (function(result) {
成功時の処理;
}).catch(function(request, status, error) {
エラー時の処理;
});データの取得/参照
HTTPリクエストメソッド、送信先のURI、取得するデータ形式を下記のように指定します。また取得したデータは変数dataに格納されるため、変数dataを操作することで取得したデータを参照することができます。
JavaScript
$(function () {
$.ajax({
type: 'GET', //HTTPリクエストメソッドのGETを指定します
url: 'GETするURI', //送信先のURLを指定します
dataType: 'json' //データの形式を指定します。
}).done(function (data) { //dataの中に取得したデータが格納されており参照可能
成功時の処理;
}).fail(function (data) {
エラー時の処理;
});
});エンジニアからのアドバイス
Ajaxは何をやっているのかよくわからず、はじめは実態が掴みにくいかと思います。「どのパス」に対して「どんなデータ」を「取得 or 送信」するのかという3点を整理しながらデータを動きを意識的に考えていきましょう。