APIとは「アプリケーション・プログラミング・インターフェース（Application Programming Interface）」の略称です。
今回は、WebAPIという仕組みとなり、PHPで作成したAPIにリクエスト（要求）を出すと値を受け取れるようになります。
そして、受け取った値をもとにHTMLやJavascriptを利用し、画面を生成します。
フロントエンド（html/javascript）とバックエンド（php）に分離し、フロントエンド側では「デザインやユーザーエクぺリエンスを高める」ことに集中し、バックエンド側では、「複雑なプログラムなどを構築」します。そのため、それぞれ役割分担することが可能になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function mj_api(){
var rec_txt_no = document.getElementById("txt_no").value;
url = "webapi-news_v1.php?no="+rec_txt_no;
$.getJSON(url, (data) => {
disp_text.innerHTML = "";
disp_text.innerHTML += "status：" + data["status"] + "<br>";
disp_text.innerHTML += "new_no：" + data["new_no"] + "<br>";
disp_text.innerHTML += "title_kj：" + data["title_kj"] + "<br>";
disp_text.innerHTML += "article_kj：" + data["article_kj"] + "<br>";
});
}
</script>
</head>
<body>
<div>ニュース情報を取得<br></div>
<input type="text" id="txt_no"><input type="button" name="btn_send" value="送信" onclick="mj_api()">
<div id="disp_text"></div>
</body>
</html>
<?php
$arr_data = array();
//GETで値を受け取る
if($_SERVER['REQUEST_METHOD'] === 'GET'){
$seq_no = $_GET['no'];
}
if(isset($seq_no) && ctype_digit($seq_no)) {
$arr_data = [
"status" => "OK"
,"new_no" => intval($seq_no)
,"title_kj" => "ここにタイトルが入ります。"
,"article_kj" => "ここに本文が入ります。"
];
} else {
$arr_data = [
"status" => "NG"
,"new_no" => intval($seq_no)
,"title_kj" => ""
,"article_kj" => ""
];
}
header('content-type: application/json; charset=utf-8');
echo json_encode($arr_data );
?>