JQueryã§ã‚¯ãƒã‚¹ãƒ‰ãƒ¡ã‚¤ãƒ³ã®Ajax通信 --- AquaSunãƒãƒƒãƒˆã‚µãƒ¼ãƒ“ス ブãƒã‚°
今回ã¯æŠ€è¡“ãƒã‚¿ã§ã™ã€‚ orz JQueryã§Ajax通信ã§ã‚„ã‚Šå–ã‚Šã‚’ã™ã‚‹å ´åˆã€ xml, html, script, json, text ãªã©ã®ãƒ‡ãƒ¼ã‚¿å½¢å¼ã§é€šä¿¡ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ ç•°ãªã‚‹ãƒ‰ãƒ¡ã‚¤ãƒ³é–“ã§é€šä¿¡ã™ã‚‹å ´åˆã€ jsonp を使ã†å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ データã¯ã€JSONå½¢å¼ã§ã™ã。 JSONPã¯ã€ JavaScript Object Notation with Padding (JSON with Padding) ã®ç•¥ã§ã™ã€‚ ãã“ã§JQueryを使ã£ãŸç°¡å˜ãªã‚µãƒ³ãƒ—ル(Javascriptå´ã¨PHPå´ã®ä¸¡æ–¹)を紹介ã—ã¾ã™ã€‚ ãªã‹ãªã‹ã€ä¸¡æ–¹ã‚’紹介ã—ãŸã‚µãƒ³ãƒ—ルãŒå°‘ãªã„ã®ã§ã€å¤šå°‘ã¯å½¹ç«‹ã¤ã‹ãªãã¨æ€ã„ã¾ã™ã€‚ æ°—ã‚’ã¤ã‘ãªã„ã¨ã„ã‘ãªã„ã®ãŒã€ã‚¨ãƒ³ã‚³ãƒ¼ãƒ‰ã€ãƒ‡ã‚³ãƒ¼ãƒ‰ã§ã™ã€‚ HTML入力 → encodeURIComponent ⇒ rawurldecode → PHPå‡¦ç† P
ワタシã®æ—¥è¨˜
å‰å›žã«ç¶šã„ã¦ã€jQueryã®$.getJSON() APIを利用ã—㟠Webサービスã®ã‚µãƒ³ãƒ—ルを紹介ã—ã¾ã™ã€‚ REST/JSONPをサãƒãƒ¼ãƒˆã—ã¦ã„ã‚‹Webサービスã¯ã€ãã®ã¾ã¾ 利用ã—ã¦ã„ã¾ã™ãŒã€REST/XMLã—ã‹ã‚µãƒãƒ¼ãƒˆã—ã¦ã„ãªã„ Webサービスã¯ã€Yahoo! Pipesをブリッジã«ã—㦠REST/JSONPã§ãƒªã‚¯ã‚¨ã‚¹ãƒˆã—ã¦ã„ã¾ã™ã€‚ â—†Ajax: Flickrã‹ã‚‰å†™çœŸã‚’検索ã—ã¦Gallerifficã§è¡¨ç¤ºã™ã‚‹ V3 â—†Ajax: Yahoo!ニューストピックをå–å¾—ã—ã¦è¡¨ç¤ºã™ã‚‹ V2 â—†Ajax: ä¾¡æ ¼æ¯”è¼ƒã‚µã‚¤ãƒˆã®ä¾¡æ ¼.comã‹ã‚‰å•†å“を検索ã—ã¦è¡¨ç¤ºã™ã‚‹ â—†Ajax: ä¾¡æ ¼æ¯”è¼ƒã‚µã‚¤ãƒˆã®ã‚³ãƒã‚³ãƒãƒƒãƒˆã‹ã‚‰å•†å“を検索ã—ã¦è¡¨ç¤ºã™ã‚‹ â—†Ajax: æ¥½å¤©å¸‚å ´ã®å•†å“ランã‚ングを表示ã™ã‚‹(年代｜性別) â—†Ajax: æ¥½å¤©å¸‚å ´ã®å•†å“ランã‚ングを表示ã™ã‚‹(ジャンル別) â—†Ajax: æ¥½å¤©å¸‚å ´ã®å•†å“ランã‚ングを
ASCII.jp：JSONP＋jQueryã§æ¥½å¤©ã‚¢ãƒ•ã‚£ãƒªã‚¨ã‚¤ãƒˆã‚’攻略ï¼
自分ãŒé‹å–¶ã—ã¦ã„るブãƒã‚°ã‚„Webサイトã«ã€ã•ã¾ã–ã¾ãªå•†å“ã®ã‚¢ãƒ•ã‚£ãƒªã‚¨ã‚¤ãƒˆãƒªãƒ³ã‚¯ã‚’å¼µã£ã¦ç´¹ä»‹æ‰‹æ•°æ–™ã‚’稼ãŽãŸã„。ã§ã‚‚ã€URLを手動ã§æ›¸ãæ›ãˆã‚‹ã®ã¯é¢å€’ã ã—ã€ã‹ã¨ã„ã£ã¦ãƒªãƒ³ã‚¯ã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ã‚’使ã†ã¨ãƒ‡ã‚¶ã‚¤ãƒ³ã‚„表示形å¼ã®åˆ¶ç´„ãŒä»˜ã„ã¦å›žã‚‹â€•â€•ã€‚ ãã“ã§æ´»ç”¨ã—ãŸã„ã®ãŒã€Amazonや楽天ã€ãƒ¤ãƒ•ãƒ¼ãªã©ãŒæä¾›ã—ã¦ã„るデベãƒãƒƒãƒ‘ーå‘ã‘ã®Webサービスã§ã™ã€‚ãŸã¨ãˆã°æ¥½å¤©ãŒå…¬é–‹ã—ã¦ã„る「楽天ウェブサービスã€ã‚’使ã†ã¨ã€æ¥½å¤©ã§è²©å£²ã•ã‚Œã¦ã„る商å“やサービスã«ã¤ã„ã¦ã•ã¾ã–ã¾ãªæƒ…å ±ã‚’æ¤œç´¢ã—ã€ãƒ‡ãƒ¼ã‚¿ã‚’å–å¾—ã§ãã¾ã™ã€‚ ã‚‚ã¡ã‚ん楽天ウェブサービスã¯ã‚¢ãƒ•ã‚£ãƒªã‚¨ã‚¤ãƒˆã«ã‚‚使ãˆã¾ã™ã€‚今回ã¯ã€æ¥½å¤©ã‚¦ã‚§ãƒ–サービスã®ã”ãç°¡å˜ãªä½¿ã„方を紹介ã—ã¾ã—ょã†ã€‚ デベãƒãƒƒãƒ‘ーIDï¼ã‚¢ãƒ•ã‚£ãƒªã‚¨ã‚¤ãƒˆIDã®å–å¾— 楽天ウェブサービスã§ã‚¢ãƒ•ã‚£ãƒªã‚¨ã‚¤ãƒˆã‚’始ã‚ã‚‹ã«ã¯ã€å§‹ã‚ã«ã€Œãƒ‡ãƒ™ãƒãƒƒãƒ‘ーIDã€ã¨ã€Œã‚¢ãƒ•ã‚£ãƒªã‚¨ã‚¤ãƒˆIDã€ã‚’å–å¾—ã—ã¾ã™ã€‚ デベãƒãƒƒãƒ‘ーIDã¯ã€æ¥½å¤©ã‚¦ã‚§ãƒ–サービ
JSONã¨JSONP
JSONã¨JSONP ãƒã‚¿å…ƒï¼šJSONã«ã¤ã„ã¦ã®å‹‰å¼·ãƒ¡ãƒ¢ï¼šå¤–部URLã‹ã‚‰å‘¼ã³å‡ºã›ãªã„。ã©ã†ã‚„ã£ãŸã‚‰ãƒ»ãƒ»ãƒ» JSONã‚„JSONPを利用ã—ãŸJavaScriptã§ã®ãƒ‡ãƒ¼ã‚¿ã‚’ã®å–り扱ã„æ–¹ã§ã™ã€‚ JSONã®å ´åˆ JSONã¯JSONã«ã¤ã„ã¦ã®å‹‰å¼·ãƒ¡ãƒ¢ã§æ›¸ã‹ã‚Œã¦ã„るよã†ã«ãƒ‡ãƒ¼ã‚¿ã‚’オブジェクトã¨ã—ã¦è¨˜è¿°ã—ã¦ãŠã方法ã§ã™ã€‚ var jsonData ={"users": [ { name: "hamu", age : 24, language:["XHTML" , "CSS"] }, { name: "h2", age:25, language:["PHP" , "Java"] }, { name: "hoge", age:26, language:["JS" , "jQuery"] } ]} ã¨JSONを定義ã—ã¦ãŠã‘ã°ã€ for(var index in jsonData.users){ documen
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
)
http://blog.suz-lab.com/2010/03/jqueryjsonptwitter.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+suz-lab-blog+%28suz-lab+-+blog%29
{{#tags}}- {{label}}
{{/tags}}