タグ

ajaxとjavascriptに関するreponのブックマーク (12)

  • はじめてajaxを使うときに知りたかったこと - Qiita

    はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する(タイムアウトを設定する) 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理

    はじめてajaxを使うときに知りたかったこと - Qiita
  • Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する - Qiita

    Deferred でない場合 コールバック処理を従来の success, error, complete で指定する方法。 こんな感じでプロジェクト特有の共通処理などを追加していることが多いと思います。 実装 var myAjax = function(arg) { var opt = $.extend({}, $.ajaxSettings, arg); opt.success = (function(func) { return function(data, statusText, jqXHR) { console.log('success時の共通処理 ...'); if (func) { func(data, statusText, jqXHR); } }; })(opt.success); opt.error = (function(func) { return function(j

    Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する - Qiita
    repon
    repon 2015/07/16
    “always(=complete)時の共通処理”
  • jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita

    続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',

    jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
  • jQueryのDeferredとPromise - tkawachi Blog

    JavaScript(というか CoffeeScript)って90年代にブラウザ上で使われていた頃のイメージが拭えず、どうも気持ち悪くて逃げて回ってたんですが、事情があって最近は渋々書いてます。 JavaScripterの皆様にとっては何を今更だとは思いますが jQuery.Deferredを使って楽しい非同期生活を送る方法 を読んで Deferred 便利だな、と思ったので理解したところをメモしておきます。 利用シーン $.get() ってエラーハンドリングできないのか。使えないなー。と思ったとき 複数の AJAX リクエスト(などの非同期処理)を同時に開始して、全部終わったら何かしたいとき。 Deferred object キーになるのは Deferred object です。 状態 Deferred object は状態を持ちます。状態は3つのうちいずれか。 未解決(unresolv

  • jQuery.ajaxの代わりにSuperAgentを使う - Qiita

    脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 superagentの良さ かわいい。 ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest scriptタグでsuperag

    jQuery.ajaxの代わりにSuperAgentを使う - Qiita
  • jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション

    はじめに 簡単にJSONまたはJSONPを読み込みたい場合は以前の記事を参照。 1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法 type 主にGETかPOSTを指定。受け取るときはGET、送信するときはPOST。 url 読み込み先または送信先のURLを指定。例えばJSONを読み込みたいときは以下のようになる。 $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json' }); $.ajaxのurlオプションを使用したサンプル cache キャッシュの有無をtrueかfalseで指定。注意しなければいけないのはJSONの場合はデフォルトでcache:true、JSONPの場合はcache:falseとなっている点だ。つまりJSONをキャッシュをしたくない場合はcache:falseを指定しなければならな

    jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション
    repon
    repon 2015/03/24
    ありがとうございます。jqueryで$.ajaxなどを使いjsonpをやりとりするときのパラメータ、data{}に埋め込む。urlにつけても良いが、callback関数が自動付帯なので末尾に「&」を忘れない。
  • PHPのイタい入門書を読んでAjaxのXSSについて検討した(3)~JSON等の想定外読み出しによる攻撃~ - ockeghem(徳丸浩)の日記

    昨日の日記の続きで、Ajaxに固有なセキュリティ問題について検討します。今回はJSON等の想定外読み出しによる攻撃です。これら攻撃手法は来ブラウザ側で対応すべきもので、やむを得ずWebアプリケーション側で対応する上で、まだ定番となる対策がないように思えます。このため、複数の候補を示することで議論のきっかけにしたいと思います。 まず、作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeから、Ajaxを利用したアプリケーションの概念図を引用します(同書P20の図1-23)。 前回、前々回は、(5)のHTTPレスポンスの前後で、JSON等のデータ作成(エンコード)に起因するevalインジェクションや、(5)のレスポンスを受け取った後のHTMLレンダリングの際のXSSについて説明しました。 しかし、問題はこれだけではありません。正常

    PHPのイタい入門書を読んでAjaxのXSSについて検討した(3)~JSON等の想定外読み出しによる攻撃~ - ockeghem(徳丸浩)の日記
  • これでできる! クロスブラウザJavaScript入門 記事一覧 | gihyo.jp

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    これでできる! クロスブラウザJavaScript入門 記事一覧 | gihyo.jp
  • Ajaxを使った非同期通信

    Ajax とは Asynchronous JavaScript + XML の略で、 Web サーバーとブラウザとの間で非同期通信を行う方法です。 Ajax の方法を利用することで、ページを切り替えることなくページの内容を書き換えることができるようになります。 JavaScript では Aax を用いた非同期通信には XMLHttpRequest オブジェクトを使用します。ここでは Ajax を使った非同期通信を行う方法について解説します。

    Ajaxを使った非同期通信
  • web2driver.com - web2driver リソースおよび情報

    web2driver.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、web2driver.comが全てとなります。あなたがお探しの内容が見つかることを願っています!

  • Ajax入門

    Ajax入門 Ajaxとは Ajaxは、エイジャックスとかアジャックスとか呼ばれます。新しい言語というよりは、技術(手法)の名前というのが正しいようです。 動的ページは、条件によって出力する内容を変化させるウェブページの事ですが、大きくわけて2種類あります。 1.サーバーサイドスクリプト 2.クライアントサイドスクリプト サーバーサイドスクリプトは、CGIやPHPのようにサーバー側で動作するスクリプト言語です。サーバーサイドにあるデーターベースにアクセスする事ができるため、簡単な掲示板スクリプトから通販サイトや受発注ページなど、データーベースがらみの処理に多く利用されます。 クライアントサイドスクリプトは、JavaScriptに代表される端末側で実行させるスクリプトです。サーバー側にあるデーターベースへのアクセスはできませんが、リロードなしで画面を書き換えられるといった、クライア

    repon
    repon 2011/10/22
    setIntervalでミリ秒おきに呼び出される設定をつくり、擬似同期させる。
  • Amazon最速検索 説明書

    デモ兼ダウンロード βバージョン β以前 XSLファイル 特徴 JavaScriptだけで動いています。 サーバーサイド処理は一切ありません。Amazonと直結です。 ローカルディスクに保存してもそのまま動きます。 だからどうしたという話ではありますが、面白いのはそこです。理解しろ。 Safariでは動きません 使い方 単語入れて検索。 続きがある場合は、続けてエンターを押すと、次の10件を読み込む。 動作の仕組み 簡単に書くと、検索実行されるたびにscriptタグを動的生成してAmazonウェブサービスにリクエストを発行、Amazonの側でXSLTによって生成されたJavaScriptのコードを実行して画面に検索結果を追加しています。 ただし、Amazonの側では単純なデータを返すのみで、実際の画面の制御は全てHTML側のJavaScriptに記述しています。 JavaScript

  • 1