ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【Javascript,PHP】Ajax、JSON、データフォーマットの種類

AjaxJSON、データフォーマットの種類

Ajax

Asynchronous JavaScript + XML
サーバとの間の通信(データのやり取り)を非同期で行う

同期通信
結果が返されるまで待って、結果を受け取ってから次に進む
非同期通信
結果が返されるまで待って、結果を受け取ってから次に進む

非同期通信では、「通信開始の処理」と、「通信完了後の処理」を分けて設計

利点
ページ遷移せずにサーバーにアクセスできる
readyState

参考:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/readyState
http://qiita.com/ShinyaKato/items/64b6726c361f5377b0f3

0
UNSENT XMLHttpRequestは作られているがopen()をまだ呼んでいない
XHRオブジェクトの作成直後
1
loading
open()が呼ばれている
open()メソッドの呼び出し後
2
HEADERS_RECEIVED
send()が呼ばれていて、 headerとstatusが利用可能
レスポンスヘッダの受信後
3
interactive
responseTextが部分的にデータを持っている
レスポンスボディを受信中(繰り返し実行される)
4
complete
動作の完了
XHR通信(XMLHttpRequest)の完了後
status

サーバがリクエストに対してどのように応答したかが分かる。
readyStateが2以上の時使える。
readyStateが4になった時に最終的な値が確定。

主な戻り値

200
OK
401
Unauthorized 認定されていない,権限のない
403
Forbidden 禁止されている
404
Not Found 見つからない
500
Internal Server Error サーバー内のエラー

さらに詳しい戻り値
https://msdn.microsoft.com/ja-jp/library/ms767625(v=vs.85).aspx

respnseText

参考:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText
http://phpjavascriptroom.com/?t=ajax&p=xmlhttp

DOMstringとして要求した返事を返す。
sendメソッドでサーバーにリクエストしたファイルのダウンロードが完了すると、リクエストの返り値(レスポンスデータ)を取得することができる。

open()

引用:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

リクエストを初期化。 JavaScript から使用。

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

:methodHTTPのメソッド。
"GET"、"POST"、"PUT"、"DELETE"

url
リクエストを送信する URL
async
非同期で操作を実行するか。
true=非同期
false=同期
デフォルトはtrue
user
ユーザー名のオプション
password
パスワードのオプション
onreadystatechange
onreadystatechange
redyState属性が変わる度にイベントハンドラを返す。

onreadystatechangeは一回の通信で何回も呼び出される可能性がある。なのでよく下記の記述がされる。

if(xhr.readyState === 4 && xhr.status === 200)
setRequestHeader()

参考:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/setRequestHeader
http://webos-goodies.jp/archives/50548720.html
WHATWGの記事:https://xhr.spec.whatwg.org/#the-setrequestheader()-method

リクエストヘッダをカスタマイズする場合に使用。

XMLHttpRequest.setRequestHeader(header, value)
header
値をセットするヘッダーの名前(?)
value
ヘッダーボディ(POSTで送る内容)にセットする値

HTTPリクエストヘッダーの値をセットする。
opnen()の後、send()の前に呼び出さなければならない。
もし一つのheaderに対していくつもこのメソッドが呼ばれたら、値は上書きではなく併合(原文:marge)されていく。
セキュリティ上の理由により、いくつかのヘッダーはユーザエージェントからしかコントロールできない。それらのヘッダーは禁じられている?headernameやresponse headernameを含んでいる。
予約語的なものだと解釈したのですが間違っていたら教えてください。)

Forbidden header name
https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name
Forbidden response header name
https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_response_header_name

よくみる例


POSTを送信するときは
Content-Type に application/x-www-form-urlencoded を指定する決まりがある。

req.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');

application/x-www-form-urlencoded
引用:http://www.wdic.org/w/WDIC/application/x-www-form-urlencoded
フォームの送信のさい、クライアントがWebサーバーに送信するContent-Type名の一つ。
データはid=dataの形式で、formが複数ある場合は&で区切られる(form1=data1&form2=data2)
データはURLエンコードされる

URLエンコード
URIで表記できない文字を「%xx」形式で16進数の文字コードとして表現

上記のコードではUTF-8を指定している(文字化け対策?)

JSON.stringify()

引用:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JavaScript の値を JSON 文字列に変換

JSON.stringify(value[, replacer[, space]])

JSON

引用
http://dev.classmethod.jp/etc/concrete-example-of-json/
データ記述言語
コンピュータ内の文字情報や数字情報を記録するためのルール(文法など)
データ交換言語
いろいろなプログラム言語に対応できるデータ記述言語

JavaScriptECMA-262標準第3版 1999年12月)の一部をベースに作られる

  • JavaScriptの中でオブジェクトを記述する書式」
  • 「データを表現するための記法(≒文法)」
  • 表形式では表現が困難な構データを人間に対するある程度の可読性を残しつつ、コンピュータに対しても伝達できるような記法

JSONは2つの構造を基にしている。

  • 名前/値のペアの集まり(オブジェクト)
  • 値の順序付きリスト(配列)
値(value)
数値や文字列等(JavaScriptで用いられる数値や文字列等の値)
メンバー(member)
オブジェクト内の要素
コロン(:)を、文字列値と値ではさんだもの
コロンの左側を「名前(name)」、右側が名前に対する「値」
JSON-textとは

値を表現するテキスト
値でないものは全て、JSON-textではない

なぜJSONデータを使うのか

引用:https://www.ibm.com/developerworks/jp/web/library/wa-ajaxintro10/index.html
http://www.publickey2.jp/2012/08/json.html
https://thinkit.co.jp/article/70/1
http://d.hatena.ne.jp/seinzumtode/20130426/1366934641

その他の主なデータフォーマットの種類

参考:https://www.gixo.jp/blog/3965/

データフォーマットの違い
  1. データ構造
  2. 項目の最大データサイズ
  3. レコードの最大データサイズ
  4. 文字コード
  5. エスケープ文字
  6. 処理速度
フラットフォーマット(固定長フォーマット)
  • 各データがフラットに並ぶ
  • 「Xバイト目~からYバイト目まではZという項目である」というルールでデータを処理
CSV Character-Separated Values
  • 各データが区切り文字(デリミタ)で区切られる
  • 各項目はカンマで区切られる。
XML Extensible Markup Language
  • 全てのデータがタグで囲まれ分割
  • 全体が木構造(ツリー構造)であらわされる

jsonデータをPHPJavascriptで扱う

PHP
json_encode()
値を JSON 形式にして返す
json_decode()
json文字列をデコードする
デコード decode
符号(コード)の集まりに変換されたデータから元のデータを復元すること

下記はPOSTされたjsonデータをオブジェクトに変換

$j_obj = json_decode($_POST['json']);

json_decode()の引数
https://syncer.jp/how-to-use-json
json_encode()のエスケープ
https://blog.ohgaki.net/json-escape

javascript
JSON.stringify
javscriptコードをJSON 文字列に変換
https://developer.mozilla.org/ja/docs/Web/JavaScr
eval(string)
文字列をJavascriptコードとして評価
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/evalipt/Reference/Global_Objects/JSON/stringify

下記はHTMLボディのjsonデータをjsのコードに変換している。

var data = eval('('+req.responseText+')')