This domain may be for sale!
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね! これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり!!SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました!!! これからWebサービスを作るなら、導入したいですね!!! これpjaxを使えば簡単に導入できるんです!!!よし!!! PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
株式会社LOUPE エンジニアチームの勉強会「LOUPE Study」の発表資料です。 第一回目の担当は僕。 テーマは「SinatraでのWeb開発について」でした。
ちょっとつまずいたので記録。 経緯。 http://textile.thresholdstate.com/でマークアップしたテキストをウェブブラウザで表示できないかと考えた(性懲りもなくまた無節操にいろいろ手を出してます)。 Textileを解釈してHTMLに変換してくれるJavaScriptのスクリプトを見つけたので、これを使おうと考えた。 Textileでマークアップしたテキストは表示するHTMLファイルとは別ファイルにしようと考えた。 そこでブラウザで表示されたときにjQuery.getメソッドでTextileで書かれたファイルを読み込もうとした。 Google Chromeを使ってテストしたら表示されなかった。ChromeのJavaScriptコンソールを開いてみると「XMLHttpRequest cannot load file:///(中略)/sample.textile. O
XMLHttpRequest を使用出来るようにする為の宣言。ブラウザにより異なる。 IE では、ActiveXObject("Microsoft.XMLHTTP") を使用。 IE のバージョンによっては、ActiveXObject("Msxml2.XMLHTTP.5.0") , ActiveXObject("Msxml2.XMLHTTP.4.0") , ActiveXObject("Msxml2.XMLHTTP.3.0") , ActiveXObject("Msxml2.XMLHTTP") なども使用出来る。 Mozilla 系ブラウザでは、XMLHttpRequest() を使用。 var xmlhttp = false; if(typeof ActiveXObject != "undefined"){ try { xmlhttp = new ActiveXObject("Micro
pjax = pushState + ajax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button. pjax works by fetching HTML from your server via ajax and replacing the content of a container element on your page with the loaded HTML. It then updates the current URL in the browser using pushState. This results in faste
どうもこんばんは。Toshikuraです。今回のTipsは【レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置】です。以前TIPSにて【jQuery 簡単かつ高性能なスライダー【bxslider】の設置】という記事を書きました。本家の方ではレスポンシブデザインに対応したスライダーへバージョンアップされていましたので、追記版としてメモしておきたいと思いました。スマートフォンでも問題なく表示されるのは嬉しいです。スライドの動きもCSS3を使用している為とてもスムーズです。 設置方法 > DEMO > DOWLOAD 設置方法は変わらずシンプルです。プラグインを読み込みdivやliの階層を書くだけです。 プラグインのダウンロードは本家サイトより行えます。 対応ブラウザ Firefox, Chrome, Safari, iOS, Android, IE7+ 読み込
XMLHttpRequest のクロスドメインの制約とは? まず XMLHttpRequest については ⇒http://ja.wikipedia.org/wiki/XMLHttpRequest すでにに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移なしにデータ送受信をできるAjaxの基幹技術である。(Wikipediaより引用) ただ、このオブジェクトは「別のサイトにHTTPリクエストを出すことが出来ない」という制約がかかっている。これがいわゆる「クロスドメインの制約」。 この制約は、「ウェブブラウザ上で動いているスクリプト言語からは別サイトにリクエストを出せないようにする」という、「ウェブブラウザのセキュリティ」によるものらしい。 だとすると、結局 XMLHttpRequest 以外に直接的にHTTPリクエストを出す機能がないから「XMLHttpReque
口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ!」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環
いい加減ドラッグ&ドロップでファイルをアップしたい! あまのです。 社内プロジェクトで久々にRubyとRailsをさわりました。 やっぱりRubyは書きやすくていいですね。 さて今回はドラッグ&ドロップで複数ファイルのアップロードです。 前々から、「そろそろブラウザでもドラッグ&ドロップでファイルアップロードしたい」と思ってたので、今回試しに作ってみました。 参考にしたサイト 篳篥日記 http://d.hatena.ne.jp/hichiriki/20101016 デモ 今回作るサンプルのデモを最初にお見せします。 chromeやSafari, Firefox3.6でUpload a fileに画像ファイルをドラッグ&ドロップしてみてください。 目標 最近のブラウザではドラッグ&ドロップでアップロード 対応していないブラウザは普通にファイルアップロード 複数ファイルに、もちろん対応 He
Ajaxを使うためにはページ内リンク (hash fragment=URLの#以降) を使うのが一般的*1 hash fragmentはサーバに送信されないから、JavaScript非対応のブラウザだと動作しない 特にサーチエンジンのクローラ等で問題になる*2 そこで Google は、#! が含まれる URL を hash を含まないものに読み替える仕組みを提唱している。例えば「www.example.com/ajax.html#!key=value」のサーチエンジン用URLは「www.example.com/ajax.html?_escaped_fragment_=key=value」になる。 TwitterやFacebookはこの仕様に従うことで、Ajax な UI と SEO を同時に実現している、というわけ。ということを調べたなう。 参照: Getting Started |
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く