Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
Ajaxのクロスサイト通信をJSONPを使わないでやってみよう - Back yard : yuya_lush’s report
jQueryなどを使いAjaxで通信などをしていると、他のサーバから直接JSONが取れたら便利なのにと思ったりします。 通常はこういったときはJSONPなどを使うのですが、もっと楽な方法は無いものかと探していたところ「Access-Control-Allow-OriginなるものをHTTPヘッダーに入れればできる！」という記事があったのを思い出し、夜中にフツフツと試してみました。 先に結論を書いておくと、冒頭の例え「他サーバから直接JSONを取る」には、他のサーバーが返してくるResponseのヘッダー部分に「Access-Control-Allow-Origin:"*"」と入っていると、受け取ったブラウザはJSONを処理してくれます。 このテクニックは特殊なテクニックではなく、いたって正攻法とのことでした。そのため、ほとんどのブラウザで同じく処理されます。複数のWebサーバのヘッダを調整
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
Ajaxを勉強しよう
このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章 Ajaxって？ AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja
サーバファイルアクセス：XMLHttpRequestを使う
<html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>XMLHttpRequest()の基本</title> <script type="text/javascript"><!-- function loadTextFile() { httpObj = new XMLHttpRequest(); httpObj.onload = displayData; httpObj.open("GET","data.txt",true); httpObj.send(null); } function displayData() { document.ajaxForm.result.value = httpObj.responseText; } // --></script>
【みんなの知識 ちょっと便利帳】フリーで使えるローディング画像/LOADING GIF/CSSのみでローディングアニメーション
お好みのローディング画像・ Loading gif ・ローディングアニメーションを、自由にお使いください。 ローディング画像・・ローディングアニメーションのご利用は無料・フリーです。私用・商用に関わらず自由にお使いください。 画像及び、ローディングアニメーションコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) です。 制限は一切ありませんが、ご利用の際は必ずご自身のパソコンに保存してください。 Web上には、フリーで使える Loading gif 作成ソフトもありますが、出来上がったローディング画像をこのサイトからご利用になると便利です。 「SVG」は、Retinaディスプレイでもきれいに表示されるなどの利点があります。 「Webフォント」は、画像を用意しなくても表示させることができます。 「CSSのみ」は、画像を用意しなくてもCSS コードのみでローディングアニメーシ
アップロードファイル複数指定できるjavascript「Multiple File Upload plugin for jQuery」
twitter facebook hatena google pocket ファイルをアップロードするとき1つずつでは手間がかかります。 また、アップロードしてもらう時には、指定のファイル拡張子以外送ってもらいたくありません。 Multiple File Upload plugin for jQueryは複数かつ拡張子を指定してアップロードさせるjavascriptです。 sponsors 使用方法 Multiple File Upload plugin for jQueryからjquery.MultiFile.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomian/jquery.js" type="text/javascript"></script> <script src="http://yourdomian/jqu
jQuery POSTメソッドでAjax通信を行う(JSONレスポンス版) | Ajaxの覚え書き＠じゅえ
Ajaxの覚え書き＠じゅえ Ajaxを使って一味違ったホームページを作ってみませんか？ このサイトでは、Yahoo! User Interface Library、Ext JS、Dojo Toolkitなどの Ajaxライブラリを使ったAjaxのサンプル集を掲載しています。 POSTメソッドでAjax通信を行うには、$.ajax()メソッドを使用します。 $.ajax()メソッドのurlオプションにアクセス先のURLを、typeオプションに"POST"を、dataオプションに送信するデータオブジェクトを、dataTypeオプションに"json"を記述します。 また、successオプションに通信成功時の処理(メソッド)を、errorオプションに通信失敗時の処理(メソッド)を記述します。 サンプルでは、通信終了時にも処理を行うためにcompleteオプションに通信終了時の処理(メソッド
古籏一浩のJavaScriptラボ
活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
jQuery.upload: A simple ajax file upload plugin
See related links to what you are looking for.
jQueryによるフォーム部品操作のレシピ - むつらつれづれ
テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。 フォーム部品共通 フォーム部品（のjQueryオブジェクト）を取得する var obj = $('#target'); // id指定 var obj = $('.targets'); // class指定 var obj = $('input[@name=xxx]'); // name指定 テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。 テキストボックス（input[@type=t
jQuery で JSONP ２通り - てっく煮ブログ
JavaScriptjQuery を使って JSONP でリクエストする方法を２通り紹介するよ。その１: $("")createElement を $() を使って実装。 $("") .attr('type', 'text/javascript') .attr('src', "http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback") .appendTo($("head")); function myCallback(json){ // ロード完了時にここが呼ばれる } http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback にリクエストがいく。callback のところは、サービスによって指定の仕方が違うかもね。その２: $.ajax
第1回 Ajaxとクロスサイトスクリプティング | gihyo.jp
初回はWeb2.0の中核技術ともいえるAjaxを見ていきたいと思います。 Ajaxのセキュリティについて考えていきますが、その前にAjaxについて簡単におさらいしてみましょう。 AjaxとはAsynchronous JavaScript XMLの略であり、一言で言えばJavaScriptとXMLを使って非同期に通信するということです（XML以外の形式が使われることも多くなりました）。通信を非同期にすることで、何か処理をする場合にいちいち待たなくても次の処理に移ることができます。その結果、ユーザを待たせずに多くの処理を行えるようになりました。また、画面全体を再読み込みする必要がなくなったことも、使い勝手の向上した理由です。 Ajaxの動作 それでは簡単なサンプルコードでAjaxの動作を見ていきたいと思います（リスト1）。これらはAjaxの入門サイトや書籍で一番最初に出てくるコードです
JavaScriptからFlickr APIで画像検索：ITpro
Flickr APIのインタフェースとしては， REST / XML-RPC / SOAP の3種類が用意されています。 通常は，実装が容易な REST を利用することが多いようです。 REST リクエスト時のレスポンス（APIから返却される結果データ）は， RSP 形式という独自の XML フォーマットで出力されます (Plain Old XML)。 XML以外にも，JSON形式(JavaScript Object Notation)， JSONP形式(JSON with Padding)， PHP serialize形式での出力も可能です。 今回は，JavaScriptから処理しやすいJSONPを利用することにします。 Flickr APIの利用（ライセンス認証用API Keyの取得）には， 米国Yahoo!の会員登録が必要です。 英語のメッセージなので少し面倒ですが， [Sign U
jQTouchプラグインのスクロールライブラリ·TouchScroll for jQTouch MOONGIFT
TouchScroll for jQTouchはiPhone向けWebアプリ開発基盤として使えるjQTouch用プラグイン。 [/s2If] TouchScroll for jQTouchはJavaScript/jQuery用のオープンソース・ソフトウェア。jQTouchによってiOS向けの最適化サイトをローカルアプリのように動作させられるようになった。だがページ切り替えをした時にURLを切り替えていたら幻滅してしまう。 色々な切り替わりを用意している コンテンツの取得にAjaxを使うのはもちろん、ページの切り替えにも気を配りたい。もしjQTouchを活用してiPhone向けWebサイトを作っているならば一緒に活用したいライブラリがTouchScroll for jQTouchだ。 TouchScroll for jQTouchはかなり便利なライブラリといえそうだ。ページ切り替えの際にアク
jquery-mockjax 使えよ色々と捗るぞ - present
jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。 あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。 できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。 API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。 appendto/jquery-mockjax · GitHu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Blogger
NameBright - Coming Soon
Blogger