Reqres - A hosted REST-API ready to respond to your AJAX requests
It’s all in the details Hosted on Heroku Which means 99.99% Uptime SLA. All you need is the base URL, and you're away: https://reqres.in/api/ The API is CORS enabled, so you can make requests right from the browser, no matter what domain, or even from somewhere like JSFiddle or JSBin. Language agnostic A generic API that conforms to REST principles and accepts a content type of application/json An
JavaScript／TypeScriptの非同期処理に向けたライブラリ「Axios 1.0.0」が登場
Axiosは、JavaScript／TypeScriptで非同期API呼び出しを容易にするライブラリ。各種WebブラウザやNode.jsと組み合わせて使用する。 JavaScript／TypeScript、Node.jsでは、処理の完了を待つことなく、完了したときにコールバック関数を呼び出すようにする「非同期処理」を多用する。しかし、非同期処理は回数が多くなるとコードの入れ子が深くなり、混乱しやすい。また、処理完了の順序を事前に特定できないため、順不同でやって来る処理完了の知らせを適切に処理しなければならない。 これらの問題を解決するために、「Promise」という非同期処理の状態を監視するオブジェクトが導入されている。これを利用することで、非同期処理の記述はある程度容易になるが、まだ面倒は残る。 そこで、Promiseオブジェクトを強く意識することなく非同期処理を記述することを可能にした
大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
axiosでJSONを取得する[Vue.js]
HTTPクライアントであるaxiosモジュールを利用して、Vue.jsにおいてJSONデータを取得してみます。 JSONのモックデータを提供するサービスであるJSONPlaceholderを利用します。 以下リンクで取得できるデータにおいて、userIdが1のデータをGETによって取得してみます。 https://jsonplaceholder.typicode.com/todos [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }, { "userId": 1, "id": 2, "title": "quis ut nam facilis et officia qui", "completed": false }, …省略
フェッチ API の使用 - Web API | MDN
フェッチ API は、リクエストやレスポンスといったプロトコルを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの fetch() メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。 コールバックベースの API である XMLHttpRequest とは異なり、Fetch は Promise ベースであり、サービスワーカー で簡単に使用できる優れた代替手段を提供します。Fetch は、CORS やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。 基本的なフェッチリクエストは、以下のコードを見てください。 async function logMovies() { const response = await fetch("http://example.com/movies.
WordPress で Ajaxを利用する | バシャログ。
どうもfujiharaです。今年度も残す所1ヶ月となりましたね。 今回はWordPressでAjax を利用する方法を今更ながらご紹介します。 今更感ありますが、過去記事にもなかったのと最近知ったので紹介させてください。 背景 WordPress で Ajaxを使う場合自分でテーマディレクトリにファイル置いて、アクセスとか functions.php 内にRequest URIで判定して処理するような記述を書いていたんですが、 使用しているプラグインとセットで機能を拡張しようとしていて眺めていたら wp_ajax_... って記述を 見つけて覚えました。 WordPress ( add_action ) <php ... add_action('wp_ajax_check_ajax', function() { // 処理を記述 echo json_encode([]); die(); }
ファイルアップロード機能で学ぶVue.js(1) - 豆腐とコンソメ
日記 会社で有料セミナーにいってもいいと言われると、お高い普段なかなかいけないような勉強会を探したりしています。 これいいな！と思ったらちょっと高かったりして敬遠したことが何度かあったのに、いざ探すとなるとなかなか見つからないものですね。 本題 Vue.jsでファイルアップロード処理をつくった際にいろいろと勉強になったので、作成の過程を残しておくよ！ 正直なところ、バッドプラクティスみたいなものもいっぱいあるかもしれないし、未だにいろいろ悩んでるんだ。 なので指摘をいだけるととすごくうれしいです！ 今回つくりたいもの ファイルとテキスト項目をボタンを押下することで、サーバに送る処理をVueコンポーネントを使ってつくるよ！ 環境 Vue.jsはwebpack(laravel-mix)を使ってコンパイルしているよ！ 日記 本題 今回つくりたいもの 環境 まずはHTML 最初のmain.js サ
jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector
jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。 Selector -GitHub 最新のjQueryのファイルサイズは、下記の通り。 jquery-3.2.1.js 270 KB jquery-3.2.1.min.js 90 KB そして、Selectorのファイルサイズは、1/4以下！ selector.js 65 KB selector.min.js 17 KB もちろん、jQueryの機能すべてが利用できるのではなく、オブジェクトやセレクタや関数に限られています。 サポートされているjQueryの機能 サポートされているjQueryオブジェクト $ サポートされているjQueryセレクタ add addClass
Umbrella JS
Tiny library for DOM manipulation and events https://cdn.jsdelivr.net/npm/umbrellajsGithub Download Try it Intuitive and Documented It is strongly influenced by jQuery with many similar methods so you'll feel at ease developing with Umbrella. However there are some extra features like .handle() and some methods like .append() are more flexible: Documentation // Simple events like jQuery u("button"
SweetAlert2
Sweet Alert 2 A beautiful and customizable replacement for Javascript's "Alert" Supported fork of t4t5/sweetalert Download CDN So... What does it do? Here’s a comparison of a standard error message. The first one uses the built-in alert -function, while the second is using SweetAlert2 . Normal alert Show error message Code: alert ( 'Oops... Something went wrong!' ) Sweet Alert 2 Show error message
jQuery samples - Ajax時にローディングを表示
jQuery samples - Ajax時にローディングを表示 本エントリーは「to-R JavaScript Advent Calendar 2015」17日目のエントリー、今回のjQuery samplesは、Ajax時にローディングを表示する方法についての解説です。 単純に Ajax時にローディングを表示する方法から僅かに遅延させる方法、共通設定にする方法まで解説していきます。 CSS3でローディングを設定 まずは以下の様なHTML/CSSでローディングを作成しておきましょう。 <button id="ajax">ajax</button> <ul id="list"></ul> <div class="loading"> <div class="loading_icon"></div> </div> .is-hide{ display:none; } .loading{ posi
30 Free HTML5, CSS3, jQuery Upload File Form Script Designs
30 Free HTML5, CSS3, jQuery Upload File Form Script Designs The design industry is probably one of the fastest growing. New and creative websites are being created every day, pushing the limitations of HTML & CSS in every direction. CSS has come a long way from formatting the structured content. It was used to control layout of documents precisely and to apply different layouts to media types. Mod
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
Ajaxによるmultipart/postでの画像ファイルアップロード
モバイルアプリでは、サーバーと連動して動作するものが多くみられます。 ハイブリッドアプリでこうしたアプリを作る場合は、Ajaxで実現するのが一般的だと思いますので、そのやり方について説明します。 追記：Android 2.3系およびそれ以前のAndroidは、FormDataオブジェクトが未定義のため、この記事の方法は利用出来ません。ご注意下さい。 追記２：Android 4.4では、Formからのファイル選択自体ができないため、この記事の方法は利用出来ません。(4.4.2で確認。今後のバージョンアップ出来るようになるかは不明です） formタグを使わない手段については、こちら サーバー側の実装 まずは、サーバー側の機能の実装です。 ここでは、普通にブラウザからもアップロード出来るような作りを考えます。実装はphpですが、他の言語でも基本的に同じように作れると思います。 /uploader
Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」
Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」の紹介です。 １．はじめに jQuery.ajax()を使ってウェブページのコンテンツを入れ替えた場合、ブラウザのURLは変更されません。 が、本エントリーで紹介する「PJAX」を利用すれば、コンテンツを入れ替えと同時にURLの変更を行うことができます。 PJAX 「PJAX」とは「pushState」と「Ajax」を組み合わせた機能をもつjQueryプラグインです。 URLの変更は「History API」というHTML5の機能を使って実現しています。 「pushState」は、History APIで履歴を追加するメソッドを指します。 ２．プラグインのダウンロード PJAXのダウンロードページにアクセスし、最新版のjquery.pjax.jsまたはjquery.pjax.min.jsをダウンロードします。 ３．サ
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
AjaxでFormDataを使ってファイルアップロードする
Ajaxを利用してファイルアップロードする。 今回はFormDataを利用してファイルをアップロードする。 FormData は XMLHttpRequest Level 2 でサポートされたもので、Ajaxでの値の送信をより簡単な物にしてくれる。 FormDataの使い方 FormDataの使い方は簡単で、new して append するだけ。 値をappendした FormData オブジェクトは、ajaxのdataにセットするだけ。 FormDataについては以下を参照 FormData – Web API リファレンス | MDN FormData オブジェクトの利用 – Web developer guide | MDN FormData でファイルの送信をする FormData は、Ajaxを使ったファイルアップロードも簡単に書ける。 こんな感じの簡単なformを作る。 jsは
jQuery.ajax()でファイルをアップロードする方法
jQuery.ajax()でファイルをアップロードする方法を紹介します。 １．はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
jQuery.upload | The jQuery Plugin Registry
This version is old school. Please find jQuery plugins on npm.
jQuery.upload.js でずっと応答が返ってこないときの対応 - 目指せ非プログラマー
この前こんなのを書きました。 IE8も対応？ jquery.upload.js（jQueryプラグイン）でのエラー対策 これだけではダメだったようで、javascriptを取得した後にネットワークが切断された際。 jquery.upload.jsに渡しているCallBackが実行されません。ずっと・・・ なぜかというとjquery.upload.js内でjQueryの.load()をやっているためでした。 こいつはtimeoutがなくて、値が取得できるまで一生(!?)待ち続けます。 そこで対策としては jquery.upload.jsの iframe.load(function() っていう行の上に var loadTimeout = setTimeout(function(){ }, timeout); こいつを追加します。(timeout はタイムアウト時間、適当に設定してやって) そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
