jQueryのよく使いそうなAjax関係のAPIをまとめてみました ｜ スターフィールド株式会社
ページの更新性を高めたり、 ページの読み込みを早くしたり、ページ操作のストレスを軽減したりする目的で、 Ajaxが使われる機会はとても増えてきています。 jQueryはこのAjaxの機能を、とても使いやすくしてくれます。 ただ、その記述方法は目的によっていくつかあり、 その記述方法は昔のjQueryのバージョンとは変化してます。 そこで、今のjQuery(1.8以降)でのAjaxの基本的な使い方をまとめてみました。 「$.ajax()」: Ajax全般を扱う 通信を行うファイルの形式を選ばない、汎用的な方法です。 $(function(){ /*---------------- Ajax全般 ----------------*/ //最小限 $.ajax({ url: "module.html" }).done(function(data){ //ajaxの通信に成功した場合 alert(
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
jQuery 1.5でのAJAXの書き方: 細切れに書くことや、遅延処理が可能 - YomuKaku Memo
jQuery 1.5からjQuery.ajaxを呼ぶとjqXHRオブジェクトを返すようになり、deferredな処理が可能になっています。 モバイル向けのような単一ページでjavascript主体のアプリケーションにおいて、successやerrorのcallbackでサーバーからの返り値だけを取得しておき、deferredな処理が可能であることを活かして当該の返り値を加工したり、必要な処理をいくつか行った後に、completeのcallbackで処理を締めくくるような用途の多様化を想定した仕様変更なのかと思われます。 jQuery 1.5とjQuery 1.4で、AJAX処理の書き方は極端に変わったわけではありませんが、骨格としては以下のように異なります。 jQuery 1.4の場合 // ============== // = jQuery 1.4 = // =============
更新するのが面倒！サイトの共通部分を簡単に作る様々な方法
サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>
xmlをjQueryで読み込んで表示する時に注意すること
サンプルコード ひとまず例として以下のコードがあります。ajaxで読み込みます。 $.ajax({ url: "xml01.xml", async: true, cache: false, dataType:"xml", success: function(xml){ $(xml).find('text').each(function(){ var text = $(this).text(); $('.txt01').append('<p>' + text + '</p>'); }); } }); この場合、処理のところで内容を取得するのですが、そのとき.text()で取得するとテキスト内容がそのまま表示されます。 それで問題なければそれでよいのですが、aタグなどのリンクを反映したい場合はこれではダメです。 <text><a href="#">リンク部分</a>テキスト</text> この
美女にイタズラしたくてCanvasとAjaxを勉強してみた | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
美女にイタズラしたくてCanvasとAjaxを勉強してみた こんにちは、インターン中のファイ部の田口です。 突然ですが、美女に落書きできたら楽しいと思いませんか？ グラビアなどの女の子の水着写真を黒く落書きすると、まるで裸のように見えてエロくなるってのは、ネット上でひそかに流行ってます。 今回は美女に落書きしたいという男性の潜在的欲望にのっとって、jQueryのAjaxで美女の画像をネット上から取得しながら、HTMLのCanvasで落書きしたいと思います。大きな流れはこんな感じ。 [STEP1] AjaxでBjin.Meから美人の画像を取得 [STEP2] 美人の画像にCanvasでお絵描き [STEP1] AjaxでBjin.Meから美人の画像を取得 美人の画像を取得します。美人の画像はbjin.MeでAPIとして提供しています。 このAPIを使ってAjaxを用いて、画像を取得して行
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 追加される要素は一つひとつが ＜div＞で囲われるようになっており 個々にID名が付与されるようになっています。 ※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。 （ID名に関してはJSONファイルに記述） スクリプト14行目の「url: ‘js/include.json’」が 読み込むJSONファイルの指定になるので パスやファイル名を変える際にはここを変更します。 そして読み込むJSONファイルは以下の様になっています。 （ちょっとムダに長いです・・・） ◆JSON [ { "itemNum": "1", "itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加
location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみた | CYOKODOG
location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみました。大した処理じゃありませんが、jQuery プラグインのデモページとか作る際、複数パターンのデモがある時など毎回記述するのが面倒なのでプラグイン化してみました。ついでに location.hash のリンクリストも生成するようにしてます。 使い方 jquery.js、jquery.hash-contents.js を読み込んでおきます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="jquery.hash-contents.js"></script>
jQueryとJavaScriptでページ離脱時にAjaxをJSON送信する | debate
必要だったので、jQueryとJavaScriptでユーザがページ離脱したときに、Ajaxを送信したりイベントを実行しようとしたのですが、あまりにもFirefox(FF)、Safari、Chrome、InternetExplorer(IE)での挙動が違ったので、備忘録的にメモ。 結論からいうと、最終的にはIEと、FF、Safari、Chromeの２種類のブラウザを判定してAjax送信方法を切り替えるという方法で実装しました。 まずはページを離脱したときに動作させるjquery ユーザがページを離脱したときに確認分を出すコード。 $(window).on("beforeunload", function() { return "本当に移動しても良いですか？"; }); beforeunloadってのがページを離脱するときに動作するのですが、IEだとリンク内のJavascriptなどにも動作し
jQueryのAjaxでxmlをパースする - omnioo lab.
xmlのパースは今までphpのsimple_xmlみたいなものを使ってきましたが、なかなかこれだけでは仕事にならないというのもあって、最近はAjaxで処理してしまうという頻度が非常に増えています。実際はHTMLに吐き出される情報がローカルのみなのでHTMLソース時代には何も書かれていないというのが、問題なんだか問題じゃないんだか、むしろその方がいいのか...って話ですが、いわゆる素人さんにはそんなこと全然関係なくて、ただただ見てくれがいいという問題が最終的な落とし所になるので、Ajaxでいいじゃないかということになります。 $.ajaxメソッドを使う jQueryでxmlをパースするときは、$.ajaxメソッドを使います。かなり楽チンです。このメソッドはjQueryのプラグインみたいに使える（というか、Pluginはメソッドなのですが）ので、適当なオプションを与えるだけでかなり簡単に使え
jQueryのDeffered/Promiseを会得した(いまごろ) - ただのにっき(2013-04-17)
■ jQueryのDeffered/Promiseを会得した(いまごろ) なんか最近、やたらと非同期処理の文脈で「promise」というキーワードを見ることが増えて、なんか流行ってんのかなーくらいにしか思ってなかったんだけど、実はjQuery.ajaxを使っているときに恩恵を受けていたことを(いくつか実装してみて)ようやく理解したのであった。Deffered/Promiseが実装されたのは、もう2.0もなろうというjQueryが1.5のころの話である。鈍すぎる……。 というのも、あんまり理解せずにコピペしていたからなんだよな。かつてはこんな感じに書いていたjQuery.ajaxの呼び出しが: jQuery.ajax({ type: 'POST', url: '/', ..., success: function(){...}, error: function(){...} }); 何かのソ
pjax (pushState + Ajax) jquery plugin 使用方法 などなど
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 pjaxとは pjaxはpushStateとajaxを組み合わせた造語（pushState + ajax = pjax）となります。 pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメソッドとなります。 詳しい詳細はこちらの記事を参考によろしくお願い致します。 HTML5 History APIについて 再びPjaxに関してなんですが、ajaxを用いて表示内容を書き換え、さらにpushStateを用いてそれに対応するURLへと置き換えhistoryも辿れるようにする技術のことです。 ajaxによるパフォーマンス向上が期待できる他、よく使用されている#!（hashbang）を
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
IMJ | Webサイト構築・運用・コンサルティングはIMJへ
企業と生活者の接点が多様化している昨今はコミュニケーションチャネルを広く手がけるだけでなく、デジ タルとリアルを行き来する生活者に寄り添うマーケティングのあり方が必要とされています。 しかし多くの企業のマーケティング現場では縦割りの組織構造が弊害となって、「一貫性のあるエクスペリ エンス（体験）」を顧客（生活者・消費者）へ十分に提供できていないのが実情です。 最高マーケティング責任者（CMO）やマーケティング本部長といった意思決定を担う階層の方々の多く が、所属するマーケターには俯瞰的な視野による戦略立案や企画といった自社の成長に直接貢献するような 仕事や、クリエイティビティの高い業務へ注力して欲しいと考えています。 その一方で、現場業務を担うマーケターはデータの処理やレポート作成、各種のキャンペーンや施策の準備 と対応に追われ、目先の業務で手一杯です。デジタル技術に関する知識・知見を持つ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Beginner’s Guide to AJAX With jQuery | Envato Tuts+
保田窪整形外科病院
Awesome jQuery Infinite Scrolling Plugin Showcase | Script Hunter
jquery.fn/cross-domain-ajax at master · padolsey-archive/jquery.fn
ジセダイ―星海社がおくる、ノンフィクション・教養・WEBエンタテインメント
