コメント( 0 ) | トラックバック( 0 ) Ajaxで通信をするときは、手作りすると異常に大変です。 XMLHttpRequestオブジェクト作って「send」メソッドで呼び出し、そのステータスをチェックしながら送信が完了したら、情報を受け取って・・ しかも、IEの場合は HTMLHttpRequestオブジェクトではないし、ステータスの番号なども Webブラウザによって違ってしまい、プログラムを作るのが非常に大変。 prototype.jsには、Requestメソッドがあり、これを使えば簡単にプログラムを作ることができます。例えば次のコード。 var ajax = new Ajax.Request('http://xxx/xxx.php', { method:'get', parameters: 'a=1&b=2', onComplete: success);これで OK。準備など
コメント( 0 ) | トラックバック( 1 ) Ajaxは、まだまだ Webブラウザ依存が強く、同じ機能を実現するにもブラウザによって処理を変える必要があることが多いです。そんなとき、これまではエージェント情報（Webブラウザ情報）を取得して、条件分岐で取得するなどして工夫していましたが、prototype.jsを使えば簡単です。 Try.These()というメソッドは、「とりあえず試してみて失敗したら、次を試す」というもの。例えば、さまざまな入門書籍などで語られていますが、現状 IEとそれ以外のブラウザでは Ajaxを形作るオブジェクトが違っています。その為、最初にブラウザを分岐を入れて・・if(window.XMLHttpRequest) { // 一般的なブラウザ ajax = new XMLHttpRequest(); } else { // IE
r.schuil - Ajax.RssReader The Ajax.RssReader class allows fetching and parsing RSS feeds in Javascript prototype.jsをベースにしたRSSリーダークラス。 次のようにして簡単に使える模様。 function myCallback( rss ) { alert(rss.channel.title); for(var n=0; n<rss.items.length; n++) { alert(rss.items[n].title); } } function errorHandler( rss ) { alert('An error has occured'); } new Ajax.RssReader( 'test.xml', { onSuccess: myCallback, on
コメント( 5 ) | トラックバック( 1 ) prototype.jsには、非常に多くの機能が備わっていますが、中でも非常に使いやすくて、それでいて一度使うと手放せなくなるのが、$()ファンクションです。例えば、Ajaxの場合には、よくフォームやレイヤーを操作するために id属性煮付けられた名前を次のように指定します。document.getElementById('xxx').value これを、$()ファンクションでは次のように書き表すことができます。$('xxx').valueたったこれだけですが、フォームやレイヤーの指定はプログラム中に何度も出てくる記述のため、非常に助かります。 さらに、$()ファンクションの場合は、以下の例のように、複数の要素をまとめて指定することもできます。var controls = $('xxx', 'yyy', 'zzz');こうすると、次のプログ
Tags: | Date: 2005-10-17T22:55:00+09:00 | Comments: 21 | Trackbacks: 0 なんだかやたら最近 prototype.js っていう Javascript のライブラリの話をよく見かけるので、試しに仕事で使ってみました。でも日本語で丁寧に解説しているところがなかなかないので困る。というより、オブジェクト指向な Javascript の経験が皆無だった時点で、かなりてこずってしまった。この prototype.js は Javascript の面倒な構築を手伝ってくれるもので、いろいろあるんだけど、とりあえず今回使った Ajax まわりあたりのことを。クロスブラウザな XMLHttpRequest の非同期通信のスクリプトを一から書こうとするといろいろと面倒だけど、prototype.js を使うと、var Request =
Yahoo!オークションのWebサービスが使えるので、サンプルプログラムを作りました。 一番簡単な、カテゴリー一覧の取得と表示です。 https://web2note.up.seesaa.net/sample/yahoo_auction.html (直接Yahooに接続するので、ローカルに保存して、IEで開く必要があります。) Prototypeは便利ですね。これがなければ、こんなに簡単に出来なかったです。 特に、子要素をループで処理する時や、イベントの追加方法など、使い勝手がよいです。 一方、結果を画面に表示するためのDOMの操作は面倒ですね。この部分を簡単に出来る方法やライブラリがあれば、どなたか教えて下さい。 JavaSｃriptはセキュリティ上の理由でJavaScriptが置かれたサーバ以外と通信できないというのが、今回よく分かりました。CGIとの連携が必要ですね。 加えて、Aja
社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 今週はかなりハードボイルドで全身タイツのような忙しさなので、みんなが春を分けて楽しんでいたり、香港に行って楽しんでいる間にせこせこ資料を作っています。 はぁ。 Section 00 Prototype.js の前に JavaScript と DOM とイベントの概要 HTML は読み込まれた後、すべての情報が JavaScript のオブジェクトに変換される。 イメージ的にはこんな感じ <html> <head> <title>タイトル</title> </head> <body> ： ： </body> </html>↓↓↓ var document = { doc
社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基本的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
prototype.js1.5ではみんながこうしたいなーと思っていた機能が実装されました。(via Encytemedia ) （SVN co http://dev.rubyonrails.org/svn/rails/spinoffs/prototype して rake distしたもの ） ■Element.Methods 1.4まではelementに対する操作は 1Element.show($("test")); 2Element.update($("test"), "hoge"); のように書く必要がありました。 これが 1$("test").show(); 2$("test").update("hoge"); と書けるようになりました。 これはprototype.jsで最も偉大な$メソッドの変更によるモノです。 1function $() { 2 var results = [],
Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集 古籏一浩さんとのはじめての共著 発売中-->『Ajax実践テクニック』 古籏一浩/高橋 登史朗 (著)秀和システム 配本予約開始-->『入門Ajax 増補改訂版 』 高橋 登史朗 (著)ソフトバンククリエイティブ ; ISBN: 4797336242 このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と [ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者 でAllaboutのJavaScriptガイド とか牛久大仏の足元で草むしりをしながら 暮らしている【高橋登史朗】によるサポートページ 兼 無駄話ブログです *このスクリプト動かないよ〜、とかの情報は 各「コメント欄」へ書き込ん
In getting to know Prototype a little better, I decided to go through the latest version of the Prototype library (1.5.0_pre0) and detail every method and property that was available. In doing so, I got a much better understanding of how the code works. Here are the files in a 1280x960 and a widescreen 1440x900 version. 1280x960 1440x900 1280x960 on White 1440x900 on White And with WHITE backgroun
prototype.jsのAjax.Requestを使って、JSON形式のデータを扱っていましたが、誤った(というかもったいない)使い方していたことに気が付きました。 Ajax.Requestを使ってデータをやり取りする際、下記の条件に当てはまるならば、無駄な処理が行われていると思われます。 Ajax.Requestのオプションで指定するonCompleteやonSuccess関数内で、XMLHttpRequestのresponseTextに対してevalを実施している。 Ajax呼び出し時に、サーバ側から返すContent-Typeに、"text/javascript"が含まれる。 なぜ無駄かというと、Ajax.Request内では処理完了時、レスポンスのContent-typeを判定し、"text/javascript"が含まれる場合、レスポンスの内容に対してevalを実行します。 (
WEB+DB PRESS Vol.31 に prototype.js の記事を執筆しました。 Ajaxというキーワードが与えられたことで、JavaScriptでユーザビリティの高いサイトを構築しようという流れが出ています。もともと枯れた技術であったこともあり、蓄積されたさまざまなノウハウを活かしたライブラリやフレームワークなどの環境が急速に整いつつあります。本特集では、こうしたAjaxに関する最新の開発手法や環境について、言語別の現状も踏まえつつ解説をしていきます。 prototype.js を使って Ajax のコードを書くのをゴールに、まずは Ajax のおさらいに始まって、JavaScript の OO、prototype.js を使った Class-Style OO を解説して、締めに prototype.js による Ajax アプリケーションについて解説してみました。僕が担当し
追記 2005-08-23 Using prototype.js v1.5.0 リファレンスがあったみたい。これを読んだ方がはるかに有益です。あー書くんじゃなかった。 はてなの人気者 id:naoya が「prototype.js でデザインパターン」というのをやってるんだけど、prototype.js の説明をしてくれなくて困る。前から「Rails の prototype.js は便利だ」というのを目にすることがあったので、ちょうどいい機会だってことで調べた。 http://prototype.conio.net/ ドキュメントが全然ない。ないこたないと思うのでご存知の方は教えてください。しょうがないのでコードを読むことに。 http://dev.conio.net/repos/prototype/src/ ここのを順次読みます。 base.js http://dev.conio.net
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
