フェッチ API の使用 - Web API | MDN
フェッチ API は、リクエストやレスポンスといったプロトコルを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの fetch() メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。 コールバックベースの API である XMLHttpRequest とは異なり、Fetch は Promise ベースであり、サービスワーカー で簡単に使用できる優れた代替手段を提供します。Fetch は、CORS やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。 基本的なフェッチリクエストは、以下のコードを見てください。 async function logMovies() { const response = await fetch("http://example.com/movies.
Fetch APIでフォームに入力されたデータを送信する | GRAYCODE JavaScript
フォームに入力されたデータ（入力値）をFetch APIによるAjaxでサーバーへPOST送信する方法について解説します。 この記事のポイント フォームの入力値はFormDataオブジェクトにセットして、Fetch APIで送信する FormDataオブジェクトにセットするデータは「ラベル」と「値」を組み合わせるように指定する Fetch APIでフォームに入力された内容をサーバーへ送信する ページにあるフォームで入力された内容をサーバーに送信するときは、Fetch APIとFormDataオブジェクトを組み合わせて使います。 フォームの入力値をセットしたFormDataオブジェクトを作成し、Fetch APIでサーバーにリクエスト（要求）を送信するときに「body」としてパラメータで渡すとフォームの入力された内容を送信することができます。 以下の例では、ページに5つの入力項目「氏名」「性
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
Fetch API を使うときの適切なエラー処理方法
TL;DR このへん書いてあることをかいつまんだだけです URL送りつけるだけだとなぜか伝わらないことがあったので書きました Fetch の使用 | Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch Response | Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Response Fetch API が 4xx エラーを reject してくれない | 無駄と文化 https://blog.mudatobunka.org/entry/2016/04/26/092518 Fetch API を使うときの簡単なエラー処理 まずは簡単なサンプルコードです。 エラーの処理はサービスごとにそれぞれやるべきことが
Promiseで簡単！JavaScript非同期処理入門【後編】
前回に引き続き、ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。今回は後編です。 前回のおさらい 前回は、こんなふうにPromiseを使うという例を紹介しました。それは、以下のようにAjaxでAPIにアクセスする例でした。 var fetchSomething1 = function() { return new Promise(function(resolve, reject) { // API1にアクセス doAjaxStuff(someOptions1, { success: function(data) { // 成功した場合 resolve(); }, fail: function() { // 何かしらエラーが発生した場合 reject({ message: 'APIにアクセスできませんでし
FetchとXMLHttpRequestの基礎知識。
JavaScriptでクライアントサイドからサーバーサイドへ非同期にHTTP通信を実行して別ベージのコンテンツやリソースの取得ができるFetchとXMLHttpRequestについての基礎知識のメモ。 FetchとXMLHttpRequestの違い どちらもJavaScriptで非同期にHTTP通信が実行できる「Fetch」と「XMLHttpRequest」の違い。 「Fetch」の方が「XMLHttpRequest」よりも新しく、機能が優れるので、現在は「Fetch」の方が推奨されている。 ほとんどの「XMLHttpRequest」の機能がIE対応だが、「Fetch」は完全IE非対応。 「XMLHttpRequest」はアップロードとダウンロードの両方の進行状況を追跡できるが、「Fetch」はダウンロードのみでアップロードの進行状況の追跡はできない。(仕様が更新される可能性あり。) 別ペ
【Javascript】Fetchを使ってサーバ（PHP）とデータのやり取りをする
はじめに 以前、jQueryを使ったAjaxの使い方について記事にしましたが、ライブラリに依存しないFetchという最近よく使われている方法をまとめてみました。 GET サーバからデータを受け取りたい時。 JavaScript側 fetch('request.php') // サーバ側のphpファイル .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す .then(res => { console.log(res) // やりたい処理 }) .catch(error => { console.log(error) // エラー表示 }); サーバ（PHP）側 request.php <?php // 渡したいデータ $res = 'Hello World！'; // 配列や連想配列でも可 // echoす
Fetch APIでファイルを送信する | GRAYCODE JavaScript
選択したファイルをFetch APIを使ってサーバーへ送信する方法について解説します。 この記事のポイント 送信するファイルデータをFormDataオブジェクトにセットして、Fetch APIで指定した送信先へ送信する FormDataオブジェクトには複数のファイルをセットして送信することも可能 Fetch APIでファイルをサーバーへ送信する ファイル選択（type=”file”）のinput要素などで選択したファイルは、Fetch APIとFormDataオブジェクトを組み合わせると簡単にをサーバーへ送信することができます。 以下の例では、送信ボタンをクリックすると選択したファイルをFormDataオブジェクトにセットして、Fetch APIでサーバーに送信します。 HTML コード例 <form method="post" action=""> <input type="file"
[HTML5] Fetch API でファイルをアップロードする - ねこの足跡R
正直、ファイルのアップロードは考慮すべきことが多すぎてあまり関わりたくないのですが、そうも行かないのが世の定めｗ 今回はFetchAPIを利用してサクッとファイルをアップする手法についてまとめます。 サーバ側はPHPで実装しますが、考え方は他の言語でも流用できるのではないかと思います。 基本的な原理 FetchAPI ブラウザ側 サーバ側 入力内容をチェックする ブラウザ側 ファイルが選択されているか ファイル容量 ファイル形式 サーバ側(PHP) ファイルが正常に受信できているか ファイルが送信されていない ファイル受信時にエラーが発生 何らかのアタックを受けている ファイルサイズ ファイル形式(画像ファイルか) サンプル 実行例 コード HTML JavaScript PHP その他 HTMLでファイル形式を制限する PHPでファイル容量を制限する 参考ページ 基本的な原理 Fetch
![[HTML5] Fetch API でファイルをアップロードする - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/4097d0ec035eef691c336f6e6ba22e0761b9e99f/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061406744%2F1701425407)
[フロントエンド] fetchを用いたAjax通信を行う - YoheiM .NET
こんにちは、@yoheiMuneです。 XMLHttpRequestに変わる次のAjax仕様としてfetchが策定されていますが、今日はそれを扱ったAjax通信をブログに書きたいと思います。 目次 fetchとは fetchとはwhatwgで策定されている、フロントエンドJavaScriptの次世代の非同期通信の規格で、XMLHttpRequestに取って代わるものです。例えば以下のような使い方ができます。 fetch('/user/1').then(response => { console.log(response.status); // 200 return response.json(); }).then(json => { console.log('json:', json); // json : { name : 'Yohei' } }); XMLHttpRequestに比べて
![[フロントエンド] fetchを用いたAjax通信を行う - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c3c5ab4dd05ae072ed3f42c0655f221c57bcc52f/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F478.jpg)
CORSまとめ - Qiita
今更ですが、CORS (Cross-Origin Resource Sharing)を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく、データ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascript-ローカルblob画像のURLをphpにアップロードします | yaoply.com
FormData: get() method - Web APIs | MDN
JavaScript - XMLHttpRequest とか Fetch API の実装例