【$.ajax】誰でも分かる！ajaxでAPIを実装する

2022年10月21日2022年10月28日jQuery

みなさんこんにちは！
カミ@god48_です。

みなさんajaxでAPIの知識はありますか？
この記事はajaxについて聞いたことはあるけど、いまいちajaxでのAPIについてよく分かってない方や、
APIについての全く知識がない方への紹介です。

この記事でわかること

APIとは
ajaxのAPI

この記事を最後まで読めばAPIについての理解が深まりますので、最後まで読んでAPIをマスターしましょう。

それでは順に見ていきましょう。

1. APIとは
2. ajax API
3. ajaxの通信時の説明
4. まとめ
5. 実装やエラーが解決できない場合

APIとは

APIとは

APIとはApplication Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略です。

API通信を行うことでデータベースなどの処理を非同期で行い結果を返すことができます。
ソフトウェアやプログラムなどのWebサービスとの間をつなぐインターフェースのことをAPIと言います。

APIの例

天気
地図
YouTube
LINE
Twitter
Facebook
Instagram

ajax API

ajax API

これがAPIのajaxの基本の構文です。

$.ajax({
　　　　type: "POST or GET",
  　　　data: { id: "jquery", name: "ajax" }
　　　　url: path　// endpoint
　})
　.done(function(data){ 
   // 成功 
　})
　.fail(function(jqXHR, textStatus, errorThrown){ 
   // 失敗
　})
　.always(function(data){ 
   // 成功 or 失敗の処理後の処理 
});

data	API実行時に引数として渡したい
type	dataのtype
url	エンドポイント

スポンサードサーチ

ajaxの通信時の説明

$.ajax({
  url: url,
  type: "POST",
  data: data,
  dataType: 'json',
  processData: false,
  contentType: false,
  cache: false,
  async: false
})

api通信時の基本構文

ajaxの引数	説明
url	apiでの使用するエンドポイント
type	POST通信 or GET通信
data	api通信時に渡すデータ
dataType	api通信時の渡すデータのタイプ

api通信での詳細設定

ajaxの引数	説明	詳細
processData	dataを内容をクエリ変換	FormDataオブジェクトでデータを取得時に使用初期値はtrue 自動的に “application/x-www-form-urlencoded" 形式に変換してくれる。 DOMDocumentなど、他の形式でデータを送るために自動変換を行いたくない場合はfalseを指定する。
contentType	リクエスト時に利用するContent-Typeヘッダー	application/x-www-form-urlencoded; charset=UTF-8
cache	通信結果をcacheする	初期値は通常はtrue. dataTypeがscriptの場合にはfalse。通信結果をキャッシュしたくない場合には、falseにする。
async	非同期か動機通信か	async: falseで同期通信