タグ

ajaxに関するchanpon0のブックマーク (14)

  • Ruby on RailsのAjax処理のおさらい - Qiita

    何気に、アプリケーションで取り扱うデータ量が増えた場合や、大容量データをデータベースとやり取りする時なんかは、Ajaxを使ってデータ通信をバックエンド側に押しやることで、WEBフロント側のUXからパフォーマンスの悪さを改善できたりする。また、ネットワーク経路的にproxyサーバとかを中継するような環境間でデータのやり取りをする場合などに、proxy側で接続時間にリミットがかけてあったりすると、通常アクセスではデータ通信時間がリミットに達して503エラーとかになってしまうような処理でもAjaxで通信をバックエンド化することで、回避できたりもするのだ。 通信帯域が小さいスマートデバイスが主力である今のご時勢、Ajaxによる非同期処理は、言語やフレームワークを問わずに必須な技術になっている。 私の主力スキルはPHPなので、PHPJavaScript(jQuery)やWordPressでのAja

    Ruby on RailsのAjax処理のおさらい - Qiita
  • Railsのajax処理で部分テンプレートのみ更新する方法が便利 | EC-CUBEな日々

    railsで開発していると、ajaxで更新する処理を行うことがよくあります。 そんなとき、結果を受け取ってjQueryなどで値を操作して画面の一部分に更新内容を反映させるといった処理はよく行います。 そんなとき、一部の部分テンプレートだけ更新できれば便利だと思うことがよくあったのですが、そんな方法がちゃんと用意されていました。 今日はこの部分テンプレートのみ更新する処理について書こうと思います。 実はこの方法はcoffescriptにコードを書かなくてもすむ利点も有ります。Railsで開発を進めていると、Coffeescriptにコードを書くとコードが分断される感じがして、ちょっとやりづらい部分がありました。coffeescriptに処理を書かなくて済むためコードの可読性もあがるメリットもあります。 この方法のカギは、ajaxリクエストのレスポンスはjsファイルで受け取れるという点を使って

  • Rails 4のturbolinksについて最低でも知っておきたい事

    Rails 4のturbolinksについて最低でも知っておきたい事 (追記)turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ

    Rails 4のturbolinksについて最低でも知っておきたい事
  • 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処理の書き方
  • async:false とは何か。或いは、非同期処理を諦めるのはまだ早い! - Qiita

    JavaScript は非同期処理が基 jQuery は非同期処理を簡単にしてくれる Knockout MVVM における非同期処理パターン の三立てでお送り致します。 JavaScript は非同期処理が基 最近、こんな記事をいくつか見かけました。 「jQuery.ajax で結果が反映されない!困ったら async:false だ!」 これは Tips とは言えません。 async:false にすると何が変わるのか、正しく認識していますか? jQuery の API リファレンス には、こうあります。 Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. 同期リクエストは 一時的にブラウザをロックし、一

    async:false とは何か。或いは、非同期処理を諦めるのはまだ早い! - Qiita
    chanpon0
    chanpon0 2014/11/26
    ajaxで同期処理
  • JavaScript によるフォームの送信 - ウェブ開発を学ぶ | MDN

    完全な初心者はこちらから!ウェブ入門ウェブ入門基的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基CSS の基JavaScript の基ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

    JavaScript によるフォームの送信 - ウェブ開発を学ぶ | MDN
  • jQuery使いが知っておくべきjQueryテクニック8選 - Hack Your Design!

    1. jQuery 2.x vs 1.x 2. イベントハンドリングには on() を使うべし 3. AJAXには done(), fail() を使うべし 4. ajax()だけじゃなくショートカット・メソッドも活用すべし 5. find() を使って絞り込むべし 6. カスタムイベントを定義する 7. 属性を指定してDOMエレメントを生成できる 8. form送信時は serialize() を使って値をまとめて取得すべし 参考 記事はjQuery Advent Calendar 2013の23日目の記事となります。今回はjQuery使いとして覚えておきたいテクニックを個人的に8つピックアップしてみました。 日との時差の関係で更新が24日になっているでしょうが気にせずいきましょう。 1. jQuery 2.x vs 1.x 1つ目はテクニックというよりTipsになります。jQuer

    jQuery使いが知っておくべきjQueryテクニック8選 - Hack Your Design!
  • Fuel PHP で Ajax

    シンガポール在住のソフトウェア開発者です。なんだかんだでシンガも4年目突入。仕事もしくは趣味でやっていることをまとめています。 英語のブログは http://atmarkplant.com にあります Document やを読んでいてもどうも明確な答えが得られなくてはまっていましたが, どうやら読み違えと知識不足ではまっていました。 目標: jQuery の Ajax $.ajax でリクエストを投げて, Fuel PHP のコントローラで処理 結果を json で返して, そのデータを success で処理する このとき, ページのリフレッシュはしない ※jQuery の設定や, Fuel PHP の基礎知識は前提とします ※ ログイン処理を省きます ・まずはまってしまうのは, 通常のcontroller つまり, Controller_Template, Controller を 

    Fuel PHP で Ajax
  • jQuery.getJSON(url, [data], [handler]) - jQuery API 1.4.4 日本語リファレンス - StackTrace

    解説 HTTPリクエスト(GETメソッド)を使用してデータを取得します。 データはJSONとして評価されます。 jQuery.get(url, [data], [handler], [dataType]) のラッパメソッドです。 以下の呼び出しと等価です。 指定したコールバック関数は、通信が成功した場合に実行されます。 通信エラー時、通信完了時のハンドリングを行うには、jQuery.ajax(settings) を使用してください。 JSONP callbackname=?形式のパラメータを送信クエリに付与すると、別ドメインのデータをJSONPを使用して取得することができます。 "?"の部分は、jQueryが、"jsonp" + 現在時刻文字列 の文字列に置き換えてクエリを送信し、内部でコールバック関数を実行してくれます。 引数 url : リクエスト先のURL。 [data] : サーバ

  • ricollab Web Tech Blog » Blog Archive » 【重要】ricollabサービス終了のお知らせ

    いつもricollabをご利用いただき、ありがとうございます。 この度、誠に勝手ながら2018年2月28日をもちまして「ricollab blog」「郵便番号検索サービス」の各サービスを終了させていただきます。 日頃より利用いただいております皆様にはご迷惑をおかけすることとなり、誠に申し訳ございません。長らくのご愛顧をいただき、厚くお礼申し上げます。 ricollabは、2008年より運営を続けて参りました。しかし、この数年で利用者も大幅に減少しており、サービスとしての役割を終えたと考え、終了という判断に至りました。ご愛用頂いている利用者の皆さまにはご迷惑をおかけしますが、何卒ご理解頂きたく存じます。 ■郵便番号検索APIのご紹介 http://zipcloud.ibsnet.co.jp/doc/api https://github.com/madefor/postal-code-api

    chanpon0
    chanpon0 2013/02/17
    restfullなAPIについて。
  • Ajax.Request - Ajaxリクエストを行う - prototype.jsリファレンス

    この機能を実行するにはprototype.jsが必要です 構文 Ajax.Request(url, options) 引数: url=URL, options=オプション 「Ajaxリクエストを行う」サンプルコード <html> <head> <title>Ajax.Request - Ajaxリクエストを行う</title> </head> <!--Ajaxリクエストを行うのサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> function execute() { var a = new Ajax.Request( "/samples/ajax/test.php", { "method": "get", "parameters":

  • 「SEO」とは(おさらい編)

    今さらですけど、「SEOってどんなもの?」 っていうおさらい的な記事を書いてみます。 一部の業者さんによってSEOへの認識は まったく違うものになってしまい、頭の良い 人まで勘違いするようになってしまいました。 残念な事です。 というわけで、おさらい。SEOとは何か、について簡単に。とくに釣られたわけではないでs SEOとはSEOはサーチエンジン最適化の略称です。現在はもうGoogleが主流なのでGoogleに最適化するのがSEO、という認識で大体あってます。勿論、人が使う検索エンジンは他にも沢山ありますが。 では、「最適化」とはどういったものを指すのでしょうか、という話なんですが、まぁ最適化する為の施工なので、 ユーザーにとって有益でないコンテンツを表示させないようにするクローラーにsitemapを送信してインデックスするのを助けてあげるURLの変更等で、適切なリダイレクト処理を行うそも

    「SEO」とは(おさらい編)
    chanpon0
    chanpon0 2011/07/06
    クローラー
  • 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 で動作確認をしていま

    chanpon0
    chanpon0 2010/09/26
    Ajax、こんなことも出来んのか。。IMEもWebアプリ時代。
  • Ajax技術の目に見えない通信内容をのぞいてみよう ― @IT

    Ajax(エイジャックス)の登場によって、ブラウザのプラグインソフトに頼らなくても、見た目が華やかで動きも面白いWebアプリケーションの開発が可能となりつつあります。筆者のみならず、読者の皆さんもこの技術の行方に興味津々といったところでしょう。連載では、ブラウザ上での「見た目」だけに注目するのではなく、技術の背景や目に見えない通信内容、セキュリティといったところにも焦点を当て、より深く掘り下げていきたいと考えています。 はじめに まず、読者の皆さんは、なぜAjaxに興味を持たれたのだろうか? おそらく、GoogleローカルやGoogleサジェストが、そのきっかけの1つになったのではないかと予想する。確かに、地図が滑らかにスクロールしたり、キーを入力するたびに画面がリアルタイムに切り替わったりする点は、これまでのWebページにはなかった新しい「感触」で、感嘆の声を上げた方も少なくないだろ

    Ajax技術の目に見えない通信内容をのぞいてみよう ― @IT
  • 1