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

2022年10月28日jQuery

ミニマリスト_カミ

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

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

この記事でわかること

  • APIとは
  • ajaxのAPI

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

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

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 失敗の処理後の処理
});
dataAPI実行時に引数として渡したい
typedataのtype
urlエンドポイント

スポンサードサーチ

ajaxの通信時の説明

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

api通信時の基本構文

ajaxの引数説明
urlapiでの使用するエンドポイント
typePOST通信 or GET通信
dataapi通信時に渡すデータ
dataTypeapi通信時の渡すデータのタイプ

api通信での詳細設定

ajaxの引数説明詳細
processDatadataを内容をクエリ変換 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で同期通信

まとめ

  • APIを使うことで、データベースへのアクセスしてデータを取得したり、書き込んだりできます。
  • Webサービスとの連携でサービスを簡単に使うことができます。
  • APIのレスポンスにはjson型でデータが返ってくるのでいろんなデータを見ることができます。

スポンサードサーチ

実装やエラーが解決できない場合

プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。

考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。

そういう時は聞ける先輩や、メンターに相談することが大事です。

僕にも相談可能なので気軽に相談してください。

Twitterからの連絡だと確実ですよ。

オンラインスクールやプログラミングスクールといったプログラミングを学べる方法もあるので、そちらもぜひ活用してもいいと思います。

Web開発で分からない時

オンライン完結型スクール DMM WEBCAMP PRO

アプリ開発で分からない時

プログラミング×稼げる副業スキルはテックキャンプ

プログラミングについて分からない時

RUNTEQ(ランテック)

僕への個人でもメンターでも、スクールでもお好きな方を活用ください。

サーキュレーター

ミニマリストが選んだおすすめサーキュレーター

【加湿器の選び方】ミニマリストおすすめの加湿器

2022年版ミニマリストが選んだおすすめの空気清浄機

No Image

【ミニマリスト】洗い物を手放す!おすすめできる食洗機

【ミニマリスト】タオルは不要?バスタオル、フェイスタオルとの向き合い方とおすすめのタオル

ドラム式洗濯機

ミニマリストが選んだおすすめのドラム式洗濯機

【最新版・比較したい人必見】ミニマリストが選んだロボット掃除機のおすすめ・選び方

サーキュレーター

ミニマリストが選んだおすすめサーキュレーター

【加湿器の選び方】ミニマリストおすすめの加湿器

2022年版ミニマリストが選んだおすすめの空気清浄機

No Image

【ミニマリスト】洗い物を手放す!おすすめできる食洗機

【ミニマリスト】タオルは不要?バスタオル、フェイスタオルとの向き合い方とおすすめのタオル

ドラム式洗濯機

ミニマリストが選んだおすすめのドラム式洗濯機

【最新版・比較したい人必見】ミニマリストが選んだロボット掃除機のおすすめ・選び方

サーキュレーター

ミニマリストが選んだおすすめサーキュレーター

【加湿器の選び方】ミニマリストおすすめの加湿器

2022年版ミニマリストが選んだおすすめの空気清浄機

No Image

【ミニマリスト】洗い物を手放す!おすすめできる食洗機

【ミニマリスト】タオルは不要?バスタオル、フェイスタオルとの向き合い方とおすすめのタオル

ドラム式洗濯機

ミニマリストが選んだおすすめのドラム式洗濯機

【最新版・比較したい人必見】ミニマリストが選んだロボット掃除機のおすすめ・選び方

jQuery

Posted by kami