AjaxでAccess-Control-Allow-Originのエラーを回避する方法
var XHR = new XMLHttpRequest(); query = "http://www.muratayusuke.com/"; XHR.open("GET",query,true); XHR.onreadystatechange = function(){ if (XHR.readyState == 4 && XHR.status == 200){ alert("hoge"); } }; XHR.send(null); 上記のコードなんかよく見るXMLHttpRequestのコードだと思いますが、最近のChromeでこいつがエラーを吐くようになりました。そう、 "XMLHttpRequest cannot load http://www.muratayusuke.com/. Origin http://muratest is not allowed by A
オリジン間リソース共有 (CORS) - HTTP | MDN
HTTP ガイド HTTP の概要 典型的な HTTP セッション HTTP メッセージ MIME タイプ（IANA メディア種別） HTTP の圧縮 HTTP キャッシュ HTTP 認証 HTTP Cookie の使用 HTTP のリダイレクト HTTP 条件付きリクエスト HTTP 範囲リクエスト コンテンツネゴシエーション HTTP/1.x のコネクション管理 HTTP の進化 プロトコルのアップグレードの仕組み プロキシサーバーとトンネリング HTTP クライアントヒント HTTP セキュリティ サイトの安全化 HTTP Observatory Permissions Policy コンテンツセキュリティポリシー (CSP) オリジン間リソース共有 (CORS) Cross-Origin Resource Policy (CORP) Strict-Transport-Securit
javascriptでクロスドメイン対応する場合の覚書
Ajaxを利用したクロスドメインでのデータ通信をいくつか試したのでそのときのメモ。 そもそも今回やりたかった事は、以下の３点を満たすようなデータ通信なのだけど、 クロスドメインでのデータ通信 SSLでの通信 Basic認証配下のコンテンツにアクセス Basic認証の部分のみ上手いやり方が思いつかなかった。。 これは引き続き調査しつつ、今回試したクロスドメインでのデータ通信のメモを残してみる。 で、そもそもクロスドメインでのデータ通信なのだが、これを実現するには以下の２つ方法があるらしい。 JSONPを利用した対応 CORS (Cross-Origin Resource Sharing)を利用した対応 JSONPを利用した対応は以前にも利用した事があったのだけど、CORSは知らなかった。 今回は以下の方法を試してみた。 JSONPを利用した対応(<script>タグを利用) JSONPを利用
第3回 JSONPでのクロスドメインアクセス | gihyo.jp
JSONPの動作原理 前回はAjaxに存在するセキュリティモデルであるSame-Originポリシーを紹介し、そのSame-Originポリシーを迂回する方法とセキュリティについて見てきました。また、回避する方法の1つめとしてリバースProxyを用いた方法を紹介しました。リバースProxyを用いた方法ではセキュリティ的な問題点もありましたが、そもそもProxyサーバを用意しなければならないため、この方法は手軽に使うことはできませんでした。 そこで考え出されたのがJSONP（JavaScript Object Notation with Padding）という方法です。 それではまず簡単にJSONPについて説明します。 Ajaxで使われるXMLHttpRequestオブジェクトには前回説明したとおりSame-Originポリシーがありクロスドメインアクセスはできません。一方、SCRIPTタグ
短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^ @TwinTKchan #spam
前回書いた 短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ が好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。 ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。 ですが、現在はjQueryで社内システムの 画面をつくる(Ajaxとかを使って)事を任せてもらっています。 なぜ、JavaScript(JS)がいいのか？なぜ勉強するのか？ まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。 ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。 これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語
第11回 JSONP入門 | gihyo.jp
こんにちは、太田です。今回から、Ajaxと呼ばれるような非同期な通信処理を行うJavaScriptについて解説していきます。今回は特にJSONPについて基礎的な部分を解説します。 JSONとは JSONについては第9回でも少し触れていますが、改めて解説します。 JSON（JavaScript Object Notation）はJavaScriptから生まれたデータ記述フォーマットで、真偽値、数値、文字列、null値の組み合わせを持ったハッシュか配列かその両方で構成されます。 JSONはそのシンプルさから多くの言語でネイティブにサポートされており、特にウェブ関連ではポピュラーなデータフォーマットです。 JSONのサンプル（配列） ["aaa", "bbb", "ccc"] JSONのサンプル（ハッシュ） {"aaa":1, "bbb": 2, "ccc": 3} JSONのサンプル（ハッシュ
第13回 簡単なアプリケーションの作成 | gihyo.jp
こんにちは、太田です。前々回はJSONP、前回はXMLHttpRequestについて解説しました。今回は、ここまでの12回で取り上げた内容を使って簡単なアプリケーションを作成してみます。 アプリケーションの設計 第9回で取り上げたTwitter検索を行うJavaScriptをベースに、簡易Twitter検索クライアントを実装してみましょう。 機能は以下のとおりです。 任意のキーワードで検索 60秒おきに自動で新しい検索結果を取得 @ユーザー名はTwitterにリンク URLと思われるところはリンクに ハッシュタグをクリックしたときはそのハッシュタグで検索 短縮されたURLを展開 なお、機能的にはIE 6～8もほかのブラウザと同等の実装にしますが、見た目について（具体的には角丸）はIEでは再現しません。 検索の骨組み まずは任意のキーワードで検索する部分を見ていきましょう。まずはHTMLです
第12回 XMLHttpRequest入門 | gihyo.jp
こんにちは、太田です。前回はJSONPについて解説しました。今回は、XMLHttpRequestについて解説していきます。 XMLHttpRequestとは XMLHttpRequestはブラウザ上でサーバーとHTTP通信を行うためのAPIです。 名前にXMLが付いていますがXMLに限ったものではなく、HTTPリクエストを投げてテキスト形式かDOMノードでレスポンスを受け取る機能を持っています。 仕様としてはW3CよりXMLHttpRequestとして定義されており、2010年8月3日にCandidate Recommendation（勧告候補）となったばかりです。また、XMLHttpRequest Level 2の策定も進められています。 XMLHttpRequestの機能と特徴 前回のJSONPと比べると機能的には大きな違いはありません。ただ、スキーム、ドメイン、ポート（これをまとめて
池田信夫氏や西和彦氏ら、新会社で電子書籍出版へ--著者を公募:ニュース - CNET Japan
経済学者の池田信夫氏や元アスキーの西和彦氏らが設立したアゴラブックスは、iPadの発売にあわせる形で4月より日本語電子書籍の発刊および販売を開始する。 同社では、書き下ろし書籍を新刊として販売するほか、出版社と協力して既刊書籍を「電子文庫」として販売する。またインターネットで著者を公募し、審査した上で電子書籍として販売する「ダイレクト出版」も手掛ける。そのほか、学術書も取り扱う。読者からの復刊リクエストも募集する。 閲覧には、ブラウザでプラグインを導入することなく利用できる「AJAXビューワー」開発している。書籍データをサーバ側に起き、読むときだけデータにアクセスするクラウド方式にしている。 決済では当初ライブドアと協力し、livedoor IDを利用した決済方法を導入する。今後は、その他の決済方法についても導入していく予定。 電子書籍のラインアップは以下の通り。今後も権利者との交渉がすみ
サジェスト検索でユーザビリティの革命を！ 第2回 サジェスト活用事例:企画特集 - CNET Japan
第1回では、サジェスト検索の概要を紹介した。今回は、実際のWebアプリケーションでどのように使われているかを紹介したい。インターネット検索（検索キーワードの候補語表示など）で、馴染み深いサジェスト検索だが、業務システムや企業内システムとなると少々趣が異なる。実例で説明しよう。 データ入力のサジェスト 例えば、業務システムの中から、注文受付画面を考えてみよう。注文受付では、一般的に問合せ客から聞き取った内容（顧客の氏名、企業名、部署名、注文者住所、商品送付先住所、連絡先電話番号、購入商品名など）の入力が求められる。 入力内容の間違いはコスト増に直結する。なぜなら、間違いは誤配送・クレームを招き、この間違いを正すためには、顧客への電話等での再確認を必要とするだけでなく、顧客の離反を招きかねない。 肝要なのは、応対時に正確に漏れなく入力を完了させることだ。顧客応対後の企業内プロセスで発生するコス
サジェスト検索でユーザビリティの革命を！:企画特集 - CNET Japan
今、サジェスト検索が注目されている。サジェスト検索とは、キー入力に先行して、キー入力候補の表示をリアルタイムに行う機能だ。 Ajax技術の象徴でもあるサジェスト検索は、ユーザビリティを高め、入力・検索の作業負担を激減させる画期的なもの。果たしてどんなものだろうか。 サジェスト検索への期待 Webシステムにおける入力・検索のストレスは、キータイプミスや、画面の描画と遷移で待たされることではないだろうか。サジェスト検索は、Ajax技術の活用により、「ムダなくスピーディな操作」「瞬時の検索」「画面遷移なし！」を実現するものである。下の画像をクリックしてデモをご覧いただきたい。 サジェスト検索では、キー入力と同時に、次々と候補語を表示させる事ができる。例えば、住所や商品名などの単語入力・検索のとき、あるいは、文章入力・検索のときでも、候補語を選択していくだけで、目的の入力作業を進めることができ、と
「サジェスト検索」を気持ちよくさせるAjaxの妙技:企画特集 - CNET Japan
これまで、サジェスト検索について、活用事例をもとに各機能を紹介してきた。 (第1回：サジェスト検索とは、第2回：サジェスト活用事例) 今回から、サジェスト検索の各機能をどのようにして実現しているのか、技術的な話題を取り上げていく。 業務システムの商品検索・顧客検索における活用例 第2回では、業務システムの商品検索・顧客検索における活用例をもとにサジェスト検索を紹介した。サジェスト検索の特徴は、本来データベース検索を必要とする情報が、瞬時に取り出せる事であった。 この実現にあたり、中核となる技術はAjaxとテキストマイニングである。今回は、Ajaxによる画面制御を紹介する。 Ajaxによる画面制御 画面遷移を行わず、次々と候補語表示を行うといった画面制御は、Ajaxによって実現している。第2回でも簡単に紹介したが、サーバへの非同期通信、画面の一部を動的に更新といった事はAjaxの特徴である。
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
jQuery入門（その1）（1/7）：CodeZine
はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と
デザイナ向け「はじめてのjQuery」 - あと味
東京への転勤でバタバタしてたのと、引越し先にネット回線がないのとでアップが遅れました。 先週、制作会議というデザイナの会議でjQeryの勉強会をしました。その際に作成・発表したスライドです。 前回、制作会社で働く人向け「はじめての正規表現」 - あと味で使ったスライドほどインパクトはないのですが、これをきっかけに、社内外問わず、jQueryを使ってみようと思ってくれるデザイナが増えたらうれしいです。もちろんプログラマにもおすすめです。 KeynoteのHTML書き出し機能で出力したものを改変して作っています。超楽チン。時間がなかったので取り急ぎアップしますが、近日中にjQueryを使ってコピペ用のテキストと目次を設置します。 前提 JavaScriptではなく、jQueryが使えるようになることが目的 jQuery UIは日を改めて紹介予定 HTML, CSSは使いこなせる人向け（グラフィ
アマグラマーが初めてのAjaxのプログラムを作成するまでの道のり全容 - あと味
ここ数日、会社の勉強会でjQueryをすることになって、そのデモとしてAjaxを使ったプログラムを作っていました。まともにAjaxさわったのは初めて。ノウハウが必要そうです。 jQueryの勉強会の内容は、後日整理してアップしますので、お楽しみに。 で、プログラムを作るまでの道のりを備忘録もかねて投稿しようと思います。ぶっちゃけソースレベルは低いです。まだまだ改善すべき点は山ほどありますが、作ったプログラムはたぶん修正しないので、不完全ながら公開します。 作ったプログラム scriptタグを埋め込めば、会社の制作事例を再生するブログパーツのようなもの <script id="js" type="text/javascript" src="http://higashizm.sakura.ne.jp/parts/js/loading.js"></script> これをHTMLのbody内に埋め
テーブルの列をドラッグ＆ドロップで入れ替え可能にするJavaScriptライブラリ『dratable』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptプログラミング講座【XMLHttpRequest について】
Amazon.co.jp: JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで: 山田祥寛: 本
はじめてのjQuery