Ajax 通信を JSON でシンプルに実装するデモ | バシャログ。
Ajax といえば、最近の地図サービスはだいたいドラッグするとページを読み替えることなく移動することができて、便利というか、当たり前のものとして受け入れられるようになったと思います。 さて、そんな Ajax でサーバとやりとりする方法なんですが、JSON という表記形式を利用すると、最低限の通信だけならシンプルに実装できます。本日は、JavaScript ライブラリの jQuery と PHP ( 5.2.0 以上、または PECL で json をインストール ) を使い、データのやりとりに JSON を使う方法を紹介します。ソースコード部分だけなら JavaScript と PHP で10行程度ですので、興味のある方はぜひお試しください。 サーバからプロフィールデータを受け取ってリストで表示するデモです。Firebug等で通信内容をチェックしてみてください。 JSON demo サーバ
jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
prototype.js を使ったスターレイティング（JavaScript 星評価）
YouTube や Amazon、livedoor Reader でコンテンツの評価に使われているスターレイティングを prototype.js を使って割と汎用的に実装してみました。 http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/ などには高機能なライブラリがあるようですが、とっつきにくいので自作しました。順を追って説明していきます。 準備と前提条件： prototype.js（今回は ver1.6）を使用します。 http://prototypejs.org/ からソースをダウンロードしておきましょう。5段階の星を表現するために、未選択のものを含めて 6つの画像が必要です。私は http://iconlet.com/ から素材を入手してペイントで加工しました。（サンプル：、使った
S-MEMO（エスメモ）: prototype.jsの使い方
かなり久しぶりの投稿になります＾＾； 全く更新せずにほっときました。。。やっとやる気が出てきましたので、これからまったりと更新して行こうと思います。 今回は、prototype.jsのAjaxの機能を紹介します。 prototype.jsとはjavascriptのフレームワークのことで、フレームワークを使うメリットは ・ブラウザに依存することなく、記述することができる ・複雑な記述を簡潔にしてある 他にもあると思いますが、ざっと思いつく限りこんな感じです。 デメリットはprototype.js特有の記述をする為、人によっては見難くなると思います。 更にブラウザの依存がなくなると言っても、全てを吸収しきれるわけではないので注意して下さい。 以下のサイトからダウンロードして下さい。 prototype.js本家 参考までに、以下の「prototype.js の開発者向けメモ」
jQuery入門
このページはAjaxライブラリの1つであるjQueryライブラリを勉強したい人向けに用意されています。 jQueryはバージョンによって記述方法が異なる場合があります。ここでは、バージョン別にページを用意するようにしてあります。 Ajaxライブラリで有名なものとしてはPrototypeライブラリやYahoo UI Libraryなどがあります。jQueryはPrototypeライブラリなどと併用することもできるようになっています。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 jQuery入門 (ver 1.2.1) jQuery入門 (ver 1.2.2) jQuery入門 (ver 1.2.3) jQuery入門 (ver 1.2.4) jQuery入門 (ver 1.2.5) jQuery入門 (ver 1.2.6) jQuery
jQuery入門（その1）（1/7）：CodeZine
はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
株価を無料で取得したり、検索結果を得るスクリーン・スクレイピング技術(AJAX版）と問題点 - ウィリアムのいたずらの、まちあるき、たべあるき
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も） 今日Ｗｅｂ２．０をしらべていたときに、ここに「スクリーン・スクレイピング」っていう言葉が出てきて、なんじゃらほい？と思って調べたら、 あ、あれのことか。。 Yahoo!ファイナンス＞ ヘルプ＞ 口座管理サービス（MoneyLook）関連FAQ ＞データ取得の方法から、引用すると（以下斜体が、そこからの引用） スクリーン・スクレイピング技術とは、ウェッブサイトの表示構成を解析し、必要な文字や数字だけを抽出する技術で、その抽出ルールをまとめたものをスクレイピング・モジュールと呼びます。 具体的に例をあげたほうがわかりやすいので、 無料で見れる、ＹＡＨＯＯの株価情報から、エイベックスの株価を抜く方法をしめそう。 YAHOOの株価情報で、検索時7860（エイベックスの銘柄コード）をいれる
Google AJAX Feed API でサイドバーに人気エントリーを出してみた : no hacking, no life
Google AJAX Feed API が出たので試してみた。 Google AJAX Feed APIとは、googleから提供されている、RSS/Atomフィードを取得するAPI(javascriptライブラリ)です。 導入方法も含め詳しくはここやこの辺を見てください。要するに、XMLHttpRequestのクロスドメイン制約で今まで出来なかった外部ドメインとのやり取りがこれを使うと(RSS/Atomに限るが)できてしまうということ。(Googleがプロキシとなって結果を取得してくれる) これを使って、自分のブログ(no hacking, no lifeとtutorialog)の中で、はてぶで多くブックマークされてる人気エントリの上位をサイドバーに出してみた。 取得するRSSはこれです。 http://b.hatena.ne.jp/entrylist?url=http://chees
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
[鏡] 入門 JSON 3 -- JSONP とコールバック関数 -- 戯れ言
最近 JSONP というのが話題になっているようですので， ここで簡単に紹介します。 JSONP （JSON with Padding）というのは JSON のデータフォーマットにちょっとした記述を加えて JavaScript の関数として呼び出せるようにしたものです。 JSONP については以下の記事に簡単な説明があります。（多分この記事が初出だろうという話です） Remote JSON - JSONP 例えば以下のような JSON データがあるとします。 { "name" : "Yasuhiro ARAKAWA" } JSONP ではこのデータに記述を加えて JavaScript 関数のようにしたものです。 分かりにくいですね。 具体的にはこのように記述します。 callback( { "name" : "Yasuhiro ARAKAWA" } ); "callback" の部分は関数
![[鏡] 入門 JSON 3 -- JSONP とコールバック関数 -- 戯れ言](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9403aeb9e428539e1bdb60550747807cd52d387/height=288;version=1;width=512/https%3A%2F%2Fbaldanders.info%2Fimages%2Fattention%2Fremark.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery リファレンス
Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About![Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
AJAX on IE でresponseTextを取得するとエラー発生 - SEの行き着くところ…
http://e0166nt.com/blog-entry-172.html
Dynamic Drive DHTML(dynamic html) & JavaScript code library