Ajaxの嫌いだった部分をJsRenderで心地良くした - Goldstine研究所
1. はじめに ぼくはフロントエンドは本業ではありません。 jsはあまり好きではありません。 そしてAjax通信後にhtmlをアウトプットする際にjsの変数の中にhtmlを書いていくソースコードがもっと好きではありません。(後述) それをJSテンプレートエンジンを使ってシンプルにしてみたって話です。 （JsRenderの使い方を書いたものではありません。） 2. Ajaxが嫌いだった理由 Ajaxはユーザ体感的にはいいのだけれど、 Ajaxの結果受け取ったjsonなどのデータを使ってhtmlを出力とかやるとソースコードが煩雑になるので嫌いだった。 例としてAjaxで/xxxxxにリクエストを投げて、その結果(jsonデータ)を使ってhtmlを出力するものを考えると。 /* jsonデータは下記が返ってくるとする [ { id: '1', name: 'らーめん', text: 'らーめんは
Ajax：画像を取得して表示する（Firefox）: Script雑感
XMLHttpRequest を使って取得したバイナリーデータ（画像）をブラウザに表示してみました。firefox のみ。 JavaScriptでバイナリを扱う & XPCOMを使ってローカルのデータベースにアクセス with Firefox の記事を読んでいて、そういや Ajax ではどうなん？と思ってやってみた。 ■ 他に参考にしたのは以下の記事。 [comp]JavaScriptでバイナリファイルの中身にアクセスできた ■ base64 エンコードには下記のコードを使いました。 JavaScript で Base64 の符号化と復号化 <html><head> <script type="text/javascript" src="base64.js"></script> <script type="text/javascript"> load_url = function(url)
jQueryを使わないでAjax通信をするオブジェクト - Ando.report(); // JavaScriptをもっと勉強したいブログ。
AjaxのためだけにjQueryを使うのは少し重いので、カスタマイズする前提で作ったオブジェクトをスニペットとして掲載しておきます。 /* require Prop.js */ var Ajax = { get: function (params) { var key; if (!params.url) { throw 'URLを指定してください'; } this.method = new Prop('GET'); for (key in params) { this[key] = new Prop(params[key]); } this.sendRequest(); }, post: function (params) { var key; if (!params.url) { throw 'URLを指定してください'; } if (!params.data) { throw '送信す
クライアントサイド JavaScript のパフォーマンス改善には backburner.js が便利！ - tricknotesのぼうけんのしょ
DOM 処理や Ajax など、JavaScript が外の世界とやり取りする部分というのは、一般的に待ち時間を多く必要とします。 パフォーマンスを改善しようと思った時に、ロジック部分でコツコツと節約するより、まずコストが高い処理を行わないようにするということで、驚くほどの効果を経験をされたことはありませんか？ 今までパフォーマンス測定をされた方であればピンとくる部分があることと思います。 そんな時に役に立つのが、今回ご紹介する backburner.js です。 ebryn/backburner.js - GitHub backburner.js って? backburner.js とは Ember.js の run loop モジュールから切りだされたとても小さなライブラリで、短時間に集中的に発生するメソッド呼び出しの回数を制限したい場合などに利用することができます。 backburn
なぜGoogleはJSONの先頭に while(1); をつけるのか - Qiita
while(1);[['u',[['smsSentFlag','false'],['hideInvitations','false'],['remindOnRespondedEventsOnly','true'],['hideInvitations_remindOnRespondedEventsOnly','false_true'],['Calendar ID stripped for privacy','false'],['smsVerifiedFlag','true']]]] これ以外にもGoogleのサービスでは &&&START&&& とか while(1); &&&START&&& てのが先頭に入ってたりするんだけど、これは一体何？ 解答 これはクロスサイト・リクエスト・フォージェリ対策。 例えばGoogleが gmail.com/json?action=inbox というURL
PHPのイタい入門書を読んでAjaxのXSSについて検討した(2)～evalインジェクション～ - ockeghem(徳丸浩)の日記
昨日の日記の続きで、Ajaxに固有なセキュリティ問題について検討します。タイトルはXSSとなっていますが、今回紹介する脆弱性はXSSではありません。 作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeから、Ajaxを利用したアプリケーションの概念図を引用します（本書P20の図1-23）。 Ajaxのアプリケーションでは、XMLHttpRequestメソッド等でデータを要求し、サーバーはXML、JSON、タブ区切り文字列など適当な形式で返します。ブラウザ側JavaScriptでは、データ形式をデコードして、さまざまな処理の後、HTMLとして表示します。以下に、Ajaxのリクエストがサーバーに届いた後の処理の流れを説明します。 サーバー側でデータを作成、取得 データ伝送用の形式（XML、JSON、タブ区切り文字列等）にエンコード
Operaの場合XHR2対応してないからiframeでクロスドメインでPOSTする - 憧れ駆動開発
ああ哀しいかなOpera使い JavaScriptでTwitterのOAuthを取り付けて通信する方法 - 憧れ駆動開発 これの続き。OperaだとXHR2対応してない(Operaの場合はこういうところが厳密すぎる)ので、結局Operaの場合iframeにPOSTすることにした チラ裏に移動させた。内容としては 要はPOSTリクエストするときのフォーマットはXMLにして、display:none な iframe 内でXMLをひらく、ということ。OperaはXMLを自動的にパースして開いてくれるから、それを使う
goo
ロサンゼルス・ドジャース 試合フォロー 大谷翔平 試合フォロー 佐々木朗希 球速フォロー フィラデルフィア・フィリーズ 試合フォロー シンシナティ・レッズ 試合フォロー
jQueryを使った別ドメインへのAjax通信
同一ドメイン内のAjax通信は問題なくできたのだが、 別ドメインへのAjax通信はクロスドメインの制限にひっかかりできなかった。 なんとかできないものかとあちこちのサイトを見たり テストをしたりしてようやく出来るようになったのでメモしておく ■やりたいこと クライアントから別ドメインのサーバへPOST サーバ側で処理を行い、処理結果を返す クライアントでは処理結果を受け取って表示する。 サンプルは２つのフォームの値を足して結果を返すだけの簡単なもの ■サーバ側PHP [php] <?php // クライアントからのPOSTを受け取る $val = $_POST[‘val’]; $val2 = $_POST[‘val2’]; // 何らかの処理（サンプルなので加算するだけ） $result = $val + $val2; // 下記をレスポンスヘッダーに含める header("Access-
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ノードを追加した時に、単
動的にiframeを生成してクロスドメインなPOSTを投げる方法 - Okiraku Programming
※2015/3/15追記 2015/2月ごろから本記事の方法はTwitterでの実利用は困難になりました。レスポンスヘッダに"content-disposition: attachment; filename=json.json"が追加されるようになったため、json.jsonというファイルとしてダウンロードが行われてしまいます。現状でこれを回避する方法はないと思われ、POSTはサーバ経由で行うしかなさそうです。（JSONPを利用したGETはこのヘッダがあっても可能です。） =====追記以上==== twicli開発メモ - Okiraku Programming で、iframeをtargetに指定してformを送信することで、外部ドメインに対してPOSTメソッドを発行する方法を書きました。が、iframeをあらかじめ準備する必要があったため、複数のクエリを同時発行できないといった欠点
JavaScript だけでクロスドメインで POST メソッドを送る方法
JavaScript のみを使って、クロスドメインを実現しつつ POST メソッドでリクエストを送信する方法について解説します。 ここで解説する方法にはこんな特徴があります。 (2009-10-30 追記) iframe の unload のタイミングについて、重大な不具合がある可能性に気づきました。Chrome/Firefox において、2度イベントが発生している可能性が高いです。unload イベントを使わない場合は無関係です。結論が分かったら修正版をこのページで公開します。 (2010-01-29 追記) Chrome は大丈夫そうです。Firefox もカウンタ or フラグを使ってイベントを記録すれば大丈夫ぽいです。ちゃんと直せて無くてすいません。 XMLHttpRequest では不可能な、クロスドメインによるポストを実現している。 元になるページの文字エンコードの種類にかかわ
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
jQuery vs MooTools（和訳） | 高橋文樹.com | プログラミング
jquery.com、mootools.netとwikipedia.comからの情報による モットーがすべてを語る jQueryサイトに行けば、ページのトップ付近にjQueryとはなんであるかが述べられている: jQueryは高速で簡潔なJavaScriptライブラリです。HTML文書の走査、イベント操作、アニメーション、Ajaxインタラクションをシンプルにして、Webサイト開発を高速にします。jQueryはJavaScriptの書き方を変えるために設計されました。 …そしてMooToolsに行けば、このような文言が見つかるだろう: MooToolsは中級から上級のJavaScript開発者のために設計された軽量で、モジュール化された、オブジェクト志向のJavaScriptフレームワークです。これを使えば、エレガントで、きちんとした裏付けのある、一貫したAPIにより、パワフルに、柔軟に、そ
Pyjs
What is pyjs? pyjs is a Rich Internet Application (RIA) Development Platform for both Web and Desktop. With pyjs you can write your JavaScript-powered web applications entirely in Python. pyjs contains a Python-to-JavaScript compiler, an AJAX framework and a Widget Set API. pyjs started life as a Python port of Google Web Toolkit, the Java-to-JavaScript compiler. What is pyjs Desktop? pyjs Desktop
JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.moemoekyun.org/bon/wiki/wiki.cgi?page=Ajax%A4%CB%A4%E8%A4%EBPOST%C4%CC%BF%AE%BC%C2%C1%F5
Lily
Edit area