Ajax: 非同期通信でページのローディング時間を短くした｜TechRacho by BPS株式会社
BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのヤマウラです。 今回は、筆者がローカルで構築している練習用サイト(WordPress)にて、ページの表示に時間がかかっている箇所があったので、 その際に対応した内容をご紹介したいと思います。 ※本記事は、データ取得のロジックの変更によってページの表示速度を早められるようにした記事ではなく、HTMLの表示をAjaxにて書き換える内容の記事になります。また、JavaScriptの説明等は含まれておりませんので、あらかじめご理解いただけますと幸いです。 目次 現状・課題 結論・最終的にやったこと Ajaxとは 外部から大量に取得してる値の処理が原因 実際に変更 感想 現状・課題 ローカルの環境にて、外部から持ってきた情報を表示するという簡素なページを作成していたのですが、 どうにもページの読み込みが遅い、という問題
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
Promiseで簡単！JavaScript非同期処理入門【後編】
前回に引き続き、ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。今回は後編です。 前回のおさらい 前回は、こんなふうにPromiseを使うという例を紹介しました。それは、以下のようにAjaxでAPIにアクセスする例でした。 var fetchSomething1 = function() { return new Promise(function(resolve, reject) { // API1にアクセス doAjaxStuff(someOptions1, { success: function(data) { // 成功した場合 resolve(); }, fail: function() { // 何かしらエラーが発生した場合 reject({ message: 'APIにアクセスできませんでし
FetchとXMLHttpRequestの基礎知識。
JavaScriptでクライアントサイドからサーバーサイドへ非同期にHTTP通信を実行して別ベージのコンテンツやリソースの取得ができるFetchとXMLHttpRequestについての基礎知識のメモ。 FetchとXMLHttpRequestの違い どちらもJavaScriptで非同期にHTTP通信が実行できる「Fetch」と「XMLHttpRequest」の違い。 「Fetch」の方が「XMLHttpRequest」よりも新しく、機能が優れるので、現在は「Fetch」の方が推奨されている。 ほとんどの「XMLHttpRequest」の機能がIE対応だが、「Fetch」は完全IE非対応。 「XMLHttpRequest」はアップロードとダウンロードの両方の進行状況を追跡できるが、「Fetch」はダウンロードのみでアップロードの進行状況の追跡はできない。(仕様が更新される可能性あり。) 別ペ
[PHP] Ajax 通信かどうかの判定方法
PHP で Ajax からのリクエストか、 Submit とかできたリクエストなのかを判定する方法。 jQuery とか prototype とかのライブラリを使って Ajax リクエストを送ると、リクエストヘッダに「 X-Requested-With:XMLHttpRequest 」ていうのが入ってくるので、これを使って判断する。 if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Ajax からのリクエスト } else { // Ajax ではない } ライブラリを使わないで、 JavaScript とかで Ajax 通信するならヘッダに X-Requested-With:XMLHttpRequest
![[PHP] Ajax 通信かどうかの判定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/15e47d64a7de3204f1e0c8a01e39939a50b2670f/height=288;version=1;width=512/https%3A%2F%2Fagohack.com%2Fwp%2Fwp-content%2Fuploads%2F2019%2F12%2Fphp-logo3.png){kind=logo}
複雑なAjaxで悩みがち！処理をうまく解決する3つの方法 | 東京のWeb制作会社 株式会社クーシー
複雑なAjaxで悩みがち！処理をうまく解決する3つの方法 システム開発 プログラミング Webサイトでエリアを絞るとき等、通常はリンクでページ遷移しますが、ページを読み込む待ち時間がプチストレス… そんなときにページ全体の読み込みをしないで、非同期通信（Ajax）でページ内のコンテンツを一部だけ更新・生成することができます。 今回はAjaxのご紹介と実装方法を解説します。 非同期通信とは？ 非同期通信とは、ブラウザの操作が行える通信のことです。 Webページは、ブラウザがサーバーからページの情報をもらうことで表示を行っています。このブラウザとサーバーのやり取りを通信と呼んでいます。 基本的には、通信が行われているときは、画面全体の更新が発生して、ブラウザ操作を行うことができません。非同期通信では例外的にブラウザ操作を行える状態で、データベースや外部ファイルからデータを取得して、一部の画面を
【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！ | 侍エンジニアブログ
基本的に、サーバーと正常な通信をしている場合は、statusの値が「200」なのでこれと条件分岐するのが良いでしょう。さらに、「readyState」と「status」は別々に条件分岐するよりも同時に確認する方が効率的です！ xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { //データ取得処理を書く } }; このように「&&」で一緒に確認できることも合わせて覚えておきましょう！ 「GET」で通信する方法 この章では、実際にAjaxを使ってGET通信を行う方法について見ていきましょう！ 基本的なGET通信のプログラム作成からデータの取得までを学んでいきます。 「GET」によるAjax通信のサンプル例 「XMLHttpRequest」を使ったAjax通信では、主に「G
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AJAXリクエストかどうかを判定する