高速かつスムーズなページ遷移を実現する pjax 覚書 - Qiita
★2018/04/13投稿 → Barba.jsを使った実装方法を書きました pjaxをざっと触ってみたので、自分用にメモ。 少々癖はあるが、シームレスなページ遷移の実装や、読み込み速度の向上が可能。 まだまだ使いこなせてないので、マスターしたい（切実） ★pjaxについてはこちら → http://falsandtru.github.io/jquery-pjax/ 準備 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
非同期通信（Ajax）をするときはタイムアウト処理を必ず入れてほしい（切実） - Qiita
非同期通信（Ajax）を行うとき、きちんとタイムアウト処理を入れていますか？ スマートフォンやタブレットでWebサイトを閲覧しているとき、地下に入ったりして通信ができなくなるというケースは頻繁に起こります。そんなとき、きちんとタイムアウト処理をしていないと、場合によってはいつまで経ってもローディングが終わらず、ユーザーが離脱してしまうということが起こります。質の高いWebコンテンツ制作のために、必ずタイムアウト処理は入れましょう。 jQueryでの実装例 たとえばjQueryでAjaxを扱うajax()メソッドには、timeoutという便利なオプションがあります。timeoutに指定した時間（ms）が経過しても通信が完了しない場合、エラー処理が実行されます。手軽に実装できるので、ajax()メソッドを使うときは必ず設定しましょう。 // 10秒経っても通信が成功しない場合は失敗処理を実行す
JavaScript window.setIntervalに注意 - 弱小PHPerの憂鬱
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。 JavaScriptで定期的に実行したい関数がある場合、window.setIntervalを使用することがあるかもしれません。 window.setIntervalは指定した時間毎に関数を実行してくれる便利な関数です。 で、うっかり関数内でsetIntervalを使用した場合、実際うまく動いているように見えることが多いので気付かないかもしれませんが、実は内部で恐ろしいことが起こっています。 <div id="hoge"> <script type="text/javascript">hoge();</script> </div> <script type="text/javascript"> function hoge(){ $.get("hoge.php", function
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
RESTful 形式の Google AJAX Feeds API を使って、フィードを JSONP で取得する - WebOS Goodies
JavaScript のみで任意のフィードが取得できる Google AJAX Feeds API は、とても便利ですよね。活用されている方も多いと思います。でも、余計な機能も含んだ外部ライブラリを読み込むのがイマイチなところ。ページロード時間を気にする場合はちょっと利用を躊躇してしまいます。 ところが、そんな欠点も、実は既に解消されています。今年の 4 月に Flash など JavaScript 以外の言語のために RESTful 形式の API が追加されたのですが、それに callback の指定がちゃっかり存在しており、 JSONP でアクセスできるのです。これなら外部ライブラリを読み込む必要もなく、気軽に利用できます。とくに JSONP に慣れている方は、 JavaScript API よりも楽に覚えられるでしょう。 ということで、本日はその RESTful API を利用して
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
jQuery: ajax メソッドのヘッダーを変更する
jQuery 1.5 以降であれば headers プロパティでヘッダーを指定することができる。 $.ajax({ url: '/test', type: 'PUT', headers: { 'X-HTTP-Method-Override': 'PUT', 'Content-Type': 'application/json' }, dataType: 'json', data: '{"test": "テスト"}', }).done(function() { console.log('成功'); }); Content-Type のために contentType プロパティも用意されている。複数のヘッダーを指定する場合は、headers プロパティにまとめておいたほうが散らからずにすむだろう。 headers: { 'X-HTTP-Method-Override': 'PUT', }, co
morris.js
Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 2 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 4 <script src="//cdnjs.cloudflare.com/ajax/libs/mo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
