コールバックを使った非同期処理の実装例 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Fetch の中断と Promise のキャンセル方法の標準化 | blog.jxck.io
Intro XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。 これは、fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。 最近、やっと話が前進したので、ここまでの経過を解説する。 Fetch のミッシングピース fetch() は、ブラウザが発行するリクエストと、取得するレスポンスを扱う低レベルなインタフェースとして策定が始まった。 DOM の API が Promise ベースに移行しつつある流れを汲み、fetch() もまた Promise を返す関数一発スタイルになった。 クラスからインスタンスを生成しメソッドを呼ぶ XHR スタイルでは、インスタンスを再利用した場合の挙動などを含め、オブジェクトのライフサイクルを考慮
JavaScriptのFetch APIを利用してリクエストを送信する
JavaScriptにおいて、XMLHttpRequest（XHR）に代わるAPIとして、Fetch APIというものが提供されるようになりました。XHRと同等の機能を提供しますが、Fetch APIはよりシンプルで強力です。使い方を学んでみましょう。 基本的な使い方 Fetch APIはPromiseベースの簡単なAPIです。リクエストするにはfetch(url)を呼び出すだけです。 fetch('file.txt') fetch()メソッドはPromiseを返します。PromiseはResponseオブジェクトとして解決されます。返ってきたPromiseを実際に処理してみましょう。 fetch('file.txt') .then((response) => response.text()) .then((text) => console.log(text)) .catch((error
AJAXで書き換えたウェブページでバックボタンを使う – Naofumi Kagami
アップデート 下記のコード例では状態を保存するために input type=”text” を使いました。この値を表示したくない場合は、input type=”hidden” を使わずに style=”display:none” とした方が良いようです。ブラウザによっては（例えばSafariの5以降） type=”hidden”の値が保存されるとは限りません(Webkit Bugzilla)。input type=”text”とstyle=”display:none”の組み合わせに方が、異なるブラウザ間で確実に動作してくれそうです。 AJAXをたくさん使ったページでバックボタンを使えるようにしたいと思って、ウェブでいろいろ探しました。見つかったのは例えば Really Simple History (RSH)やYUI Historyなどで、以下に述べるようにかなり怖いぐらいのハックをしている
郵便番号から住所を取得する - Qiita
はじめに よくあるユーザー登録画面で、郵便番号を入力すると、 自動で住所が入力されることがあります。 あれって、どうやってるんだろうと思い、調べてみました。 ajaxzip3 https://code.google.com/p/ajaxzip3/というのが一番簡単だったので、 これを紹介します。 使い方は至ってシンプルです。 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"
GitHub - JakeChampion/fetch: A window.fetch JavaScript polyfill.
If you believe you found a bug with how fetch behaves in your browser, please don't open an issue in this repository unless you are testing in an old version of a browser that doesn't support window.fetch natively. Make sure you read this entire readme, especially the Caveats section, as there's probably a known work-around for an issue you've found. This project is a polyfill, and since all moder
Ajaxと組み合わせて便利なHistory APIを使おう - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示
XMLHttpRequest#responseURL について - xK.memo
今年の2月に WHATWG の XMLHttpRequest (XHR) の仕様に追加された responseURL プロパティが、先日 Firefox に実装された (https://bugzil.la/998076) のでそのことについて書く。 responseURL は XHR のリクエストに対するレスポンスの URL を文字列で返すプロパティで、リダイレクトが発生した場合は最終的なリダイレクト先の URL を返すようになっている。つまり Greasemonkey の GM_xmlhttpRequest にある finalUrl で取得できる情報と同じものを取得できるプロパティだと言える。 responseURL が XHR の仕様に追加される以前の状態でも、 xhr.responseType === "document" の場合に xhr.response.URL 経由で fina
Deferred挫折したけど非同期をスマートに書きたい人へ - Qiita
var img,img2; chain( function( next ){ img = new Image(); img.onload = next; img.src = "http://dummyimage.com/600x400/000/fff"; }) .chain( function( next ){ img2 = new Image(); img2.onload = next; img2.src = "http://dummyimage.com/600x400/000/fff"; }) .chain( function( next ){ setTimeout( next, 1000 ); }) .chain( function( next ){ console.log( "img,img2が読み込まれて１秒たった" ); }); (function(){ // TODO 綺麗に
[JS] XHR2の機能を学ぶ - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、とても便利なXMLHttpRequest version2の内容紹介を、ブログに書きたいと思います。 Special Thanks to https://flic.kr/p/mCxBaM この記事の目的 この記事は、XHR2の様々な機能を実装することを通して、XHR2について深く学ぶことを目的にしています。 自分はXHR2について便利そうだなぁという印象しか持っておらず、機能面や実装方法は無知でした。 そんな自分に対して、XHR2に対する確かな知識を持ちたいと思い、この記事を執筆することを決めました。 目次 XHR2とは XHR2とは、XMLHttpRequestのバージョン2です。W3Cではこちらのページで仕様策定が行われています。 XHR2では、XHR1で行えるサーバーとの非同期通信に加え、バイナリーデータを扱えたり、通信の進捗状況を把握
![[JS] XHR2の機能を学ぶ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/969d631f6467c175a72cc01a1b9846e2d530c88d/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F327.jpg)
jmblog.jp - preventDefault() と stopPropagation()
先日公開した「投稿スラッグ（Post slug）が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。（間違いがあれば是非ご指摘ください！） やりたかったこと WordPressの投稿画面で「公開（Publish）」ボタンをクリックしたときに、「投稿スラッグ（Post slug）」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。 最初に思いついた方法 まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn web development | web.dev
jQuery.ajax reloads page instead of performing ajax request in Safari on iOS