AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
wicketでajaxの機能を使う - ドキッ！はてなブログに移転しました！
たまたまwicketでajaxを使う機会があったような気がするんですが結論から言うとwicketでajaxを書く利点は無いので最初からjqueryとか使ったほうがいいです。 それでもwicketでajaxの機能を使わなければいけないという奇特な人のためにメモを残しておきます･･･ ここではformに入力された文字列をLabelに代入して動的に書き換えるという簡単なプログラムを例として取り上げます Test.html <form wicket:id="form"> <input wicket:id="text" type="text" /> <input wicket:id="ajaxButton" type="submit" valu="入力" /> <span wicket:id="change"></span> </form> Test.java public class Test e
Ajaxでデータベース更新 » ニャンまげをこよなく愛す
WEBサイトでDBを用いてシステム構築しているケースは多々あります。 使用するテーブルが１つならいいけど複数のテーブルを使用していて、更新の際にすべて変更しなきゃいけないときってめんどくさいですよね。 adminページ的なものを設けてもPHPで更新するとなるとページ遷移が必要になってTable1を更新→遷移→Table２を更新→遷移．．．みたいな。 というわけでこのページ遷移をなくす方法として非同期通信(Ajax)を使用する方法をあげときます。 一応例として作ったページはこちら 適当にフィールドにデータいれて修正ボタンを押してもらえたらDBの値が更新されます。 更新されたデータはテーブル情報のとこに出力されるようになってます。 まず用意するファイルは4つ index.html jquery.js ajax_revise.js revise.php jquery.jsはJavaScript
jQueryでAjaxを利用する基本チュートリアル (3/4)
XMLデータを取得、加工して表示する テキストファイル、HTMLファイルの次は、いよいよXML形式のデータを扱ってみましょう。テキストファイルやHTMLは、読み込んだ内容をそのまま表示すればよいのですが、XMLは取得した内容を加工しないとHTMLとしてブラウザーが表示できません。XMLの取得／操作には、ajax()という命令を使います。 ajax()は以下のような書き方で使います。 $.ajax({ url: '取得するXMLファイル', dataType: 'xml', success : function(data){ //取得したファイルに対する処理 } }) これまでのjQueryの書き方とはちょっと違うので戸惑われたかもしれません。ajax()にはセレクターの指定はなく $. で始まり、括弧内の {...} に設定（オプション）を記述します。設定は左側に項目名を、右側には項目に対
jQueryでXMLをパースして表示するコードサンプル例:phpspot開発日誌
Parse XML with jQuery | Papermashup.com jQueryでXMLをパースして表示するコードサンプル例が公開されています。 jQueryマスターな方には無用の物かも知れませんが、スニペットとしても使えそうなので便利かも、というのでご紹介。 $.ajax でサイト内にある .xml ファイルを取得して、success のハンドラによってXML処理させます。 普通に書くと大変ですが、jQueryを使うことで次のように簡単になります。 .xml のパスはサイト内のURLであれば何でもいいので、サーバ側に xml を出力するようなAPIが既にある場合、jsonに変換することなく簡単に使えますね。 jQueryのDOM操作の簡単さによってこれだけ短縮できているところが何とも凄いです。
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──デザインに使えるツール（1） [technique 08] 読み込み中……を表すローディングアイコンをつくる 文＝駒場元彦（DtoP） Tool Ajax loading gif generator URL http://www.ajaxload.info/ Ajaxでデータ待機中を表すいわゆる「読み込み中……」といったアニメーションアイコンを作成してくれるツールである。オリジナルでつくろうとすると、たくさんのアニメーションパターンを描かないといけないため、「Generate」を押すだけで出来上がるのは便利だ。もちろん、その種類は豊富で、色、大きさ、背景の透過処理も選べるので、使用するWebサイトデザインに合ったものがつくれる。また、できたアイコンはgif形式なので、Ajaxに限らず読み込み中の表現に使え
jQuery 開発者向けメモ - 基本・サンプル
基本 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したインタラクティブなページを作ることが出来ます． 以下のサンプルを見れば，JavaScriptらしい表記をほとんどする必要がないことがわかると思います． toggleサンプル 特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります． $("#target_toggle").toggle("slow"); このブロックは，<p id="target_toggle"> です． Ajaxサンプル Ajaxでhello.htmlをロードするのは以下のようなコ
ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery（入門編）
こんにちわ。山下です。 最近、私の周りではJavaScriptライブラリといえば、jQuery の名前がまず最初に挙がってくるようになってきました。今回は、jQueryって何が便利なの？っていう人向けに、ポイントを掻い摘んで説明します。 1.名前空間を汚さない 他のJavaScriptライブラリとかだとStringとかArrayを直接拡張してたりしますが、jQueryはグローバルな名前空間を汚しません。eachとかmapのような便利な関数もすべてjQueryオブジェクトの属性として定義されています。 jQuery.each, jQuery.extend, jQuery.grep, jQuery.map, jQuery.merge, jQuery.trim, etc. また、標準では $ にショートカットが割り当てられるのですが、jQuery.noConflict()と書くことで proto
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
タブメニューなにか良いのないかなと思って探していたら、10 Javascript Ajax Tabsというエントリが後々使えそうなのでご紹介しておきます。 タブに関するまとめは以下で。 10 Javascript Ajax Tabs とりあえず10のJavaScriptAjaxタブメニューエントリはこちらから。 エントリの中でも、以下のメニューが面白かったですね。 口で説明するのは難しいですが、タブをクリックすると上下にスライドしながら違う文章を持ってきます。 以下からサンプル＆ダウンロード可能 タブメニューに関して 最近仕事のほうも忙しくなり、なかなか更新できないでいます。 そんなわけで、今回のようにタブを紹介するときにまとめて関連する記事を紹介する率も高くなってきました。 ピンポイント紹介ではなくなってきていますが、ご愛嬌と言う事でお願いします。 [JS]スムーズに切り替わるタブ型コン
JSON の紹介
JSON (JavaScript Object Notation)は、軽量のデータ交換フォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。 JavaScriptプログラミング言語 （ECMA-262標準第3版 1999年12月）の一部をベースに作られています。 JSONは完全に言語から独立したテキスト形式ですが、C、C++、C#、Java、JavaScript、Perl、Python、その他多くのCファミリーの言語を使用するプログラマにとっては、馴染み深い規約が使われています。これらの性質が、 JSONを理想的なデータ交換言語にしています。 JSONは2つの構造を基にしています。 名前/値のペアの集まり。様々な言語で、これはオブジェクト、レコード、構造体、ディクショナリ、ハッシュテーブル、キーのあるリスト、連想配列として実現されています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hinata.in
Highcharts Demo Gallery
JavaScript + Ajax 実践サンプル集 - ホーム