jQueryの$.ajax触りがてら、$.getJSONも使ってAjaxチャットを作ってみました。

jQueryでAjaxチャット

チャットは今まで一回も作ったことがなかったので今イチやりかたがわからなかったんですが、やっぱりがつがつデータをとりにいくしかないようでsetTimeoutを使いました。一応IBMのページに書いてあったように更新されたデータだけを取りにいくようにしたけど、PHP側を修正する必要があるな…。

しかしチャットは結構難しいですね。今回はめっちゃ簡単なものにしているので完成度はかなり低いですが、インタフェイスや仕様を本気で考えるとなかなか骨が折れそうなかんじです。

今回は簡易チャットということで仕様もあまり決めず適当に作ってしまったので、動作不良が多々あるやもしれませんが、まあせっかく作ったので公開してみます。（今回も初心者まるだしのソースなので見たい方は直接ソースをのぞいてやってください。）

参考ページ
Ajax と XML: チャットのための Ajax

先日の「jQueryでAmazon検索」に引き続き楽天検索ページを作ってみました。

jQueryで楽天検索

「【楽天ウェブサービス】RAKUTEN WEBSERVICE」を利用し、PHPでデータを取得しjQueryで処理をさせています。

前回のAmazon検索では「xml形式」でデータを取得していましたが、今回は「json形式」でデータを取得しています。ついでに「timeout:3000」のパラメータを追加し、3秒以内に結果が返ってこない場合はエラーになるようにしてみました。

$.ajax、それにしても便利ですね！成功、エラー、タイムアウト等の処理もパラメータを設定することで簡単にできてしまいます。

Amazonか楽天APIを利用して、なんかサイトつくってみようかな？

参考ページ
$.ajax(options) [ jQuery ] – StackTrace
[Think IT] 第1回：JSONってなにもの？ (1/3)

jQueryの$.ajaxを練習がてら、今さらながらAmazon検索ページを作ってみました。

jQueryでAmazon検索

「Amazon Web サービス」を利用し、PHPでデータを取得しjQueryで処理をさせています。

検索後ページ下部に表示される「NEXT」をクリックすると、検索結果が追加されていきます。というか削除する処理をつけなければ勝手にこうなるのですが、検索した結果がページに蓄積されていくほうが使いやすいかと思い、そのままにしています。新しく検索すると前の結果は削除されます。（ちょっと処理が荒いのでソースはのせていません。興味がある方は直接ソースをのぞいてくださいな。）

なんかappendで追加したもののeventが取得できないっていう現象ではまりました。「NEXT」の部分は「a id=”next”」としてappendで追加していたけど「$(“a#next”).click」が動作せず。Firebugで確認してもちゃんと追加されてるし、動かない理由がわからず時間だけくってしまったので、仕様変更。根本的な知識が抜けているのか、単なるミスか。またちゃんと調べなければ。ひとまず今日はここまで。

参考ページ
特集：jQueryではじめるAjax｜gihyo.jp … 技術評論社