[フロントエンド] 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)
【メモ】XMLHttpRequestのイベントについて - Qiita
readyStateが4なら通信終了です status レスポンスのHTTPステータスです readyStateが2以上の時アクセス可能で、4になった時に最終的な値が確定します 0なら通信に失敗、0以外なら通信に成功したことを表します ただし、statusが0以外であってもサーバーへのリクエストが成功したとは限りません(404, 500など) XHRのイベント XHRが通信中に起こすイベントは以下の8個 onreadystatechange onloadstart onprogress onloadend onload onerror onabort ontimeout onreadystatechange もっとも古くから存在する(?)イベントです readyStateの値が更新されるたびに呼び出されます onloadstart open()メソッドが呼ばれたタイミングで呼び出されます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
