PHPのAPIをJS側で表示させる

Question

JSのAjaxでPHPのAPIを取得し、JS側で表示をしたいです。
調べたりしたのですがどうしたらうまくいくのかがわからなかったので質問させていただきました。
試しで行った郵便番号のAPIは取得できたので私の書いているAPI側に問題があると考えています。ただどこが悪いのかがわからなかったので回答いただけると嬉しいです。

<?php
  if(isset($_GET["num"]) && !preg_match("/[^0-9]/",$_GET["num"])){
    $add = $_GET["num"] + $_GET["num"];
    var_dump($add);  
  }else {
    var_dump("bbb");
  }
?>

var url = "http://localhost/test/api_test.php?num=4";
//これだと表示される↓
// var url = "https://zip-cloud.appspot.com/api/search?zipcode=7830060"
var xhr = new XMLHttpRequest();
xhr.open('GET',url,true);
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var res_text = xhr.responseText;
    console.log(res_text);
  }
};
xhr.send(null);

Answer 1

ただどこが悪いのかがわからなかったので

調べてみましょう。ブラウザの開発ツールで、どのような通信を行っているかが確認できます。

• そもそもリクエストのコードが実行されていない
• リクエスト先のURLが間違っている
• PHP側でエラーになっている
• PHPが返してきた値の形が想定のものでない
• 返してきた値のJavaScriptサイドでのハンドリングが正しくない

上から順に、どこまでできているのか確認していきましょう。

Answer 2

JS側でAPIの応答を解釈するのに、一般的にはjsonってのを使うけれど、
このコードだと全くjson_encode()とか使ってなくて、
var_dump()の出力をJSでどう解釈して利用するのかわけがわからない。
それに、HTTP応答ヘッダーで明示的にjsonで応答するよとしないとJSで対応できないかと。

全体の流れを解説している記事をいくつか紹介します：
JavaScript(jQuery)からPHPのAPIを利用する - Qiita
PHPでJSONを返すAPIを作成 → JavaScript（JQuery）からアクセスする - min117の日記