タグ

ajaxに関するaki77のブックマーク (253)

  • uu59のメモ | RailsとJS(vue.js)の連携

    前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが

    aki77
    aki77 2014/07/02
    『jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。』
  • CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 | DevelopersIO

    CORS(Cross-Origin Resource Sharing)って何? CORS(Cross-Origin Resource Sharing)は、その名の通り、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。各社のブラウザには、クロスドメイン通信を拒否する仕組みが実装されています。これは、クロスサイトスクリプティングを防止するためです。Aというサイトに訪問したのに、Bというサイトに向けて個人情報を送っていたというのは困りますよね。例えば、オリジンから読み込んだHTML内のJavaScriptでJSONデータを読み込むとしましょう。JSONデータが同じサーバにあれば普通に読み込めますが、別のサーバにある場合は読み込めません。まぁ実際のところはJSONPという仕組みを使ってできちゃったりしますが、抜け道的なやり方で使われていました。CO

  • XMLHttpRequestを使ったCSRF(補足編) - 葉っぱ日記

    XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記を書いていて思ったけど、いまいちXHRを使ったCSRF(というかクロスオリジン通信)について理解されていないような感じだったので、ちょっと書いておきます。とりあえず日語のリソース的には、HTTP access control | MDN が詳しくて、それを読めばだいたい事足りるんで、あとはCSRFに関連しそうな話題だけ。 Q. そもそも「クロスオリジン」って何? スキーム、ホスト、ポートの3つの組み合わせが一致している場合を同一オリジン(same-origin)、いずれか一つでもことなる場合をクロスオリジン(cross-origin)と言います。つまり、XHRでドメインを超えて通信している場合は典型的なクロスオリジン通信となります。 Q. え? XMLHttpReuest って他のドメインにリクエストを発行できないんじゃ い

    XMLHttpRequestを使ったCSRF(補足編) - 葉っぱ日記
    aki77
    aki77 2013/03/04
  • jQueryのDeferredを用いたモダンなAjax処理の書き方

    目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か?【発展編2】$.when() を用いた書き方参考エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryのとかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes

    jQueryのDeferredを用いたモダンなAjax処理の書き方
    aki77
    aki77 2012/12/14
  • jQuery.LazyJaxDavisで静的サイトを手軽にダイナミックにする

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。 jQuery.LazyJaxDavis加えて、結構汎用的なURLルーターの機能も備えて

    jQuery.LazyJaxDavisで静的サイトを手軽にダイナミックにする
    aki77
    aki77 2012/04/04
  • Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found

    2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単

    Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found
    aki77
    aki77 2011/11/16
  • backbone.jsがいつのまにかpjax対応していた

    ■概要 年初にbackbone.jsの調査をしていた頃は、ajaxで画面遷移を行うには、fragmentを利用する事しかできませんでした。 しかし0.5以降では、Backbone.Routerを利用する事によって、pjax(HTML5のpushStateを利用した話題のあれ)な画面遷移が出来るになっています。 pjaxについては、こちらをご参照ください。 またgithubのファイルブラウザはpjaxの良例として有名なのでチェックしてみて下さい。

    backbone.jsがいつのまにかpjax対応していた
    aki77
    aki77 2011/11/05
  • jquery-mockjax 使えよ色々と捗るぞ - present

    jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。 あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。 できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。 API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。 appendto/jquery-mockjax · GitHu

    jquery-mockjax 使えよ色々と捗るぞ - present
    aki77
    aki77 2011/11/03
    『jquery-mockjax は jQuery.ajax のふるまいをモックと差し替える jQuery プラグインです』
  • 本当はそれなりに面倒くさいJavaScriptとhistoryとAjaxのお話 - 愛と勇気と缶ビール

    口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ!」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環

    本当はそれなりに面倒くさいJavaScriptとhistoryとAjaxのお話 - 愛と勇気と缶ビール
    aki77
    aki77 2011/11/01
  • jQuery.ajax でリクエストをキャッシュさせない方法 - 葉っぱ日記

    jQuery.ajax を使ってGETでリソースにアクセスした場合、IEでは2回目以降のリクエストが実際には発行されずにキャッシュされた結果が使われてしまいます。これを防ぐには $.ajax( { url : "http://example.com/", cache : false, data : { a : "abcd" }, ... } ); のように、cache オプションに false を指定すればいいようにドキュメント(http://docs.jquery.com/Ajax/jQuery.ajax#toptions)に書かれています。実際に cache : false を設定してみると、リクエストの発行される URL は、 http://example.com/?a=abcd&_=1253861397368 のようにクエリの末尾に現在時刻のミリ秒が付加されたものになります。 たい

    jQuery.ajax でリクエストをキャッシュさせない方法 - 葉っぱ日記
    aki77
    aki77 2011/10/27
    クエリを追加したくない場合はリクエストヘッダで If-Modified-Since を設定する
  • ajaxしまくるページで不要な処理はabortすべし

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ポチってもうたー開発メモ。 UIだけJSでいじってる時はそこまで慎重になることでもないけども、頻繁にガシガシajaxする場合は、既に走っているajaxリクエストもうまいことハンドリングすべき。ポチってもうたーでは、ツイートをJSONで返すよう、サーバーサイドでサービスを用意しているわけだけれども、まぁ、普通に考えれば、こんな感じで、JSON返ってきたらUIを更新するってやるんじゃないだろーか。 $.ajax(url, query).then(function(){ // UI更新しちゃう }, function(){ alert('ゴメンなんか変'); });しかし、これには問題があって、JS

    ajaxしまくるページで不要な処理はabortすべし
    aki77
    aki77 2011/10/03
  • PHPのイタい入門書を読んでAjaxのXSSについて検討した(1) - ockeghem's blog

    このエントリでは、あるPHPの入門書を題材として、Ajaxアプリケーションの脆弱性について検討します。全3回となる予定です。 このエントリを書いたきっかけ twitterからタレコミをちょうだいして、作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeというを読みました。所感は以下の通りです。 タレコミ氏の主張のように、書はセキュリティを一切考慮していない 主な脆弱性は、XSS、SQLインジェクション、任意のサーバーサイド・スクリプト実行(アップロード経由)、メールヘッダインジェクション等 脆弱性以前の問題としてサンプルスクリプトの品質が低い。デバッグしないと動かないスクリプトが多数あった 上記に関連して、流用元のソースやデバッグ用のalertなどがコメントとして残っていて痛々しい 今時この水準はないわーと思いました。以前

    PHPのイタい入門書を読んでAjaxのXSSについて検討した(1) - ockeghem's blog
    aki77
    aki77 2011/09/05
  • http://blog.yuku-t.com/entry/20110823/1314111340

    http://blog.yuku-t.com/entry/20110823/1314111340
    aki77
    aki77 2011/08/29
  • 第19回html5とか勉強会 PJAX ~HTML5時代のAJAXサイトプラクティス~

    16. Htmlを見ても分からない<header> <h1> bad ajax sample. </h1> - doesn't care about states ;-( - </header> <nav> <ul> <li><a href="/0">semantics</a></li> <li><a href="/1">offline</a></li> <li><a href="/2">device</a></li> <li><a href="/3">connectivity</a></li> </ul> </nav> <article> </article> </body>

    第19回html5とか勉強会 PJAX ~HTML5時代のAJAXサイトプラクティス~
    aki77
    aki77 2011/07/14
  • 5509.me

    This domain may be for sale!

    aki77
    aki77 2011/03/03
  • http://neteye.github.com/activity-indicator.html

    NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b

    aki77
    aki77 2011/02/19
    画像なしのローディング 『A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML.』
  • Tim Bray: 「URLに#!入れるな」 - karasuyamatenguの日記

    Tim Bray(GoogleAndroid応援団長)が「#!」の入ったajax用URLを使用を批判している。 http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch new: さらならる「#!」URL批判 例にtwittertwitter.com/#!/timbrayを挙げている。 #!の働き サーバ側は#!の前までしか見えない。上の例だとサーバはtwitter.com/のリクエストを受ける #!以降はブラウザの中のジャバスクリプトが解釈する 何故#!を使うのか ajaxのアプリは古いブラウザでは基的にURLを変更することができない… ただし#(フラグメント)以降はブラウザ内のJavaScriptからでも変更可能 なので、ajaxアプリケーションが自分の状態をURLバーに表示するために使われるようになった。 つまり

    Tim Bray: 「URLに#!入れるな」 - karasuyamatenguの日記
    aki77
    aki77 2011/02/11
  • jQuery Form Plugin

    Overview The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn't get any easie

    aki77
    aki77 2010/12/15
  • SEOにも強いクローラブルなAJAXコンテンツを作成するために :: 5509

    AJAXコンテンツが増えるにつれて問題になるのは、SEOというか、検索エンジンにどうクローリング、インデックスさせるのか、という点ですよね。 この前JavaScriptの実装を担当した松クリニックは、AJAXでほぼ全てのページを切り替えるっていうのが最大のポイントなんですけど、これの良いところはWordPressで全てのページを生成してて、JSオンでもオフでも見られるんですね。つまり、クローラはオフのコンテンツを見るような作りにしてあります。 で、こういうのって小規模~中規模なサイトならまだいいと思いますけど、大規模なサイトになってきたりするとページは存在しないでデータだけが存在したりする(ハンドラにリクエストをかけてJSONだけを返してもらって内容を入れ替える、など・・・)わけで、実現が難しくなるんですね。 この問題に対してGoogleが現在公表している方法は、HTML snapsho

    aki77
    aki77 2010/11/19
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    aki77
    aki77 2010/10/19
    『ちなみにHTML5のhistory.replaceStateやhistory.pushStateは画面遷移しないでアドレスバーのURLを同一ドメインの別のURLに書き換える(location.pathname部分を)仕様があって、ChromeやSafariで既に動いているみたいだし』