できる気になっているJSを改めてチュートリアルからやってみる 21日目

～～ Ajax とか ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。

クライアントサイドWebAPI をやっています。

サーバーからのデータ取得

もともとWebページの読み込みは単純でした。Webサイトのデータをサーバにリクエストすると何も問題がなければ、ページを構成するいろいろなものがダウンロードされてあなたのコンピュータに表示されていました。

このモデルの場合、どこかページの一部を書き換えたりするだけでもページ全体を読み直さなければなりません。

Ajax の登場

上記の問題を解決すべく、Webページ細かいデータをリクエストし、それを必要な時だけ表示するという技術の誕生へとつながりました。

XMLHttpRequestや、最近ではFetchAPIの利用によって実現されます。これらの技術は、Webページがサーバにある特定のリソースを直接HTTPリクエストし、必要があれば結果のデータを表示する前に成型することを可能にしました。

これらのテクニック一般はかつて Ajax (Asynchronous JavaScript and XML)と呼ばれていましたが、これは XMLHttpRequest を使って XML データを要求するものが多かったためです。今日ではそういうものばかりではありませんが (XMLHttpRequest や Fetch を使って JSON を要求する場合の方が多いでしょう)、結果としては同じであり、"Ajax" という用語はしばしば今でもこのテクニックを説明するのに使われます。

ここでは、Ajaxのメリットについていろいろ語られていました。

・ページの更新がずっと素早く、切り替わりを待つ必要がない。
・更新ごとにダウンロードがされるデータがすくないので、帯域の無駄が少なくなります。

基本的なAjaxリクエスト

XMLHttpRequest(XHRとか表記されます)は今となっては古いらしい。こわい。ただ、gitに障害おきてるっぽいのでこの辺で終了。次回はこの続きからやります。