More than 3 years have passed since last update.

初学者のJavaScript　Ajaxによる非同期通信

Posted at 2021-03-08

##非同期通信とは
通常のデータ送受信ではリクエストに対しHTMLがレスポンスとして返されるため、ページ全体を再度読み込むことになるのに対し、JavaScriptによる非同期通信はJavaScriptがWebサーバーとやり取りするため、ページの一部書き換えを行うことができる。

##Ajaxの基本形

$.ajax({url: 'hoge.json', dataType: 'json'})
 .done(function(hoge){
  データダウンロード完了時の処理
 })
 .fail(function(hoge){
  データダウンロード失敗時の処理
 });

$.ajaxに続く形はデータ送受信に必要な設定をオブジェクト形式で含めるため、次のような形式で設定を列挙する。
$.ajax({url: 'データURL', dataType: 'json', そのほかの設定: '設定値', ...})
今回はURLとdataTypeを設定。

さいごに

プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、ご指摘等いただけますと幸いです。

参考図書：確かな力が身につくJavaScript「超」入門　第２版　著者：加納祐東