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
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月. Learn more See full compatibility Report feedback オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、 HTTP ヘッダーベースの仕組みを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストすると
第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と比べると機能的には大きな違いはありません。ただ、スキーム、ドメイン、ポート（これをまとめて
サジェスト検索でユーザビリティの革命を！ 第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内に埋め
【レビュー】Googleからの贈り物 - Google AJAX Language APIでカンタンに翻訳サイトを (1) 超シンプルなAPIながらスゴイ実力 | エンタープライズ | マイコミジャーナル
20日に発表されたGoogleの新しいWeb API、Google AJAX Language APIは、誰でも簡単に言語の翻訳を行えるようにするJavaScript APIだ。同APIを使うと、JavaScript文字列に対して「日本語←→英語」や「中国語←→英語」と言った変換を簡単に行えるのみならず、文字列が何語で書かれているかを自動判別することもできる。 同APIのパワーがどれほどのものかというと、以下のような翻訳サイトを10分足らずで作れてしまったほどだ(ソースコードは次ページで解説)。 非常にシンプルなAPI(メソッド2つしかない!)にも関わらず、そのパワーがあまりに凄まじすぎる。この興奮をぜひ皆さんにもお伝えしたいと思う。 ということで、さっそくLanguage APIの使い方を学んでいこう。
【連載】いまからはじめるScript.aculo.us (1) 概要と基本的な演出効果 | エンタープライズ | マイコミジャーナル
Script.aculo.usは、Thomas Fuchs氏を中心とするチームにより開発されているJavaScriptライブラリだ。MITライセンスが採用されており、2005年から公開を始め、執筆時点では11月に公開されたバージョン1.8が最新版になる。本稿では、そのバージョン1.8を使って(連載継続中にバージョンアップした場合はそちらに変更する可能性がある)、同ライブラリの基本を6回にわたって紹介しよう。 なお、Script.aculo.usを扱ううえでの必須知識となるPrototype.jsの使用法については、連載『いまからはじめるPrototype.js』で解説しているので、そちらをご覧いただきたい。 Script.aculo.usの概要 Script.aculo.usはPrototype.jsをベースに動作するライブラリだが、Prototype.jsが1つのファイルにすべての機能を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptプログラミング講座【XMLHttpRequest について】
Amazon.co.jp: JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで: 山田祥寛: 本
はじめてのjQuery
テーブルの列をドラッグ＆ドロップで入れ替え可能にするJavaScriptライブラリ『dratable』 | IDEA*IDEA
