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、4の数字が返ってきます2=ロード済。3=一部の応答を取得。4=全ての応答データを取得。
また一緒にstatusプロパティを実行します。返り値が200なら通信成功。404ならNot Foundエラーです。
したがって「readyState=4,status=200」であれば正常に通信しているということになります。
まとめ
・Ajax通信をするためにはサーバー上にJSONデータを置いておく
・MLHttpRequestオブジェクトのオープメソッドを使いJSONファイルを非同期通信で取得する。
・readystatechangeイベントの発生処理を行う。主に通信状態の確認。if文を使って「readyState=4,status=200」なら処理内容を記述して実行。elseの場合はエラー処理を行うようにソースコードを入力する
----------------------------------------------------------------------------
結構ざっくりした説明になりましたが、自分の中でなんとかまとまってます。もしかしたら書き直すかも。とりあえず今日はこの辺で失礼します。
この記事が気に入ったらサポートをしてみませんか?