XMLHttpRequest (XHR) は、JavaScriptなどのウェブブラウザ搭載のスクリプト言語でサーバとのHTTP通信を行うための、組み込みオブジェクト（API）である。 すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。 XMLHttpRequestを利用したWebアプリケーションは非常に多く存在し、例として、Google マップ、Facebookなどが挙げられる。 XMLHttpRequestは、マイクロソフトがOutlook Web Access 2000のダイナミックHTMLによるウェブインターフェースに活用するため、1999年公開のInternet Explorer 5においてActiveXオブジェクトとして実装したのが始まりである[1]。その後、2001年にMozillaプロジ
6月末くらいからRailsを触り始め、ようやく慣れてきたと思ったらRails3が出て涙を流してるのがおれです。そんなわけで会社のプロジェクトをRails3で書きなおしてます。 Rails2時代 Rails2時代のAjaxのリクエストは、link_to_remoteを使えば問題ありませんでした。こんな感じ <%= link_to_remote "hoge", :url => hoge_path,:update => "hoge_id" %> こうするとhoge_pathっていうURLにAjaxで通信して、返ってきたレスポンスでid="hoge_id"な要素以下を更新してくれてました。 Rails3時代 Rails3ではlink_to_remoteは廃止され、代わりに:remote => trueを使うようになりました。あと:updateもなくなったみたいです。こんな感じです。 <%= lin
Description: Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events. version added: 1.5jQuery.when( deferreds ) If no arguments are passed to jQuery.when(), it will return a resolved Promise. If a single Deferred is passed to jQuery.when(), its Promise object (a subset of the Deferred methods) is returned by
Ajaxを利用したコンテンツは、ユーザビリティを向上したりリッチなサイトを制作するために一役かってくれたりします。その反面Ajaxだけの視点で実装するとページ内を動的に書き換えていくため、SEOができなかったり、JSオフ環境だと閲覧できないというジレンマがあります。 解決方法を少しあげてみましょう。（以下主に全ページAjaxで構成されているようなサイトを前提にしています） 1. HTMLsnapshotを利用する SEOにも強いクローラブルなAJAXコンテンツを作成するためにという翻訳記事を先日書きましたが、Googleが対応している、というよりもGoogleにインデックスしてもらうための対応策ですかね。Twitterで導入されていますが、ユーザーが切り替えない限りはまだ旧サイトに飛んでいるはずなので、効果は分かりません。 システムの対応が必須 クエリをHTMLsnapshotに対応しない
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
この記事では、Facebook のあいさつ(Poke)機能への返信を題材に、沢山たまるとウザい嬉しいあいさつを自動で返すスクリプトを書くことで、Selenium2.x の使い方、特に Ajax アプリをテストする方法について学べるようにする。 Ajax がからんだWebアプリケーションのエンドツーエンドの最近のテスト手法についてのまとめにもなっていると思う。 最初の3節ぐらいは「Seleniumとは〜」とか「テストってのはさー」とかゴタクをごたごた書いているので、Seleniumの実際のコード見た方がはえぇよ。って言う人はコードが出てくるまで記事を飛ばすと良い。 こんな記事を気合入れて書いて公開した当日に…FacebookのUIが変わって…作ってたスクリプト動かなくなってしまった…orz。俺が何かやったり買うと事件が起きるんや・・「なにか買うとその直後に安くなったり、新機種がでたりするとい
はじめに 今回から全4回でリアルタイムWebの現状をとらえていきたいと思います。1回目となる今回は、リアルタイムWebについての概要です。 リアルタイムWebとは、データが集約されているサーバーの情報をリアルタイムで参照できる仕組みです。現在のWebシステムの場合、リアルタイムでサーバーの情報を得ようとすると、定期的にサーバーに問合せを行う必要があります。具体的には、クライアントスクリプトでリクエストを生成し、タイマーを使ってリクエストを投げるAjaxやMetaタグのリフレッシュ機能で、ブラウザからリクエストを定期的に投げるポーリングといった技術を使います。 これは、従来のWebシステムがHTTP通信を使ってクライアント、サーバー間の通信を行っているためです。 HTTP通信では、リクエストに応じてレスポンスを返すという1往復の通信の安全性を確保するための通信手順がとられています。そのため、
Tim Bray(GoogleのAndroid応援団長)が「#!」の入ったajax用URLを使用を批判している。 http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch new: さらならる「#!」URL批判 例にtwitterのtwitter.com/#!/timbrayを挙げている。 #!の働き サーバ側は#!の前までしか見えない。上の例だとサーバはtwitter.com/のリクエストを受ける #!以降はブラウザの中のジャバスクリプトが解釈する 何故#!を使うのか ajaxのアプリは古いブラウザでは基本的にURLを変更することができない… ただし#(フラグメント)以降はブラウザ内のJavaScriptからでも変更可能 なので、ajaxアプリケーションが自分の状態をURLバーに表示するために使われるようになった。 つまり
最近IEを利用していてAJAX通信（GET）がキャッシュされるのに困って対策を調べたので、その覚書きとして書きます。 現象 IEで非同期通信（GET）をすると、2回目以降の同URLへの通信がキャッシュさせる。 対策 １、POST通信を使う POST通信を使えば、リクエストがキャッシュさせることはないらしい。 ２、URLにユニークなリクエストパラメータを付与することで、毎回異なるURLでリクエストを送る。 こんな感じです。 http://localhost/sample.do?time=(new Date).getTime() [time=xxxxx]のところをJavaScriptを使って毎回ユニークにする。 ３、メタタグを使う [no-chace,expire]をメタタグに指定する。 ４、リクエストヘッダ("If-Modified-Since")を利用する。 "If-Modified-Si
CakePHPでAjaxで処理をするときは大抵controllerのaction(メソッド)でサーバサイドを実現するとは思うのだけれども、そのときに注意しなければいけないことがあったりする。 久しぶりにCakePHPでAjaxを使って、忘れかけていたのでメモ。 デバッグ情報を出さないようにする 開発中は基本的にサーバサイドからのデバッグ情報(CakePHPでいうとSQLログとか)は出したままにするけれども、Ajaxではそういう不必要な情報がレスポンスとして返されてしまうと機能しない。なのでデバッグ情報をOffにする。 Configure::write('debug',0); Ajax(XMLHttpRequest)以外でのアクセスを制御する Ajaxをメソッドで実現すると、そのままだとURLで直接アクセスしても動作してしまう。 それがどうしたというレベルかもしれないけれどもAjax以外のア
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も） AJAXのやりかたのまとめを、 ここ http://www.geocities.jp/xmldtp/index_ajax.htm に書いていますが、きょうは、「１．ＨＴＴＰを使った通信」の 「POSTの場合」について。 ■概要 POSTはGetの場合に対して、以下の２点が違うことは、 すぐに、想像できると思います。 １．生成したXMLHttpRequestのメソッドopenで、 GETと送っていたところをPOSTにする ２．生成したXMLHttpRequestを使って、sendするとき ""だったところに、内容をおくる。 でも、これで実験すると、送信できないときがありました。 そのとき、こうしたら、うまくいきました ３．openしたあと、生成したXMLHttpRequestを使っ
XMLHttpRequestオブジェクトを使えばJavaScript上からPOSTメソッドを実行できる。 しかし、先に紹介した「Cross-Browser XMLHttpRequest」はIEとFirefox（及び部分的にOpera）に対応したクロスブラウザーなXMLHttpRequestを提供するが、このPOSTメソッドにおいて微妙な挙動の違いが起きる。 これはXMLHttpRequestオブジェクトが生成するデフォルトのRequestHeaderの違いのようだ。 IEとFirefoxにおいて以下のようなコードを書いてサーバにデータをPOSTしてみた。 var req = new XMLHttpRequest(); if (req) { req.onreadystatechange = function(){ alert(req.readyState+":"+req.status); i
Ajax/JavaScriptライブラリをまとめておきます。（順不同） | 基本 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基本ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDF － API/サンプル/解説 Prototype.js Documentation － まとめサイト Prototype 1.6.0へのアップグレード実例紹
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く