【Ajax】Ajaxの非同期通信を使った入力フォームのメッセージ取得方法

Ajax

はじめに

この記事では、Ajaxを使って入力フォームに入力した文字を非同期通信で取得する方法を紹介します。

結構複雑なコードですので、とりあえずコピペして動作確認してみてください。以下のような動作になります。

test.php

 

test_ajax.php

 

コードの解説

ページロード時に実行されるイベントリスナーの登録

 

Buttonにクリックイベントを付与

 

非同期通信を管理するオブジェクトのインスタンス化

XMLHttpRequestにはいくつかプロパティがあります。興味がある方は以下のリンクより確認してください。

XMLHttpRequestオブジェクトのメソッドとプロパティ

XMLHttpRequest についてのメモ

 

通信状態が変化したタイミングで呼び出されるイベントハンドラー

onreadystatechange内でreadyStateプロパティを使ってHTTP通信状態を確認できます。

戻り値は0~4まであり、readyState=4は全ての応答データを取得済みになったときにtrueを返します。

 

HTTPステータスコードの取得

ホームページのエラーでみたことがあると思います。「403 Forbidden」や「500 Internal Server Error」などがこれに当たります。

status = 200 は処理が成功したときに返される値です。

 

本体応答をテキストとして取得

 

ポストデータの処理

非同期通信を行う場合はfalse、同期通信を行う場合はtrueを第三引数に使用します。

POSTを使用したい場合は以下のように記述します。

GETは送信できる情報量に制限がありますので、数百バイトを超えるデータを扱う場合はPOSTを利用することをおすすめします。

 

HTTPリクエストを送信

リクエストをサーバーへ送信する際に使用します。GETの場合はURLにパラメータとして記述しますので、nullを引数に代入しておきます。

POSTを利用する場合は以下のように書き換えてください。

GETを使用する場合

POSTを使用する場合

 

トップへ戻る

タイトルとURLをコピーしました