1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法
$.ajaxによるJSON読み込み方法 例えば以下のようなJSONの場合 [ { "version": "1.5", "codename": "Cupcake" }, { "version": "1.6", "codename": "Donut" }, { "version": "4.4", "codename": "KitKat" } ] $.ajaxでの読み込みは下記のようになる $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json', dataType: 'json', success: function(json){ var len = json.length; for(var i=0; i < len; i++){ $("#a").append(json[i].version + ' ' + json[i].coden
jQuery.ajax()でダウンロード - end0tknrのkipple - web開発日記
javascript (ajax)では、ファイル保存ダイアログを起動できない? ブラウザでファイルをダウンロードすると、通常、次のようなコモン?ダイアログが表示されますが、javascript (ajax)で、このダイアログを起動することはできないようです。 ajaxのダウンロードは、validation後、location.hrefでredirect どうやら、ajaxを使ったファイルのダウンロードは、サーバによるvalidation後、実際?のダウンロード用URLへリダイレクトすることで、ファイル保存ダイアログを起動できるみたい。 client側、server側のsrcは、以下に貼っておきます。 client側 html <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <meta http-equiv="Cont
SinatraとjQueryでおよそ100行で作るAjax掲示板アプリケーション - 旧gaaamiiのブログ
Web2.0と言われ始めた時代に、Ajaxという手法が広まりました。今ではAjaxを使っていないウェブアプリケーションを探すのが難しいくらい、Web開発の現場には浸透していると思います。もちろん、Ajaxを知らなくてもウェブアプリケーションは作れますが、これは使い心地を意識すれば自然と必要になってくるものです。 この記事では、実際に簡素な掲示板アプリを作りながら、現在ほとんどのウェブアプリケーションで使われているAjaxという手法を紹介していきます。ちなみに、タイトルの「100行で」というのは今回書いたapp.rb、index.erb、schema.sqlの３つのファイルのトータルがおよそ100行だという意味です。数字をタイトルに入れると読んでもらいやすいという話をどこかで聞いたので入れてみました。 ソースコードはGithubにも置いておきました。 gaaamii/ajax_sample
Sinatra & jQueryで、JSONを扱ったAjaxをしてみよう - 大学生からの Web 開発
Ajaxを扱ったことがなかったのと、これの前のエントリーでJSONについて書いたのでそれの自己解決のための記事です。 Ajaxとは何か Ajaxってのは非同期的に処理をして動的に処理をしてくれる技術です。Twitterでツイートしたらページが遷移することなく更新されるアレ。 実際にやってみよう 「Just F**king Do It（とにかくやれ）」の精神で、実際にやってみましょう。タイトルの通り、SinatraとjQueryを使います。SinatraでJSONを生成して、jQueryでAjaxを利用した処理を行います。 どんなのを作るか こんな感じ。フォームに名前を入れたら、フォームに入れた名前と年齢として0~99までの乱数がJSONで返ってきて、それを表示。 サーバサイド app.rb require 'bundler' Bundler.require # Bundler使わない人はこ
Proper way to send an Authenticity Token with AJAX to Rails
This works but gets stopped because it lacks an authenticity token: $(".ajax-referral").click(function(){ $.ajax({type: "POST", url: $(this).parent("form").attr("action"), dataType: "script"}); return false; }); So I tried adding it like so: $(".ajax-referral").click(function(){ $.ajax({type: "POST", url: $(this).parent("form").attr("action") + "?&authenticity_token=" + AUTH_TOKEN, dataType: "scri
How can I make Sinatra use CSRF Authenticity tokens?
I'm building a simple app in ruby using the Sinatra framework. It's mainly "get" based - most requests will be for listing data. However there are a couple of key screens in the app that will collect user input. I want to ensure the app is as safe as I can make it, and currently, trying to find how to implement the kind of authenticity tokens that you get in a Rails form? Where I've got to: Well,
[*その他*] ChromeにてAjaxでローカルファイルにアクセス - Qiita
はじめに ローカルにあるjsonファイルを$.getJSONで読み込んで、それを使ってあれこれやりたかったが、 Chromeで以下が発生。 ローカルファイルにAjaxリクエストを送ると怒られる。 XMLHttpRequest cannot load file:///Users/test/Documents/json/contents.json.Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. これが発生すること自体は知っていたが、特に今までChromeじゃないと困るってことは無かったのでエラーが起きないFirefoxを使ってローカルで確認していた。 今回Chromeの方がい
![[*その他*] ChromeにてAjaxでローカルファイルにアクセス - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8aed5080caff5dbf65fc300a3b0ded29bfbdc5a6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJTJBJUUzJTgxJTlEJUUzJTgxJUFFJUU0JUJCJTk2JTJBJTVEJTIwQ2hyb21lJUUzJTgxJUFCJUUzJTgxJUE2QWpheCVFMyU4MSVBNyVFMyU4MyVBRCVFMyU4MyVCQyVFMyU4MiVBQiVFMyU4MyVBQiVFMyU4MyU5NSVFMyU4MiVBMSVFMyU4MiVBNCVFMyU4MyVBQiVFMyU4MSVBQiVFMyU4MiVBMiVFMyU4MiVBRiVFMyU4MiVCQiVFMyU4MiVCOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9M2M1OTY0NjdhYmVhMjI3NWFjOThiOTQ4YThiODJkZTQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjaWdhbGVjaWdhbGVzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mOGU4ZmRmYWNlYzZjNDE2ZmYwYjhhNGYyZWMyZTAyOQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dab59b7c3444d5685d11211348b1cc170)
Ruby on RailsのAjax処理のおさらい - Qiita
何気に、アプリケーションで取り扱うデータ量が増えた場合や、大容量データをデータベースとやり取りする時なんかは、Ajaxを使ってデータ通信をバックエンド側に押しやることで、WEBフロント側のUXからパフォーマンスの悪さを改善できたりする。また、ネットワーク経路的にproxyサーバとかを中継するような環境間でデータのやり取りをする場合などに、proxy側で接続時間にリミットがかけてあったりすると、通常アクセスではデータ通信時間がリミットに達して503エラーとかになってしまうような処理でもAjaxで通信をバックエンド化することで、回避できたりもするのだ。 通信帯域が小さいスマートデバイスが主力である今のご時勢、Ajaxによる非同期処理は、言語やフレームワークを問わずに必須な技術になっている。 私の主力スキルはPHPなので、PHP＋JavaScript（jQuery）やWordPressでのAja
WordPress ページングはやめてAjaxローディングにする | hijiriworld Web
ページングはやめて、Ajaxによる非同期ローディングにしてみましょう。 最初は5件の記事が表示されています。 「もっと見る」ボタンをクリックするとAjaxにより次の5件が非同期で読み込まれます。 以後、記事がなくなるまで同じ動作です。 テンプレート <section id="content"> <?php query_posts('posts_per_page=5'); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div class="excerpt"><?php the_excerpt(); ?></div> </arti
【jQuery】IE9でページ遷移せずにファイルをPOSTしてJSONを受け取る | スターフィールド株式会社
Ajaxを使ってフォームをPOSTすると、ページ遷移しないため、 管理画面などで連続して処理を行いたい場合、 こうすることでユーザのストレスを減らすことができます。 また、そのときのデータの受け渡しをJSONで行うことで、 HTMLの書き換えなどを柔軟に行うことができます。 フォームの種類にはいくつかありテキストボックスやチェックボックスなど、 ほとんどのフォーム要素は以下の様なコードを記述することにより、 Ajaxで問題なくPOSTを行うことができます。 $(function() { $("form").submit(function(event) { var $form = $(this); var $button = $form.find(":submit"); event.preventDefault(); $.ajax({ type: "post", url: "example.
jqueryを使ってajaxを行う方法
ajaxを使うと、Javascriptを使ってホームページを再度読み込まなくても、サーバーとデータをやり取りをして表示を変更することができます。 .loadを使う サンプルでnews.htmlの中の#news要素を読み込ませます。 $(function(){ $("button").click(function(){ $(".load").load("news.html #news"); }); }); $("button").click(function(){ 要素buttonをクリックしたときに命令が行われます。 $(".load").load("news.html #news"); セレクタで選んだ.loadの部分に news.htmlの#newsを読み込ませて表示しています。 別ページにある部分を読み込ませたいという時にも使えますよ。 .ajaxを使う サーバーからのリクエストやレ
$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO
Ajaxリクエストを送信するオプションをキーと値のペアで指定します。 このオプションに初期値を設定したい場合は、 $.ajaxSetup()を使用します。 .ajax( url[, settings] ) 1.5追加 .ajax( [settings] ) 1.0追加 settings引数について jqXHRオブジェクトについて コールバック関数キューについて データタイプ(dataType)について サーバへのデータ送信について 高度なオプション Ajaxの拡張 コンバーターの使用 サンプル .ajax( url[, settings] ) 1.5追加 戻り値:jqXHR 引数説明
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
金魚の糞アンチパターン(非同期処理の逐次化) - 発火後忘失
GWTではサーバとのやりとりを全ていわゆるAjax Requestで行います。従って非同期処理がコード中に多くは入り込むことになります。
DWRはAjaxアプリを作りたいJava開発者にお勧め
DWRはAjaxアプリを作りたいJava開発者にお勧め：MyEclipseでAjax＋Javaをやさしく開発（2）（1/4 ページ） MyEclipseはJava EE開発を効率化するプラグインの集大成でかつ統合開発環境だ。併せてAjaxの開発を容易にする機能も持ち合わせている。本連載では、サーバサイドにJava EEを、クライアントサイドにAjaxを用いたWebアプリケーションをMyEclipseを使って容易に開発する手法を紹介していく。また、AjaxとJava EEの連携にはAjax開発用のJavaフレームワーク「DWR」を活用する。（編集部） Ajaxアプリケーション開発用のライブラリは数多くありますが、Java開発者がすんなり入っていきやすいのはDWR（Direct Web Remoting）でしょう。本記事では、MyEclipseを使ってDWRの簡単なサンプルを開発しながら、DW
JSONのエスケープをどこまでやるか問題 - 葉っぱ日記
Ajaxなアプリケーションにおいて、サーバからJSONを返す場合に、JSON自体はvalidであるにも関わらず、(IEの都合で)エスケープが不足していて脆弱性につながってる場合があるので、書いておきます。 発生するかもしれない脆弱性 JSONのエスケープが不足している場合に発生する可能性のある脆弱性は以下の通りです。 JSON内に含まれる機密情報の漏えい XSS それぞれの詳細については後述します。 開発側でやるべきこと 文字列中のUnicode文字は "\uXXXX" な形式にエスケープするとともに、ASCIIな範囲であっても「/」「<」「>」「+」も同様にエスケープすることにより、前述の脆弱性を防ぐことができます。 Perlであれば、以下のような感じになります。JSON->ascii(1) に続けて、JSON文字列を正規表現で置換しているあたりがキモになります。 use utf8; u
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WARN - attack prevented by Rack::Protection::AuthenticityToken · Issue #1251 · padrino/padrino-framework
JavaScriptプログラミング講座【クロスオリジンリソースシェアリングについて（CORS）】
Interactive Reading Community (Ver.6)
Amazon.co.jp: Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL): 西畑一馬: 本
