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 の命
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サイトならともかく、データ
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
Forms in HTML documents
17.1 Introduction to forms An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail
Angular2のHttpモジュールを眺めてベストプラクティスを考える - Qiita
@laco0416 です。今回はHttpモジュールの機能を眺め、アプリケーション中で使う際のベストプラクティス案みたいなものを考えていこうと思います。 なお、本稿で扱うAngular2のバージョンはbeta.0です 基本的な使い方 まずはざっとAPIリファレンスを眺めます。 https://angular.io/docs/ts/latest/api/ 重要なのは以下のシンボルです。 HTTP_PROVIDERS Http Request Response HTTP_PROVIDERSはHttpクラスのインスタンスをDIで取得するために必要なプロバイダのセットです。テストでモックサーバーなどを差し込みたい場合はこのプロバイダをいじくります。 HttpはAjaxの主役、いわゆるクライアントです。このクラスのメソッドでリクエストを送り、レスポンスを受け取ります。 RequestはHttpクラスが
Using cross-origin resource sharing (CORS) - Amazon Simple Storage Service
Cross-origin resource sharing (CORS) defines a way for client web applications that are loaded in one domain to interact with resources in a different domain. With CORS support, you can build rich client-side web applications with Amazon S3 and selectively allow cross-origin access to your Amazon S3 resources. This section provides an overview of CORS. The subtopics describe how you can enable COR
xdomain.jsを活用してAngularJSでIE9のCORS対応を行う｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
今年に入ってから書類のやり取りで封筒の宛名書きが大幅に増え、手書きに限界を感じ、テプラGrand WR1000を導入したのは良かったものの、ドライバーがYosemite対応されておらず、ラベルを作成するためだけに、都度VirtualBoxでWindowsを立ち上げている代表の国本です。 Internet Explorer(通称IE)。Web業界に携わる人間であれば、このIEに悩まされることは度々あるかと思いますが。今回はAngularJSでIE9のCORS(Cross-Origin Resource Sharing)対応を行う方法を簡単に紹介しようと思います。 IE9でのCORSについて 周知の通り、IE9ではXMLHttpRequestによるCORSをサポートしておらず、IE9でAjax通信を行い、かつ異なるドメインのリソースにアクセスしたい場合(いわゆるクロスドメイン通信)、IE独自の
XMLHttpRequest でのステータスコード 304 (Not Modified) について - tilfin's note 跡地
IE の Ajax (XMLHTTP) で、通信が行われたかキャッシュが使われたかを判定する方法 - IT戦記 を読んで、レスポンスのステータスコード見るのが本来のやり方なのではと思い、試してみたら意外な結果になった。 テスト content.txt を採りに行って表示するだけの下記のサンプルをそれぞれブラウザで表示して、リンクをクリックしたときレスポンスコードがどうなるか試してみた。 Internet Explorer 用 <html> <head> <script type="text/javascript"> function test(){ var req = new ActiveXObject('Microsoft.XMLHTTP'); req.onreadystatechange = function(){ if (req.readyState == 4) { alert(re
CORS 対応時の注意点などメモ - Qiita
同じオリジンのAPIと非同期で通信、という場合は xhr で普通にこなしてますが、別ドメインのAPIと非同期で、となると割とつまづくポイントがあったのでメモ。 こちらのサイトが大変分りやすかったです。 CORSではまったこと http://inside.pixiv.net/entry/2014/12/16/181804 xhr2 を使う 特に何かしなくても、ブラウザがxhr2対応しているものであればxhr2を使うことになります。 逆にいうと、xhr2 対応していないブラウザだとダメ。 とりあえず普通に実装する 特にクロスドメインであることを気にかけず、クライアントサイド、サーバサイドそれぞれをまずは実装します。 Origin 許可する サーバサイドでアクセス元となるOriginを意識して設定する必要があります。 サーバサイドのレスポンスヘッダの追加 クライアントサイドはモダンブラウザなら特
APIサーバを Rails、フロントエンドを AngularJS で開発する [その③] - Qiita
前々回の その①：考察編 、前回の その②：環境構築編 の続きで、その③：実装編 です。 実際に Rails と AngularJS のアプリケーションを開発してみました。前にも載せましたが、こいうの。 シングルアプリケーション構成で、画面をリロードせずに、データの追加/削除ができます。 Rails と AngulaJS の関係は次のような感じ。Rails は API に徹します。画面まわりは AngularJS で。 フロントエンドのソースは、Rails と同一ソースツリー内にあり、稼働サーバにも Rails と同時にデプロイされますが（クロスドメイン、クロスオリジンではない）、Rails とは独立した開発環境を持ちます。 最終的なソースは GitHub に載せたので、ページ最後のリンクからご覧ください。 ① Rails で Scaffold し CRUD の流れを生成 ゼロから作っても
![APIサーバを Rails、フロントエンドを AngularJS で開発する [その③] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7cdf060904245c1945fc6c54745a9ac25be8ebbe/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9QVBJJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgyJTkyJTIwUmFpbHMlRTMlODAlODElRTMlODMlOTUlRTMlODMlQUQlRTMlODMlQjMlRTMlODMlODglRTMlODIlQTglRTMlODMlQjMlRTMlODMlODklRTMlODIlOTIlMjBBbmd1bGFySlMlMjAlRTMlODElQTclRTklOTYlOEIlRTclOTklQkElRTMlODElOTklRTMlODIlOEIlMjAlNUIlRTMlODElOUQlRTMlODElQUUlRTIlOTElQTIlNUQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWE5NjNmNjEzZjFlNzczMTdiNjM5NWFkMDM3NmY2Yzc1%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGt1c3UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTgzODlkZjUwMzQyMTYxZTIxNzkwY2ZmOGViMjg4M2Fh%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D18a004498e853cc113b357919ee8a8bf)
AngularJSで$httpの返すPromiseにどのようにsuccess / errorが追加されているか調べてみた - Qiita
応用可能性の低そうなメモ。 AngularJSの\$httpでは、戻り値のpromiseについて、通常のthenのほかに、success / errorを使うことができます。これはどうしてなのでしょうか？AngularJSのpromiseの隠し仕様で、戻り値の関数名を指定することができるのか、それとも隠しメソッドとして、sucess / errorを持っているのか？などと妄想が膨らんでしまいます。 そこで、AngularJSのコードを読んでみると、大したことはなく、 promise.success = function(fn) { promise.then(function(response) { fn(response.data, response.status, response.headers, config); }); return promise; }; promise.erro
AngularJSでAjax通信エラーを共通処理 | つかびーの技術日記
今回はAngularJSで通信エラーが発生したときに共通して処理を行う方法について解説します。 デモ ボタンが２つありますが、片方は正常にリクエストが通って成功します。もう片方は404エラーになります。エラーになったときはtoasterという通知ライブラリでエラー内容を通知しています。 httpErrorInterceptorというサービスを作ってconfigフェーズでそれを使うように指示しています。 return $q.reject(rejection);という部分で結局はエラーを流しているので何もしないとき同様Consoleにエラーが出たりはします。 これの良いところは色々あるかと思います。 エラーが発生したときにユーザが分かるので、何らかのアクションを行うことができる エラーが発生したときにエラー内容をどこかに送ってfluentdで収集とかできる いちいち個別にerrorメソッドの中
JavaScript : XHR - IE ではJSON-RPCのレスポンスに注意する。 : typeOf 'aki_mana'
Http.Client を使って、JSON-RPCを手元のブラウザで確認していたところ、IEだけエラーになる。 Google先生に教わった XHRによるPOSTのコードを参考に、requestHeader() への設定とか、 色々、工夫したんだけど、ダメ。 IEの開発者ツールで 調べると、xhr.responseText な部分で SCRIPT58734: なエラーが発生してフリーズ。 Node.js 上で作ったサーバープログラムなので、チョット前に書いた JavaScriptソース[UTF-8]内の日本語の文字化けと、同様な現象が起こってるのかもしれない。 てことで、Nodeのサーバー側JavaScriptでは、Content-Type: application/json を返すべき時に、Content-Type: text/plain に無理やり変更してレスポンスすると、IEのXHRで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sinonjs/nise: Fake XHR and fake server
Closure Compiler and Http Requests
GitHub - vfaronov/httpolice: Validator for HTTP
What does "pending" mean for request in Chrome Developer Window?
AngularJSからX-Requested-Withヘッダは既に除かれている - Kazzzの日記
GitHub - jpillora/xdomain: A pure JavaScript CORS alternative
JavaScriptプログラミング講座【クロスオリジンリソースシェアリングについて（CORS）】
