Ajax通信　職業訓練80日とは

Ajax通信とは？

AjaxとはJavaScriptとXMLファイルを利用した非同期通信のことを言います。非同期通信とはどんなものかというと、Googleマップのように画像変遷をせずにブラウザ上のデータを切り替えるものをイメージしたもらいたいです。

Googleマップを見る際地図の縮尺を変えるたびにページが切り替わっていてはストレスがたまります。

通信の話をするとHTTP通信との違いなどを説明しなくてはいけなくなるので、今回はページを切り替えずにブラウザ上のデータを更新するということに絞って説明します。

JSON形式データ

Ajax通信をするにはブラウザ上で行われる処理に対して行う処理をサーバー上にJSON形式のデータで保存する必要があります。「ファイル名.json」基本的にキーと値からなる連想配列で記述する。

・JSONデータ変換メソッド

JSON.parse(JSONデータの中から利用する文字列データ)返り値はオブジェクト型。

JSON.stringfy(オブジェクト) 返り値はJSON文字列

MLHttpRequestオブジェクト

MLHttpRequestオブジェクトとはAjax機能を利用するためのオブジェクト。new演算子を使ってインスタンスを生成してから使用する。

・MLHttpRequestオブジェクトのプロパティ

・readyState : http通信の取得

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

・status : ステータスコードの取得

・MLHttpRequestオブジェクトのメソッド

・open(メソッド、URL、asyns) : httprクエストの初期化

・send(body) : httpリクエストの送信

・各メソッドの詳細

・openメソッド

（）内のメソッドとはhttpリクエストメソッドのこと、だいたいgetメソッドを使う。URLはJSONファイルのURL。asynsは非同期通信はtrue,同期通信ならfalseで表される。

・sendメソッド

bodyはリクエストの内の本文データ。規定値はnull

readystatechangeイベント

このイベントは通信の状態に変化が発生した際のイベント。同期通信から、非同期通信に切り替わる時、もしくは逆のパターン。

イベントハンドラ名は「onreadystatechange」です。この際にreadyStateプロパティを実行します返り値は2、3、４の数字が返ってきます２＝ロード済。３＝一部の応答を取得。４＝全ての応答データを取得。

また一緒にstatusプロパティを実行します。返り値が200なら通信成功。404ならNot Foundエラーです。

したがって「readyState=4,status=200」であれば正常に通信しているということになります。

まとめ

・Ajax通信をするためにはサーバー上にJSONデータを置いておく

・MLHttpRequestオブジェクトのオープメソッドを使いJSONファイルを非同期通信で取得する。

・readystatechangeイベントの発生処理を行う。主に通信状態の確認。if文を使って「readyState=4,status=200」なら処理内容を記述して実行。elseの場合はエラー処理を行うようにソースコードを入力する

----------------------------------------------------------------------------

結構ざっくりした説明になりましたが、自分の中でなんとかまとまってます。もしかしたら書き直すかも。とりあえず今日はこの辺で失礼します。