初めまして。 JavaScriptでどうにも分からない事が出来たため、ご質問させていただきます。 皆様の知恵をお借りいただければと思っております。 どうぞ、宜しく願いいたします。 ##XHRのresponseTextがうまく取得できない 趣味でJavaScriptとPHPの非同期通信を使ったアプリを作ろうとしています。 現在分からない事は、この非同期通信の部分でresponseTextが取得できません。 この"取得できない"と言うのは少し語弊がありまして "取得はできているが、そのデータを扱おうとした時に扱うことができない"の方が正しいかもしれません。 ##実際みてみる xhrオブジェクトの中身をみてみますと、やはり取得自体は出来ているようです。 しかしこれを js 1'use strict'; 2 3const w = window, 4 d = document 5 ; 6 7cons
JavaScriptでクライアントサイドからサーバーサイドへ非同期にHTTP通信を実行して別ベージのコンテンツやリソースの取得ができるFetchとXMLHttpRequestについての基礎知識のメモ。 FetchとXMLHttpRequestの違い どちらもJavaScriptで非同期にHTTP通信が実行できる「Fetch」と「XMLHttpRequest」の違い。 「Fetch」の方が「XMLHttpRequest」よりも新しく、機能が優れるので、現在は「Fetch」の方が推奨されている。 ほとんどの「XMLHttpRequest」の機能がIE対応だが、「Fetch」は完全IE非対応。 「XMLHttpRequest」はアップロードとダウンロードの両方の進行状況を追跡できるが、「Fetch」はダウンロードのみでアップロードの進行状況の追跡はできない。(仕様が更新される可能性あり。) 別ペ
先日Firefox30がリリースされました。 インターフェイスのChrome化が注目されますが、個人的には「同期 XMLHttpRequest が廃止予定」という点が気になりましたので、どういうことが起こるのか調べてみました。 Firefox 30 サイト互換性情報 同期 XMLHttpRequest が廃止予定となりました XMLHttpRequest コンストラクタの async 引数は初期設定で true となっており、false に設定するとリクエストを同期に変更できます。メインスレッド上での 同期リクエスト の使用、つまり ワーカー 以外での使用は、ユーザ体験に悪影響を及ぼすことから廃止予定とされ、開発者向けの Web コンソール に警告が出力されるようになりました。 jQueryによる同期XMLHttpRequestの例 DEMO jQueryを使用したAjaxの場合、以下のよ
はじめに 以前、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を使ってサーバーへ送信する方法について解説します。 この記事のポイント 送信するファイルデータをFormDataオブジェクトにセットして、Fetch APIで指定した送信先へ送信する FormDataオブジェクトには複数のファイルをセットして送信することも可能 Fetch APIでファイルをサーバーへ送信する ファイル選択(type=”file”)のinput要素などで選択したファイルは、Fetch APIとFormDataオブジェクトを組み合わせると簡単にをサーバーへ送信することができます。 以下の例では、送信ボタンをクリックすると選択したファイルをFormDataオブジェクトにセットして、Fetch APIでサーバーに送信します。 HTML コード例 <form method="post" action=""> <input type="file"
正直、ファイルのアップロードは考慮すべきことが多すぎてあまり関わりたくないのですが、そうも行かないのが世の定めw 今回はFetchAPIを利用してサクッとファイルをアップする手法についてまとめます。 サーバ側はPHPで実装しますが、考え方は他の言語でも流用できるのではないかと思います。 基本的な原理 FetchAPI ブラウザ側 サーバ側 入力内容をチェックする ブラウザ側 ファイルが選択されているか ファイル容量 ファイル形式 サーバ側(PHP) ファイルが正常に受信できているか ファイルが送信されていない ファイル受信時にエラーが発生 何らかのアタックを受けている ファイルサイズ ファイル形式(画像ファイルか) サンプル 実行例 コード HTML JavaScript PHP その他 HTMLでファイル形式を制限する PHPでファイル容量を制限する 参考ページ 基本的な原理 Fetch
こんにちは、@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に比べて
今更ですが、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サイトならともかく、データ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く