• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

Ajax処理を実装しよう!(サーバーサイド編)

2017年9月22日

  • このエントリーをはてなブックマークに追加

こんにちは、Webプログラマの篠田です。

少しずつ、涼しい日が増えてきて、そろそろタオルケット一枚で寝るのは危険な季節になってきました。

天気が良ければ、週末にでも冬服を洗濯して、衣替えの準備を始めようかと思います。

今回は、前回の「Ajax処理を実装しよう!(フロントエンド編)」に引き続き「Ajax」を使ったサーバーサイド側の仕組みについて、ご紹介します。

この記事の目次

  • 1 フロントから送られてくるデータの確認
  • 2 PHPで受け取るときのポイント
  • 3 「getName.php」を作成する
  • 4 Ajaxによるセキュリティの考慮
  • 5 まとめ

フロントから送られてくるデータの確認

サーバーサイドのプログラムは、PHPで用意するという仮定で進めていきます。

以前に作成したAjax処理をもう一度確認してみます。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
async: true,// 非同期処理
url: 'http://localhost/getName.php',
type: "POST",
dataType: 'json',
data: {
'user_id': 21
}
}).done(function (data) {
console.log(data.name + "を取得しました。");
}).fail(function () {
console.log("処理に失敗しました。");
});

送り先のプログラムは「http://localhost/getName.php」です。

送信方法は「POST」、戻り値は「JSON」です。

そして、送るデータは「添字:user_id」に「21」が代入されている状態です。

PHPで受け取るときのポイント

受け取り側のプログラムは「getName.php」として作成します。
※セキュリティやバリデーションは一切考慮しませんので、あしからず。

Ajaxのサーバーサイドプログラムを作るときのポイントは2つです。

送信方法によるデータの受け取り

Ajaxに限ったことではないですが、どういった方法でデータが送られてくるかというのは重要です。

今回であれば「POST」で送られてくるので、受け取り側は「POST」形式でデータを待ち構える必要があります。

また、どういった名前(添字)が付けられているかというのも確認します。

受け取り側では「$_POST[‘user_id’]」として、「21」という値を受け取ることができます。

フロントへ値を返す戻り値の型

次に重要になるのが、サーバーサイドで処理をした内容をどのようにして、フロント(ブラウザ)に返せば良いのかという点です。

Ajax処理によっては、フロントから投げっぱなしで、サーバーサイドでの処理結果を返さない場合もあります。

今回の場合は、戻り値が必要となり「JSON」で戻して欲しいという指示があります。

PHPで「JSON」を取り扱う時に利用するのが「json_encode」関数です。

また、フロント側で「data.name」として、利用していますので、連想配列で作成した「JSON」データを戻り値として用意すると良いことがわかります。

「getName.php」を作成する

先程の2点のポイントを踏まえて、「getName.php」を作ってみます。

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
//送られてくるuser_idをPOSTで受け取ります。
$userId = $_POST['user_id'];
 
//この部分をデーターベースからの取得処理に変えることで柔軟なプログラムになります。
if ($userId == 21) {
$userList['name'] = "篠田";
} else {
//ユーザーIDが一致しなければfalseを表示してエラーとします。
echo false;
}
 
//連想配列「$userList」をJSONに変換して表示します。
echo json_encode($userList);

フロントへの戻し方は、フレームワークなどによって変わりますが、「echo」または「return」で、返すことができます。

正常に動けば、ブラウザのコンソール画面に「篠田を取得しました。」と表示されます。

Ajaxによるセキュリティの考慮

Ajaxを利用する場合に、セキュリティ面での考慮が必要となります。

(1)直接、呼び出しプログラムが実行されても起動しない。

(2)CSRF(クロス・サイト・リクエスト・フォージェリ)対策をする。

(3)バリデーションチェックによる、データの整合性確認をする。

SQLをサーバーサイドで利用する場合は、当然「SQLインジェクション」の対策も必要となります。

普段のプログラムを作成するときと同様かそれ以上にセキュリティ対策は慎重に行うことが重要です。

まとめ

2回に分けて、Ajaxの簡単な実装方法をご紹介してきました。

Ajax処理を使うことで、ユーザーにとってよりリッチ(死語ですかねw)で、ストレスが少ないWebサービスを実現することができるようになります。

是非、Ajaxをプログラム開発に活用してみてください。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • 03925a4a0ad56c073bc27c4bcf9590ca_m

    AjaxとSESSIONの甘い罠にご注意!

    13 8月, 2018

  • 8542e99874865ca981e0a84b47a70cf5_m

    Ajax処理を実装しよう!(フロントエンド編)

    11 9月, 2017

  • 068ebcafb2d7bde01bdb4b6e267788fa_s

    .gitignorがないのにファイルがコミットできないときの対処方法

    26 3月, 2018

プログラマー募集
  • Next story DTP入門part.1 グラフィックデザインでよく聞く特色とは?
  • Previous story knockout.js入門編「WordPressのフォームプラグインにリアルタイムバリデーションを実装する」

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.