Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
合わせて読んでください：Flashと特定ブラウザの組み合わせでcross originでカスタムヘッダ付与が出来てしまう問題が未だに直っていない話 (2014-02/07) XMLHttpRequestを使うことで、Cookieやリファラ、hidden内のトークンを使用せずにシンプルにCSRF対策が行える。POSTするJavaScriptは以下の通り。(2013/03/04:コード一部修正) function post(){ var s = "mail=" + encodeURIComponent( document.getElementById("mail").value ) + "&msg=" + encodeURIComponent( document.getElementById("msg").value ); var xhr = new XMLHttpRequest(); xhr
JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保ってきましたが1、ここ3〜4年でより新しいAPIであるfetch APIが登場しました。fetch APIが出たばかりの頃は何だこのおもちゃはと正直思いましたが、いつの間にか仕様が充実していい感じになっていました。 皆さんは、この新しいAPIであるfetchをちゃんと使っているでしょうか。それとも、古いXHRを未だに使っているのでしょうか。この記事では、未だにfetchを使っていない人を主な対象としてfetchの使い方を解説します。（XHRと比較しながら解説するので$.ajaxとかaxiosとかしか使ったことがな
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法：HTML5時代の「新しいセキュリティ・エチケット」（3）（1/2 ページ） 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。前回は、同一オリジンポリシーを突破する攻撃の代表的事例であるXSSについて、特にDOM based XSSと呼ばれるものについて解説しました。今回はその続きとして、XMLHttpRequestによるXSSを解説します。 XHR Level 2によるリモートからのコード挿入によるXSS 従来、XMLHttpRequest（以下、XHR）は、表示しているドキュメントと同じオリジン（オリジンについては第1回を参照）としか通信できませんでしたが、現在の主要なブラウザーではXHR Level 2と呼ばれる実装により、オリジンを超えて通信することが可能になっています。 これは、Jav
XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記を書いていて思ったけど、いまいちXHRを使ったCSRF(というかクロスオリジン通信)について理解されていないような感じだったので、ちょっと書いておきます。とりあえず日本語のリソース的には、HTTP access control | MDN が詳しくて、それを読めばだいたい事足りるんで、あとはCSRFに関連しそうな話題だけ。 Q. そもそも「クロスオリジン」って何？ スキーム、ホスト、ポートの3つの組み合わせが一致している場合を同一オリジン(same-origin)、いずれか一つでもことなる場合をクロスオリジン(cross-origin)と言います。つまり、XHRでドメインを超えて通信している場合は典型的なクロスオリジン通信となります。 Q. え？ XMLHttpReuest って他のドメインにリクエストを発行できないんじゃ い
解説 : XMLHttpRequest
XMLHttpRequest を使用出来るようにする為の宣言。ブラウザにより異なる。 IE では、ActiveXObject("Microsoft.XMLHTTP") を使用。 IE のバージョンによっては、ActiveXObject("Msxml2.XMLHTTP.5.0") , ActiveXObject("Msxml2.XMLHTTP.4.0") , ActiveXObject("Msxml2.XMLHTTP.3.0") , ActiveXObject("Msxml2.XMLHTTP") なども使用出来る。 Mozilla 系ブラウザでは、XMLHttpRequest() を使用。 var xmlhttp = false; if(typeof ActiveXObject != "undefined"){ try { xmlhttp = new ActiveXObject("Micro
JavaScript 追記Firefox 3.0で確認したところエラーになった。 Firefox 2.0.0.13で確認しました。 var url = 'http://localhost:8080/index.html'; var referrer = 'http://www.hatena.ne.jp/'; var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function(){ // 1: 読み込み中 if(req.readyState == 1) req.setRequestHeader('Referer', referrer); // 4: 準備完了 if(req.readyState != 4) return; console.log(req.responseTe
こんにちは、太田です。前回はJSONPについて解説しました。今回は、XMLHttpRequestについて解説していきます。 XMLHttpRequestとは XMLHttpRequestはブラウザ上でサーバーとHTTP通信を行うためのAPIです。 名前にXMLが付いていますがXMLに限ったものではなく、HTTPリクエストを投げてテキスト形式かDOMノードでレスポンスを受け取る機能を持っています。 仕様としてはW3CよりXMLHttpRequestとして定義されており、2010年8月3日にCandidate Recommendation（勧告候補）となったばかりです。また、XMLHttpRequest Level 2の策定も進められています。 XMLHttpRequestの機能と特徴 前回のJSONPと比べると機能的には大きな違いはありません。ただ、スキーム、ドメイン、ポート（これをまとめて
W3C : The XMLHttpRequest Object
XMLHttpRequest Level 1 W3C Working Group Note 06 October 2016 This version: https://www.w3.org/TR/2016/NOTE-XMLHttpRequest-20161006/ Latest published version: https://www.w3.org/TR/XMLHttpRequest/ Latest editor's draft: https://xhr.spec.whatwg.org/ Previous version: https://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/ Editors: Anne van Kesteren, Mozilla Julian Aubourg, Creative Area 송정기 (Jungkee
RSSリーダーについてさんざん言及されたように、Webコンテンツを取得するアプリケーションでは、 HTTPリクエストに If-Modified-Since ヘッダ をつけるなどして対象コンテンツの更新時刻をチェックし、過剰なデータ取得を避けるのがマナーであるとされている。 同じことがAjaxについても当てはまると考える。Ajaxでは、ユーザーのアクションと非同期にHTTPリクエストを行うため、RSSリーダーと同様に人為操作を超えるトラフィックを発せさせる可能性があるからだ。 そこで、素朴な疑問。 ・ブラウザは、ユーザーが意識しないでも更新時刻チェックをやってくれる。 ・Ajaxの主なエンジンとなる Javascript は、ブラウザに組み込まれたものである。 ・Javascript の XMLHttpRequestを使用すると、プログラマが明示的にコーディングしなくても、更新時刻チェックを
■ ドコモはXMLHttpRequestにiモードIDを載せるのを止めるべきだ （建設予定地） （27日追記）建設計画廃止。XMLHttpRequestだけ止めても効果がないことを理解したため。 （29日追記）何が言いたかったか、後日書く。
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback XMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。 EventTarget XMLHttpRequestEventTarget XMLHttpRequest XMLHttpRequest という名前ではあるものの、 XML だけでな
XMLHttpRequestを使用するとサーバに対する非同期リクエストを行うことができます。 最近巷で話題のAjaxで使われている技術の1つです。 自分でAjaxのコードを書いていた時に、いろいろ調べた結果のメモをまとめておきます。 1. XMLHttpRequestのオブジェクトの生成について ブラウザやそのバージョンによってオブジェクト生成方法が違うので http://web.paulownia.jp/script/xmlhttp2.html にあるように、違いを吸収したfunctionを用意すると良い。 2. ReadyStateのハンドリング xmlhttp.readyState == 4 && xmlhttp.status == 200 をもって正常レスポンスと判断している場合が多いようですが、Firefox では後述のバグ？によるエラーが発生します。 なので、xmlhttp.s
いつのまにやら家から5分の距離に新しくコンビニができたことに気づいたtanakaです。 今日は、別ドメインのjsonデータをXMLHttpRequestで普通に取得するにはどうすればいいか調査したので方法をまとめます。実装としてはもう4年くらい前から使えるようになっていますが、私はまだ使ったことがなかったので。 XMLHttpRequest とクロスドメイン XMLHttpRequest が Internet Explorerに実装され、それ以外のブラウザに実装された当初は JavaScriptが実行されたページのドメイン以外にリクエストを送りデータを受け取ることはできませんでした。別ドメインに非同期でリクエストするためにいくつかの方法が考えられましたが詳しい説明は省略します。(一旦サーバを経由する・Flashを経由する・JSONPを使うなど) 2009年になりXMLHttpRequest
XMLHttpRequest - Wikipedia
XMLHttpRequest (XHR) は、JavaScriptなどのウェブブラウザ搭載のスクリプト言語でサーバとのHTTP通信を行うための、組み込みオブジェクト（API）である。 すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。 XMLHttpRequestを利用したWebアプリケーションは非常に多く存在し、例として、Google マップ、Facebookなどが挙げられる。 歴史[編集] XMLHttpRequestは、マイクロソフトがOutlook Web Access 2000のダイナミックHTMLによるウェブインターフェースに活用するため、1999年公開のInternet Explorer 5においてActiveXオブジェクトとして実装したのが始まりである[1]。その後、2001年にMoz
2011/5/10 以下の訂正をしました。 s/prefetch/preflight/g JavaScriptのクロスドメイン通信で微妙な話があったので書いてみます。ちなみにクライアントサイドJavaScriptの話です。下記仕様に敬意を表して以下ではクロスオリジンと書きます。一般にクロスドメイン通信と呼ばれているものと同じ意味で使います。 Cross-Origin Resource Sharing XMLHttpRequest2(XHR2) WebブラウザからXMLHttpRequest(XHR)で外部のWeb APIを直接叩こうとするとクロスオリジンの制限に当たります。制限の必要性は次の説明がわかりやすいのでリンクを張っておきます。 Same-Originポリシーの必要性 クロスオリジン制限がある中でWebブラウザから直接Web APIを叩こうと先人は知恵を絞ってきました。iframe
ブックマーク経由でみかけたCodeWeb: 画像をアップロードする前にサムネイルを表示させる。 では、JavaScript を使ってファイルをアップロードする前にプレビューする方法が紹介されてました。input type="file" な input 要素の onchange ハンドラでごにょるというもの。 一方で、プレビューではなく、ファイルを追加した直後に特にボタンなどを押さず且つ画面遷移なしでファイルをアップロードできないものかと、ちょっと試行錯誤してみています。例によって XMLHttpRequest で Ajax るわけですが、残念ながらいまのところうまくいってません。 これまでに書いたコードは以下です。prototype.js を使ってます。 <input type="file" name="image" onchange=" if (this.value) { new Aja
最近 fetch API をヘビーに使うようになっていて、いろいろと勘所もわかってきていて、Promise ベースなのはやっぱりすごく便利なんだけれども、現状だと機能が全然足りないなあ、と。 XMLHttpRequestUpload 相当がないのは知っていたし、困ったなあと思っていたんだけれども、XMLHttpRequestUpload 自体がだいぶレア目のヤツで使うような機会もまあめったにないので実害としてはそこまで大きくなかった。 んで、だ、XMLHttpRequestUpload 相当がないのは良いとしても、ReadableStream で XMLHttpRequest で言う progress イベント相当のことをしようとしたときに、発火時にトータルの容量がわからんつう問題が発生した。 fetch API で ReadableStream を使って progress の状況を取ると
Ajax を利用すると、「非同期通信」を行い外部から最新のデータを取得しながら、「ダイナミックHTML」で HTML の内容をリアルタイムに更新する事ができます。
補足 2008.3.28 Cross Site XMLHttpRequest (XHR) Removed From Firefox 3 | Robert Accettura’s Fun With Wordageによると、最近XMLHttpRequestの仕様ドラフトに変更があり、Firefox3のリリース(今のところ6月の予定だとどこかで読みました)には実装が間に合わなそうなので、Firefox3の初期バージョンにはCross Site XMLHttpRequestは載らないことになったそうです。 Firefox3ではドメインが異なっていてもXMLHttpRequestでリクエストが出せるのをmal_blue@tumblrで知りました。 すごいじゃーんというわけでJohn Resig - Cross-Site XMLHttpRequestに書かれている使いかたを参考にちょっといじってみま
_iモードブラウザ2.0のXMLHttpRequestでPOSTデータの扱いが困難になった このエントリでは、iモードブラウザ2.0の制限により、XMLHttpRequestでPOSTメソッドの利用が困難になっていることを確認したので報告する。 iモードブラウザ2.0のJavaScriptを試していて、POSTメソッドでデータが渡せていないことに気がついた。以下のようなプログラムで検証してみた。 【post.html】 <html> <head> <script> function test() { try { var requester = new XMLHttpRequest(); requester.open('POST', '/dumppost.php', true); requester.onreadystatechange = function() { if (requeste
XMLHttpRequest オブジェクトを使用することで Ajax を使った非同期通信を行うことができます。ここでは Ajax による非同期通信を行うために XMLHttpRequest オブジェクトの作成し、サーバへリクエストを送信したあと、サーバからレスポンスを受信するまでの方法について解説します。
Well sourceforge decided to make their filesystem readonly which takes out Dokuwiki (used for this wiki) which stores content in files. A dump of the content is available here. Note that this is encoded as ISO-8859-1 - if you want to load it into your own Dokuwiki install, you will need to convert it first. See here and here for details. Back when? When the Time Deity chooses to allocate some this
EVER:CLOCK is a fun, themeable, online digital clock that can be loaded straight into your modern Web browser. Several different clock types are available, and there are thousands upon thousands of interesting clock themes to choose from. Each clock type offers its own unique qualities and theming options. The EVER:CLOCK Web app and its supporting Web site is built entirely using the UIZE JavaScri
How to make XMLHttpRequest calls to another server in your domain
Enterprise Strategy Group: Go-to-market Expertise to Help You Win
今日は、 JavaScript の XMLHttpRequest オブジェクトの使い方を調べてみたので、それをご紹介しようと思います。 XMLHttpRequest はサーバーに対して HTTP リクエストを発行するためのオブジェクトで、 Ajax の A (Asynchronous) を司る中核技術です。これにより、Web ページを切り替えることなくサーバーからデータを取得し、ページ内容を更新することができます。 さあ、一緒に Ajax の世界へと足を踏み入れましょう！（＾＾） 使用方法 それでは、XMLHttpRequest オブジェクトの使用方法を順を追ってご紹介します。 XMLHttpRequest オブジェクトの作成 XMLHttpRequest オブジェクトを作成する方法は、 Firefox, Opera と IE で異なります。 Firefox, Opera の場合は単に X
もうあんまり需要無いような気もするけど。 IEで「new XMLHttpRequest」と書けるようにするラッパを書いてみた。 XMLHttpRequest for IE http://la.ma.la/misc/js/ie_xmlhttp.html 結構前にIE7(JavaScriptの方)の人が似たようなのを作ってたのですが、 http://dean.edwards.name/weblog/2004/11/ie7-xml-extras/ ふつうに使う分にはこれでも問題はないです。 if(typeof ActiveXObject == "function" && typeof XMLHttpRequest == "undefined"){ XMLHttpRequest = function(){ return new ActiveXObject("Microsoft.XMLHTTP")
Ajax を目指し XMLHttpRequest をいじってみる 2005-02-24-3 [Ajax][Programming] Ajax: Web アプリケーション開発の新しいアプローチ <http://antipop.zapto.org/docs/translations/ajax.html> (via <http://antipop.zapto.org/mt/archives/001248.php>) Ajax とは "Asynchronous JavaScript + XML" の略称であり、Web におい て可能であることの本質的な変化を表している。 Ajax アプリケーションは、Web アプリケーションが本来持つ「開始 - 終 了 - 開始 - 終了」というやりとりを、ユーザとサーバとの仲介者 - Ajax エンジン - を導入することにより、取り除く。 要
一定期間更新がないため広告を表示しています
サンプル <script language="JavaScript"> <!-- //XMLHttpRequestオブジェクト生成 function createHttpRequest(){ //Win ie用 if(window.ActiveXObject){ try { //MSXML2以降用 return new ActiveXObject("Msxml2.XMLHTTP") //[1]' } catch (e) { try { //旧MSXML用 return new ActiveXObject("Microsoft.XMLHTTP") //[1]' } catch (e2) { return null } } } else if(window.XMLHttpRequest){ //Win ie以外のXMLHttpRequestオブジェクト実装
http://ss-o.net/json/ 以下に対して、.htaccessで Header append Access-Control-Allow-Origin: *という指定をして、ヘッダーにAccess-Control-Allow-Originをつけているので、(*はすべてのドメインからのリクエストを許可) http://ss-o.net/json/wedataAutoPagerize.json http://ss-o.net/json/wedataLDRize.json などのファイルについてはFirefox3.5、Safari4、Google Chrome 2、IE8*1などのブラウザではクロスドメインでXMLHttpRequestを投げることができます。 サンプルコード javascript:(function(){ var xhr=window.XDomainRequest?
十三章第一回 XMLHTTPRequestこのページの最終更新日：2019年7月1日 今回は、かなりよく使われる技術のひとつであるXMLHTTPRequestを紹介します。 略してXHRと呼ばれることもあるこの技術は何かというと、JavaScriptでHTTP通信を行うためのAPIです。Ajaxという言葉はもはや死語かもしれませんが、その根幹をなす技術です。 HTTP通信がどういうものかご存知でしょうか。ブラウザでインターネットを閲覧する場合はHTTP通信により行われます。HTTP通信は、基本的にはページを見たい側（クライアント）がウェブサイト（サーバー）に対してリクエストを送り、それに対してサーバーからページの内容（レスポンス）が帰ってくるというものです。このようなHTTP通信をJavaScriptから行うことができるのです。 リクエストを送るJavaScriptからHTTPリクエストを
XMLHttpRequestまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 XMLHttpRequestは、スクリプト言語からサーバとのHTTP通信を行うための組み込みオブジェクト（API）。既に読み込んだページ上からHTTPリクエストを発することができるため、ページ遷移なしでサーバとのデータ送受信が可能になる。Ajaxの基幹技術。 実装にあたって、おおかまかな手順は以下。 文字コードはUTF-8にしておこう。 XMLHttpRequestオブジェクトを作成 XMLHttpRequestオブジェクトからデータを取得 取得したデータを編集、利用 ただしセキュリティ上の問題から、リクエストの送信は同一ドメイン内に制限されている。そのため、ドメイン
« pythonで動くtwitter/wassrクライアント「tw2」をWindowsにポーティングした。 | Main | Cache::Memcached::Fastをwin32にポーティングしてみた。 » WassrのAPIには、imageパラメータによる画像アップロードがあるのですが、これに困ってる人がいたので、人助け。 Wassr [お気軽メッセージングハブ・ワッサー] 質問です。Firefox の Live HTTP Headers で確認すると Web のフォームから画像をアップロードすると素のバイナリデータが送信されています。API を利用した POST でも素のバイナリデータで送信しなければならないのでしょうか？ http://wassr.jp/channel/wassr_api/messages/hNHcDCCtja 試しにvimperatorから出来ないか挑戦してたら
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XMLHttpRequest とはなんだったのか | blog.jxck.io
XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記
まだXMLHttpRequestを使ってるの？ fetchのすすめ
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
～JavaScriptでXMLHttpRequest～
Hawk's W3 Laboratory : XML : XMLHttpRequestについて
XMLHttpRequestを使ったCSRF(補足編) - 葉っぱ日記
XMLHttpRequestでRefererをセットする - FAX
第12回 XMLHttpRequest入門 | gihyo.jp
XMLHttpRequestとIf-Modified-Since
高木浩光＠自宅の日記 - ドコモはXMLHttpRequestにiモードIDを載せるのを止めるべきだ
Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About
![Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
XMLHttpRequest - Web API | MDN
ひげぽん - XMLHttpRequest on Ajaxのあれこれ
別ドメインのjsonデータをXMLHttpRequestでやりとりする | バシャログ。
クロスオリジンなXMLHttpRequest2(XHR2)と独自ヘッダの落とし穴?
XMLHttpRequest でファイルのアップロードができないか? - naoyaのはてなダイアリー
fetch API から XMLHttpRequest への置き換えを決意した話 | ykzts.blog
JavaScriptプログラミング講座【XMLHttpRequest について】
Firefox3のクロスサイトXMLHttpRequestの仕様 - bits and bytes
徳丸浩の日記 - iモードブラウザ2.0のXMLHttpRequestでPOSTデータの扱いが困難になった
XMLHttpRequestオブジェクトを使った非同期通信を行う
javascript:xmlhttprequest [JPSPAN]
UIZE JavaScript Framework | AJAX, RIA, widgets, JSON, OOP, Class Inheritance, XMLHttpRequest, DOM manipulation, and all that stuff
XMLHttpRequest の使い方 - WebOS Goodies
最速インターフェース研究会 :: IEでXMLHttpRequestを使えるようにする
Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About
[を] Ajax を目指し XMLHttpRequest をいじってみる
続 クロスドメインで使う XMLHttpRequest と CORS の話 | 日頃の行い
antipop2.0 - Movable Type な Blog の全エントリを JavaScript with XMLHttpRequest でインクリメンタル検索する
Ajaxはじめの一歩 XMLHttpRequest - ［JavaScript］All About
XMLHttpRequest Level 2 と wedata バックアップ - os0x.blog
十三章第一回 XMLHTTPRequest — JavaScript初級者から中級者になろう — uhyohyo.net
Big Sky :: XMLHttpRequestでファイルをアップロード