APIを使ってWordPress上で画像の差し替えをJavaScriptで行いたい

Question

外部システムからオペレーターの対応状況を受け取り、それに応じて画像を差し替えたい

具体的には以下のように画像の差し替えを行いたいです。
「ログインしている、且つ、ユーザー対応していない状態ならAの画像」、
「ログインしている、且つ、ユーザー対応している状態ならBの画像」、
「ログインしていない状態ならCの画像」

外部のシステムからAPIの仕様書をもらっていて、画像の差し替え（オペレーターの対応状況の確認）はWordPressで作成したサイト上で行いたいので、JavaScriptで実装したいと考えています。
仕様書の中にResponse JSON ObjectとあるのでデータをJSONで受け取り、そのデータを元にJavaScriptで画像を差し替えるのかなと思いましたが、そもそも受け取り方が分かりません。
サイトにアクセスしてきたユーザーが何かを入力することはありません。

APIの仕様書

GET /api/operator/availability/([\w\d-]+)
If total > 0 and available = 0
total is always >= available
Parameters
 ∟access_account_id （ID to count the operators for）
Response JSON Object
 ∟total （オンライン中の全オペレーター数）
 ∟available （オンライン中で対応可能なオペレーター数）
Status Codes
 ∟404 Not Found

そもそも仕様書の読み方が分からなかったので、以前teratailで紹介されていた【API Blueprintの使い方】Web APIの仕様書を書く・読む・実行するを読み、該当部分の書き換えを行ったのが下記です。

認識が合っているか確認のために元の仕様書を書き換え

## オペレーター情報取得 [/api/operator/availability/([\w\d-]+)] -- (1)

### オペレーター情報取得API [GET]

#### 処理概要  -- (2)

* ログインしているオペレーターのIDを返す。

+ Parameters  -- (3)

    + access_account_id: (string, required)
      ・access_account_idがオペレーターID？
      ・オペレーターIDはadmin_op01の形だがstringで合ってる？

+ Response 200 (application/json)

    + Attributes
        + operator (required)  -- (4)
            + name: admin_op01 (string, required) -- (5)
            + type: 0 (enum, required) - オペレーター種別(0:ログイン中且つ対応可能, 1:ログイン中且つ対応不可能, 2:ログイン中ではない) -- (7)
                + 0 (number)
                + 1 (number)
                + 2 (number)

上記の書き換えを行ってみて、
1．API仕様書の読み方が合っているか
2．合っていたとして(1)の情報をどのように書けばいいのか
3．オペレーターの対応状況(7)の部分をJSONで受け取り、そのデータを元にJavaScriptで画像を差し替えるという考えで合っているか
以上のことが分からないことに気づき、質問させていただいた次第です。

Web APIの実装は今回が初めて、JavaScriptは教本とコード集をざっと動かしたことがある程度です。
API連携元（外部システム）がAngularを使っていたのでAngularの教本も基礎程度は履修しました。
現在分かっていること、自分が何が分かっていないのかを列挙したつもりですが、不足がありましたらご教示ください。

###【追記1】Ajaxでリクエストを飛ばした結果
「Web APIならAjaxでリクエストを飛ばしてみては？」とコメント頂いたのでその方法を調べ、以下のように入力しました。

<script>
var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://xxx.外部システム.jp/?api/operator/availability/([/w/d-]+)');
//?api/operator/availability/([/w/d-]+)の箇所を削除しても結果は同じでした
xhr.send();

xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log( JSON.parse(xhr.responseText) );
}
}
</script>

結果、コンソールで下記のエラーが返ってきました。

Access to XMLHttpRequest at 'https://xxx.外部システム.jp/' from origin 'https://実装したいサイト.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED xxx.外部システム.jp/:1
リクエスト： https://xxx.外部システム.jp/
ステータス： ブロック中
ヘッダー： Access-Control-Allow-Origin
問題：ヘッダーがない

###【追記2】デベロッパーツールとjQueryでREST APIのテストリクエストを実行
追記1の結果が正しかったのか分からなかったため、別の方法でAjaxのリクエストを飛ばす方法を試しました。
下記コードはデベロッパーツールとjQueryでREST APIのテストリクエストを実行に記載されていたものを利用しました。

//コンソール上でjQueryを実行可能にする
var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-2.1.3.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

//JSコンソールからAjaxリクエストを送信
$.ajax({
    type: 'GET',
    url: 'https://xxx.外部システム.jp/',
    dataType: 'json',
    success: function(response){ console.log(response); },
    error: function(req, err){ console.log(err); }
});

結果、下記のエラーが返されました。

Access to XMLHttpRequest at 'https://xxx.外部システム.jp/' from origin 'https://実装したいサイト.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

VM8412:6 error
jquery-2.1.3.min.js:4 GET https://xxx.外部システム.jp/ net::ERR_FAILED 200

https://xxx.外部システム.jp/のあとにapi/oper..を付加したり、dataTypeをHTMLやTextに変更しても同じくエラーが返されました。
url部分をhttps://実装したいサイト.comに変更するとリクエストが返って来たので、コードが間違っているわけではなさそうだと判断しています。

Answer 1

WebAPIなのであればひとまずAjaxでリクエスト飛ばしてレスポンス確認してみては。

Comments

[m_ori]

ご回答ありがとうございます。
>ひとまずAjaxでリクエスト飛ばしてレスポンス確認してみては。
Ajaxでリクエストを飛ばす方法を調べ、以下のように入力しました。
<script>
var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://xxx.外部システム.jp/?api/operator/availability/([/w/d-]+)');
xhr.send();

xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log( JSON.parse(xhr.responseText) );
}
}
</script>

結果、コンソールで下記のエラーが返ってきました。
Access to XMLHttpRequest at 'https://xxx.外部システム.jp/' from origin 'https://実装したいサイト.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED xxx.外部システム.jp/:1
リクエスト： https://xxx.外部システム.jp/
ステータス： ブロック中
ヘッダー： Access-Control-Allow-Origin
問題：ヘッダーがない

エラーメッセージのリンクからCORSというのを調べたところ、「サーバーからの許可がないからエラーになってる」というざっくりとした認識になったのですが合ってますでしょうか。

[m_ori]

ご指摘いただいた後、API発行元に問い合わせを行ったところ先方の設定に誤りがあったらしく、修正いただき問題も解決しました。ありがとうございました。

[m.ts10806]

そういうこともたまにありますね。