和祈JavaScriptはシングルスレッドの言語です。よって処理は上から順々に行われていき、並列処理はできません。(※workerを除く)順々に行われていく処理を同期処理と呼びます。ここで、ブラウザから外部に通信を行う処理を考えてみましょう。郵便番号による住所検索を例に挙げてみます。同期的に通信を行ってしまうと、郵便番号検索ボタンを押した瞬間、ブラウザが固まります。通信という処理がまだ完了していないため、ブラウザはその処理に掛かりっきりになってしまっているからです。それに対して非同期通信はブラウザの処理をブロックしません。処理をブラウザ外に委譲することで、自身の処理を続行できます。現状、ブラウザから非同期通信を行うためには以下の2つの方法があります。API順に説明をしていきましょう。RequestのためのAPIです。AJAXという技術の根幹となるものです。実際にどのようにリクエストを送るのか見てみましょう。}};通信のコネクションを張ったのち、リクエストを送ります。レスポンスが返ってくるとコールバック関数が呼ばれます。そのタイミングでHTTPのステータスコードを見て通信の結果をハンドリングします。jQuery.ajaxjQuery.ajaxは内部的にはXMLHttpRequestを扱っています。素のXHRに比べると非常に直感的に書けるので便利です。});詳しくは公式リファレンスをご参考ください。axiosAjaxライブラリとしてaxiosも人気があります。Vue.jsの公式ページでもaxiosが紹介されています。Axiosはクライアントサイドでもサーバサイドでも動作できる優れものです。クライアントサイドではXHR、サーバサイドではNode.jsのhttpリクエストが動作します。クライアントとサーバどちらも書き方は共通なので、ユニバーサルなアプリケーションを作る際に向いていると言えます。実装例を見てみましょう。console.log(err);});このようにかなり簡潔に書くことができます。AxiosはPromiseを返すので、非同期通信後の処理もしやすいです。jQuery.ajaxとの使い分けとしては、ランディングページなどjQueryベースですでに作られている場合はそのままjQuery.ajaxを使えば良いと思います。サイト内のどこにもjQueryを使っていない場合や、シングルページアプリケーションなど複雑なアプリケーションを作る場合はaxiosが向いているでしょう。APIは非同期通信のための新たに策定されたAPIです。IE以外の主要ブラウザでは動作します。(IEでも動作させるためにPolyfillがあるので、心配しなくても大丈夫です)実装例をいくつか挙げてみます。});第二引数にはcorsやcredentialsなど、細かい設定が可能です。詳しくはMDNのドキュメントを参考にしてください。https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetchクロスオリジンの罠ブラウザから同オリジン以外のサーバーに対して通信を行うことはできません。これを回避するためにはJSONPという形式でリクエストを送るか、CORS設定を行うかの2通りがあります。前者のJSONPはセキュリティ観点からお勧めできません。ここではCORS設定について説明します。Sharing)とは簡単に言うと、別オリジンのサーバーに対する通信を許可する仕組みです。そのためにはリクエストを受ける側のサーバーにあらかじめ設定が必要となります。具体的には、HTTPレスポンスの`Access-Control-Allow-Origin`ヘッダーでリクエストを許可するドメインを指定してあげれば良いです。`http://foo.example`からのアクセスのみ許可したい場合は、以下のようなレスポンスヘッダーが必要です。http://foo.exampleまた、すべての通信を許可したい場合は以下のように記述することもできます。*例えば、WebサーバーとしてExpressを使用している場合、次のように設定します。APIでCORSのリクエストを送りたい場合は次のように記述します。APIの2通りがあります。APIは新しく策定されたAPIです。APIが主流になっていくでしょう。