Ajaxで非同期通信を使う(PHP)

アップデートの際に表示が崩れてしまいました。
現段階で未修正です。
申し訳ございませんがご了承ください。

Webアプリケーションでよく使われるAjaxの仕組みとその例をPHPコードで紹介します。

Ajaxの仕組み

Ajaxとは、

JavaScript の組み込みクラスである XMLHttpRequest を利用した非同期通信を利用して、ウェブブラウザ上で既存の枠組みにとらわれないインタフェースを実現するための技術。実際には Ajax という技術が存在しているわけではなく、DHTML (JavaScript + CSS) と XMLHttpRequest にサーバーサイドのウェブアプリケーションとを加えたあわせ技のことを Ajax と呼ぶようになった。
– はてなキーワード より転載引用

簡単に、都道府県を選択したときに対応する市区町村をセレクトボックスに反映するプログラムを作ります。

完成図

プロジェクト構成

index.php ・・・ セレクトボックスを表示するメイン画面
const.php ・・・ 市区町村と都道府県の対応配列を宣言（本来はDB）
ajax.php ・・・ Ajaxでリクエストした際に処理を行う部分
ajax.js ・・・ クライアント側で処理を行う部分(JSのイベント登録)

index.php

   $val) : ?>






  

ajax.php

const.php

 '北海道',
        '2' => '青森県',
        '3' => '秋田県',
];

$city = [
        '1' => [
                ['city_cd' => '1' , 'city_name' => '札幌市'],
                ['city_cd' => '2' , 'city_name' => '函館市'],
                ['city_cd' => '3' , 'city_name' => '旭川市']
        ],
        '2' => [
                ['city_cd' => '1' , 'city_name' => '青森市'],
                ['city_cd' => '2' , 'city_name' => '八戸市']
        ],
        '3' => [
                ['city_cd' => '1' , 'city_name' =>  '秋田市']
        ],
];