なんとなく CORS がわかる...はもう終わりにする。 - Qiita
Access to XMLHttpRequest at 'http://localhost:8081' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is ther
Ajaxにおけるクロスドメインの問題を回避する方法 | ぶろぐち
Ajaxにおけるクロスドメインの問題を回避する方法 こんにちは！ぐち（@bloguchi）です。 先日ローカルでWeb開発をしていて、localhost内から外部のドメインが提供しているWebAPIを実行しようとしたときに直面した問題について、今更ながら備忘録としてご紹介します。 クロスドメインリクエスト(XDP) 冒頭で軽くご説明した通り、あるドメインで読み込まれたHTMLページ(foo.com)から、Javascriptなどブラウザ上で動作するプログラミング言語によって、異なるドメイン(bar.com)のサービスに接続するとブラウザがエラーや警告を表示することがあります。 これが今回ご紹介したいクロスドメインの問題です。 何が問題なのか 通常HTMLというのは、ブラウザ上で表示され画面上に用意されたフォームやサービスをJavascriptなどのプログラミング言語によって実行します。この
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
まだXMLHttpRequestを使ってるの？ fetchのすすめ
JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保ってきましたが1、ここ3〜4年でより新しいAPIであるfetch APIが登場しました。fetch APIが出たばかりの頃は何だこのおもちゃはと正直思いましたが、いつの間にか仕様が充実していい感じになっていました。 皆さんは、この新しいAPIであるfetchをちゃんと使っているでしょうか。それとも、古いXHRを未だに使っているのでしょうか。この記事では、未だにfetchを使っていない人を主な対象としてfetchの使い方を解説します。（XHRと比較しながら解説するので$.ajaxとかaxiosとかしか使ったことがな
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果
GoogleからGoogle AJAX APIを拡張する新しいサービス「The AJAX Libraries API」が公開された。The AJAX Libraries APIはGoogleのサイトで人気のある有益なJavaScriptライブラリを提供しようというもの。これまでYUIであればYahoo!、DojoであればAOLなどが同類のサービスを提供していたが、特定のJavaScriptライブラリに限定することなく有益であれば配布に追加するというポリシーをもっている点が新しい。 JavaScriptライブラリを活用するタイプのWebアプリケーションは数多くある。結果として、何度も似たようなJavaScriptライブラリをダウンロードしていることになり、このままいけば今後ライブラリ自体のサイズの巨大化や多くのサービスの登場でライブラリダウンロード総量は増加することになる。 The AJAX
PHPとJavaScriptでHTTPストリーミングする話(Transfer-Encoding: chunked編) - id:anatooのブログ
HTTPレスポンスをajaxでストリーミング的に受け取りたいとき、要するにHTTPストリーミングをしたい時には、Transfer-Encoding: chunkedなレスポンスを生成してやるとよい。こうするとAjaxではHTTPレスポンス全体を受け取るのを待たずに、レスポンスの中身にアクセスすることが出来るようになる。従って、一つのHTTPコネクションでサーバ側から任意のデータを好きなタイミングでプッシュすることが出来る。 コード 一秒ごとに生成されるJSONをストリーム的に受け取るデモのコードが以下。 <?php // push.php function output_chunk($chunk) { echo sprintf("%x\r\n", strlen($chunk)); echo $chunk . "\r\n"; } header("Content-type: applicati
Ajaxページへのパーマリンクを#!なしで実現する - yamasaのネタ帳
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場 Ajaxを多用しつつパーマリンクも提供しているサイトのURLは、「#!ほげほげ」のような形式になっていることがよくあります。上の記事に書かれているように、これにはちゃんと理由があるわけなんですが、やっぱり「#!なんてのが含まれるURLは格好悪い」と感じる人も多いようです。 そこで、「#!ほげほげ」なんてURLを使わなくてもAjaxの画面遷移を実現する、Session HistoryというHTML5の機能を紹介します。 Session history demo ChromeやSafariで上のページにアクセスし、地図をドラッグしてみてください。地図を動かすたびにURLが変化しているのに気づくでしょう。そこでブラウザの戻るや進むキーを押すと、地図の移動履歴を辿
ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」:phpspot開発日誌
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
魅せる画像スライドショーJavaScript「jQuery GalleryView」
スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。 jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。 sponsors 使用方法 jQuery GalleryViewからファイル一式をダウンロードします。 themesはjsと同じディレクトリにアップして下さい。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.galleryview-1.0.js"></script> <script type=
jQuery Sortablesでドラッグ&ソータブル [Javascript] All About
jQuery Sortablesでドラッグ&ソータブル今回は、リストの順序をドラッグドロップで変更できるソータブルをjQuery UI の Sortablesで試します。順序についての入力インターフェイスなどで便利に使えます。 前々回は Draggables でDOM要素をドラッグし、 前回は Droppables でドロップ操作を試しました。 今回は、リストの順序をドラッグドロップで変更できるソータブルをjQuery UI の Sortablesで試します。 jQuery Download jquey.js (-1.2.2.min.js) UI/Sortables Sortables デモ ダウンロード jquery.ui (v1.0は、stopが動作しないので1.0.1a以降を入手してください) jQueryのダウンロードと設置 Sortables Sortablesは、LI要素などの
![jQuery Sortablesでドラッグ&ソータブル [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)
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します（
Google AJAX Feed API入門
他のサイトが配信しているATOMやRSSフィードをJavaScriptを使って取得しようとした場合、同一生成元ポリシー(Same-Origin Policy)の制限によって直接他のサーバにあるデータへアクセスできずサーバ側でいったんフィードを受信するなどの処理が必要でした。 Google AJAX Feed APIを使用すると、Googleがフィードのキャッシュとしての役割を果たしてくれるため、サーバ側のプログラムを必要とせず、クライアント側のスクリプトだけで各種フィードを取得することが出来ます。 ここではGoogle AJAX Feed APIを使ってATOMやRSSフィードを取得する方法などを解説していきます。 Google AJAX Feed APIとは ドキュメント
AJAX Libraries API - Google Code
What is the AJAX Libraries API? The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including: jQuery jQuery UI prototype scri
Google Feed APIで3分マッシュアップ (1/2)
特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。 しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。 Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Nota
Script.aculo.usで、ビジュアルなWebページを作成しよう
はじめに Ajaxの登場によりJavaScriptへ多くのWeb開発者の注目が集まって以降、JavaScriptは、クールなWebページを作る上でなくてはならないものとなってきています。特に、ビジュアルな表示や効果を実現するためには、JavaScriptは今や不可欠のものといってよいでしょう。以前は、こうしたものをJavaScriptで実装するには気の遠くなるコーディングが必要でしたが、現在は多数のJavaScriptライブラリが登場し競い合っています。JavaScriptを手軽に導入したい、という人には夢のような時代となった、といってよいでしょう。 が、あまりに多くのライブラリが登場したため、果たしてどれを使えばいいのか、よく分からなくなってしまった、という人も多いでしょう。また、機能を高度化するあまり、使い方がひどく難しくなってしまっているライブラリもあります。比較的簡単に、しかも効果
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10:phpspot開発日誌
jQuery・Ajax実践サンプル
http://www.h2o-ajax.com/archives/tag/scriptaculous