pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
jQuery.ajax(url[,settings])で、JSON形式のデータを読み込み、表示
jQuery の jQuery . ajax( url [, settings] ) メソッドを使った Ajax リクエストで、サーバへデータを送り、JSON形式のレスポンスデータを読み込み、表示する方法。このページのサンプルは、GETメソッドのHTTPリクエストで、PHPファイルへデータを渡し、PHPファイルの実行結果を取得し、JSON形式のデータとして処理し、表示する。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-ajax-json.php」ファイルの実行結果を読み込み、JSON形式のデータとして処理し、黄色のボックス要素内に表示する。リクエスト時、「year」「month」「day」のパラメータを送信し、「jquery-sample-ajax-json.php」ファイルで取得し、表示する。「toggle」
jQuery+Ajaxで画面遷移せずにコメント投稿をカッコよく更新するチュートリアル | URIN HACK
URIN HACKは2013年8月3日をもって http://urin.github.ioへ移転しました。 ここで公開した主なソフトウェアは全て GitHubレポジトリとして公開してあります。 当サイトのコメントは投稿した時に画面遷移しないで更新されるようにしています。本記事はjQueryとブログサービスの仕組みを上手く組み合わせてシームレスにコメント投稿できるようにするためのチュートリアルです。 コメント投稿のサンプル動画 コメントを投稿すると、投稿した人には以下のように見えます。 htmlサンプル 本記事で紹介するJavascriptのサンプルは以下のようなhtml構造を前提にしています。仕組みを理解すれば自分のサイト向けにカスタマイズ出来ると思います。 コメントが表示される部分のhtml jQuery+Ajaxで取得した結果を格納するための要素（サンプルでは#new-comme
Googleに続いてBingもAjaxにはpushStateを推奨
[対象: 上級] Ajaxを利用する場合のURLの生成にはpushStateを使ってもいいとGoogleのMatt Cutts（マット・カッツ）氏は勧めていました。 またこれとは別にGoogleのJohn Mueller（ジョン・ミューラー）氏に、AjaxのURLにはpushStateを使うことができると僕はGoogle+でコメントをもらったことがあります。 さてこれはGoogleにおいての話なのですが、BingもAjaxを利用したURLのベストプラクティスとしてpushStateを推奨することを公式に表明しました。 Search Engine Optimization Best Practices for AJAX URLs BingもAjaxコンテンツのURLにはpushStateを推奨 BingがpushStateを推奨する理由はGoogleと同じです。 Ajaxの処理で作られたコン
Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 : 4GALAXYのメモ
16 26 08 2007 Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 jQuery, Samples, Ajax 海外のjQueryを使ったAjaxサンプル集に日本語の紹介文をつけた記事 Effects Ajaxエフェクト集 要素の出現・消滅など全62種類のAjaxエフェクトサンプル Test new animate function 要素のAjaxアニメーションジェネレーター Use new functions stop, stopAll and pause to clear queue and stop flickering Ajaxでディレイ(遅延)を設定できるツールチップを表示サンプル Draggables | Droppables Ajaxでドロップ＆ドラッグ出来るサンプル10種類 Sortables list
Ajax IME: Web-based Japanese Input Method
Webベースの日本語入力サービスです。海外からでもブラウザさえあれば日本語を入力す ることができます。 特別なソフトは必要ありません。 使い方 お使いのコンピュータの日本語入力を切りかえて直接入力にします。 Alt-o (Ctrl-9) で Ajax IMEモードに変更します。(ボタンで切り替えるかえることもできます) 適当な文をローマ字で入力します。 spaceを押して漢字に変換します。続けて押すことで候補選択を行います。 returnを押す、もしくは次の入力を開始することで入力を確定します。 F9で強制的にカタカナに、F8で強制的にアルファベットに変換します。 再度 Alt-o (Ctrl-9)で直接入力に戻ります 海外旅行先や留学先, 海外のネットカフェなど日本語入力環境が 無いパソコンからご使用ください。 Firefox と Internet Explorer で動作確認をしていま
AJAX Tabs (Rails redux)
This blog is filled with Rails tidbits, presentations, tutorials, and other web related mumbo-jumbo. The author is Flinn Mueller a veteran web programmer. Purpose The purpose of doing Tabs in Ajax is not just to do something in Ajax. The context for which this is used is not for novelty. In this demo we are using Ajax to load information that does not need to be retrieved every time the user pulls
[JS]jQueryのプラグイン33+1選 -2008年5月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Kwicks スムーズに伸び縮み。 Horizontal Accordion 水平方向のアコーディオン。 Accordion Con
サービス終了のお知らせ
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
Flash|Ajaxベストサイトセレクション20 -つくるぶ 特集
2007年8月20日 動画再生や音声再生がもともと得意で、インタラクティブなWebサイトを作ることができるFlashと、非同期通信を利用してWebサイトのユーザビリティを一躍向上させたAjax。Flash、Ajaxで一長一短はありますが、それぞれの特徴、良さを改めて理解するためにFlash、Ajaxならではというサイトをたくさん並べて見ることにしました。サイトのセレクションは、Flashを得意とする木村さん、寺井さん、Ajaxを得意とする竹村さん、川崎さんにお願いしました。
Ajaxで使えそうなWEBサービスAPI一覧 - Ajax専
※ここの情報は古くなっています。 最新の情報はWeb APIまとめ - Shiz Labsを参照してください。 Ajaxで利用できそうなWEBサービスAPIの一覧です(Ajax専調べ)。数が増えてきたので、見やすいように表示形式を変更しました(2007/04/24)。 ※一部RSSや、Javascriptを貼り付けるだけで動作するような厳密にWEBサービスAPIという定義でないものも含まれます。 【一覧】 01.Google Web APIs 02.Yahoo! Webサービス 03.Amazon Webサービス 04.はてなWebサービス 05.ビッダーズWebサービス 06.お天気Webサービス 07.じゃらんWebサービス 08.スマッチWeb サービス 09.価格.com Webサービス 10.カーセンサー・ラボ Webサービス 11.お仕事検索webサービス 12.Flickr
使えるJavaScript/Ajaxライブラリ80個まとめ:phpspot開発日誌
80 AJAX-Solutions For Professional Coding | Smashing Magazine Web-developers can create amazing web-applications with AJAX. 使えるJavaScript/Ajaxライブラリ80個まとめ、ということで大量のAjaxライブラリが紹介されていました。 Ajax オートコンプリート AJAX AutoSuggest AJAX Autocompleter/ script.aculo.us library AJAX AutoCompleter ... Ajax でその場編集テキスト AJAX inline text edit 2.0 AJAX & CSS Flickr-like Editing Fields AJAX Instant Edit ... Ajaxメニュー、タブ AJA
マイクロソフト、AJAXアプリ開発用ツール「Atlas」を年内リリースへ
Microsoftは米国時間9月11日、ビジネスで利用可能なAJAXスタイルのウェブアプリケーションを構築するためのツールを2006年末までにリリースする計画であることを明らかにした。 これらのAJAXツールは「Atlas」というコード名で開発されており、数カ月前からプレリリースでも明らかにされていた。 Microsoftは米国時間9月11日、同社のフラグシップツールである「Visual Studio 2005」とウェブ開発フレームワークである「ASP.NET」に対応するAtlas製品をリリースする予定であることを明らかにした。同社はこれらの製品に対するサポートも提供する。 Atlasは、AJAXを利用したアプリケーションを記述するためのコンポーネント群だ。AJAXとはウェブサーバからブラウザに自動的にデータが配信されるインタラクティブなウェブページを構築するための技術のこと。 同社は、A
Ajaxの真価はWebサービス連携にあり
落ち着きつつあるAjaxを取り込んだWebアプリケーション開発への取り組み。後発でもアイデアはまだまだ出尽くしていない。基本を復習して新たなサービスへとつなげてみよう。 Ajaxというと、XMLでデータを送受信するというイメージがある。 しかし、実際にはXMLである必要性はない。むしろXML形式ではないほうが、送受信データパースの手間が必要ないというケースが多いのだ。 一方で、XMLでデータをやり取りできる利点を生かせば、当然ながらWebサービスとの効果的な連携も現実的なものになってくる。今回は、Ajaxアプリケーションにおいてよく用いられる「JSON」と呼ばれるデータ形式について解説しよう。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」では、これまでにAjaxの概要（第1回）から発展系としてどのような取り組みあるのか（第2回）について解説した。このオ
ITmedia エンタープライズ：Ajaxを理解する4つのポイント (1/6)
Ajaxはどのように実現されているのだろうか？ こんな疑問に応えるべく、サンプルを挙げてみよう。Ajaxの基本は、単に「JavaScriptでHTTP通信をする」というだけに過ぎないことが分かる。 オンライン・ムックPlus「Web2.0で変わるWebプログラミングの常識」の第1回目では、Ajaxが使われる背景と、どのような場合に適しているかを解説した。 今回はサンプルアプリケーションを取り上げていこう。ポイントは、もっとも基本的な例に限定したことであり、開発者である読者が今すぐにでも既存のWebアプリケーションへ組み込むことができるよう配慮した点だ。 まず最初に、以下の図2に示す2つのテキストボックスに注目してほしい。その「和」と「差」をそれぞれ計算し、結果を埋め込むという処理を挙げてみよう。 「和」と「差」を計算する処理の部分は、サーバ側に用意したPHPプログラムで行うことにする（図3
あるＳＥのつぶやき: Ajax開発支援ツールまとめ
Ajax開発支援ツールをまとめておきます。 | コーディング | ブラウザ | テスト | デザイン | JSツール | 画像 | リファレンス | | チートシート | JSお勉強 | リンク | 編集履歴 | ・コーディング支援ツール ↑TOP aptana eclipseのプラグインのJS,CSS,HTML,XML,PHP,AIR等のエディタ コード補完機能やJavaScriptのクラスの階層表示もサポート 解説記事1 ，解説記事2，正式版情報 JSEclipse Adobe提供のecliseプラグイン。こちらも参照 コード補完機能や、オープンソースライブラリもサポート Spket IDE eclipseプラグインのJavaScript,XMLエディタ XUL/XBL,SVG,Lzszlo,Yahoo! Widgetをサポート Googlipse Google Web Tookit用
Ajaxの特徴に潜むリスクをサンプルアプリで確認しよう ― ＠IT
第1回 Ajax技術の目に見えない通信内容をのぞいてみようでは、Ajaxの技術背景を解説しました。今回は、「セキュリティ」という観点でAjaxを見ていきたいと思います。 2回目の今回は、非常に幅広く、奥が深い「Ajaxの特徴に潜むセキュリティリスク」を、実際のサンプルアプリケーションの通信や、マウスの動きを動画で見ながら、理解しましょう。スパイウェアやキーロガーへの基本的な対策も解説します。 通常のWebアプリと異なるAjaxの特徴に潜むリスク 「Ajaxのセキュリティ」といきなりいっても、『Ajaxとはいえ、単なるWebブラウザで動作するアプリケーションなのだから、これまでのWebアプリケーションのセキュリティとあまり変わらないのでは？』と予想される方も多いでしょう。確かに、Webアプリケーションとして注意すべきセキュリティのポイントは、Ajaxにおいても共通して当てはまると考えて問題あ
第1回 What is Ajax? - 今からでも遅くない Ajax基本のキ：ITpro
Web 2.0，Web API，リッチ・クライアント，SOA（サービス指向アーキテクチャ），アジャイル開発…などなど，相も変わらずWebアプリケーション開発の現場には，様々なキーワードが渦巻いています。現在その中でも特に注目されているのが，Ajax（Asynchronous JavaScript And XML）です。 Ajaxは，2005年2月にAdaptive Path社のJesse James Garrett氏が自身のコラム「Ajax: A New Approach to Web Applications」上で著したものが注目を浴び，記事や書籍などで紹介されたことから，急速に認知されるようになったキーワードです。筆者などは当時，「しょせんただのBuzzword（はやり言葉/空騒ぎ）だろう」と比較的冷ややかに思っていたものです。 しかし，その後1年を経て，いまだに衰える気配はありません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
ドラッグ＆ドロップAjaxの遊べるライブラリ６個*ホームページを作る人のネタ帳
