忍者ブログ

からすまる日誌 JavaScript

実践(3) Ajax概要

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

実践(3) Ajax概要

XML→使い勝手が悪い
ジェイソンというのが使われるようになった
 
プロパティと値の塊なので「.シンタックス」(オブジェクト.プロパティ)で受け渡しができるので大変使い勝手が良い
 

JSON

>ファイルの書き方ルール
pointJavaScriptと相性が良いよ
 
誰かが「ホームページのファイルは、こんな書き方にしようぜ!」と書き方のルールを作りました。
そして、それに「HTML」と名前を付けました。
 
同じように、誰かが「データをやり取りするときは、こんな書き方にしようぜ!」と書き方のルールを作りました。
そして、それに「XML」と名前を付けました。
 
でも、世の中にはXMLが嫌いな人がいました。
「XMLなんて嫌いだ!データをやり取りするときは、こんな書き方にしよう!」と別の書き方ルールを作った人がいたのです。
 
その人は、データをやり取りするときは
{
 "bohebohe": [ 1, 2 ],
 "piyopiyo": {
  "piyota": [ "21", "lovely" ],
  "piyoko": "sama"
 }
}
みたいな書き方にしようよ~、と言いました。
この書き方の名前が「JSON(ジェイソン)」です。
 
参照 

YML(yaml)
Rubyでこれを使っているらしい
 
yaml ain't markup language の略
一般的な拡張子は .yml
構造化データの表現方法
あくまでも仕様を表すため仕様を処理する実装が別途必要
以下の言語でyamlを使用した実装がサポートされている
 
Java
JavaScript
Perl
PHP
Python
Tcl
Ruby
XML
 
このへんを読んでおくといいかも
 

JSONの形式
 
"results":[
]
 
配列の名前がresults
[]の中が配列
配列データの中身はオブジェクト
 
ひとつのオブジェクトの中にはプロパティと値がある
 

非同期で通信を試みる
→APIを公開しているサイトにたいして通信を試みる
→郵便番号さえちゃんとくれたらこういうの返しますよというレスポンスデータをJSON形式で受け取る
→それを書きたい場所にvalメソッドで出力
 

http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060
 
のレスポンス結果 
 
{
 "message": null,
 "results": [
  {
   "address1": "高知県",
   "address2": "南国市",
   "address3": "蛍が丘",
   "kana1": "コウチケン",
   "kana2": "ナンコクシ",
   "kana3": "ホタルガオカ",
   "prefcode": "39",
   "zipcode": "7830060"
  }
 ],
 "status": 200
} 
 
(説明文がここにある)
 
おそらくsearch.phpかsearchというディレクトリにindex.htmlがあるとかそんな感じ
 
?zipcode=7830060
この部分はクエリストリングという。渡すパラメータのこと。
 
こういうのを標準的なget通信というらしい。
 

webの通信はおおまかに2種類
1.get
2.post
 
postという通信はパラメータを見せない。
?zipcode=7830060とかなしでひそかに通信をする。
 
getで通信すると自動的にクエリストリングが作られて送られる。
(URLにパラメーターが出るよ/いまこっちが標準/google mapとか)
  

URI
同じいっこのURLには同じ情報は1つしかないよという。
 
get通信には向かないものもある
ブログの日記とか(内容が全部urlに含まれるというのは長すぎ)
そういうときはpostで送る
 

もし複数のなんとかが欲しいとなったら&でつなぐ
 
http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060&hoge=foo
 
など、いくつでも連結可能
 

情報の引継ぎは大切
 

エイジャックスを書くときはこういう構文が必須
 
$.ajax({
    url: "/sample",
    type:'POST',
    data:{'data':'hoge'},
}).then(function(data){
    //何かしらの処理
});
 
なんでいきなり$.なのかというと、ajaxがとても上位のメソッドだかららしい。
 
エイジャックスの通信が書けるというのは
javaScript使いの目指すところ。
 
$はjQuaryそのものをあらわすらしい。

&.ajax({
});
 
{}がついている。つまり、オブジェクトとして渡してしまおうという記述方法。
通信に必要なものをプロパティ:値で書いていく。
 
PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R