本記事の目標は、以下のようにAjax通信による検索サジェストを実装することです。
AJAX(Asynchronous JavaScript And XML)は、JavaScriptを使って、クライアント側で非同期通信を実現するためのWeb開発技術群を指す言葉です。非同期通信とAjaxについては、“AJAXとは (そして非同期通信とは)?”に詳しく記載しています。以下では、Ajaxの仕組みについて簡単に説明しています。
Ajaxでは、「サーバーへのリクエスト送信と受信」「送信、受信した内容をブラウザ側に伝える」という2つの機構を分離しています。そのため、リクエスト待ちの間も、ブラウザ上で操作を続けることができます。
AJAX(Asynchronous JavaScript And XML)は、クライアント側で非同期通信を実現するためのWeb開発技術群を指す言葉です。
今日の目標は、非同期通信とAJAXについて理解し、簡単にまとめることとなります。自分と同様に初心者の方を想定しています。
同期通信とは、送信者によるデータ送信と受信者によるデータ受信のタイミングをそろえる通信方式です。一方で、非同期通信とは、このやり取りのタイミングを一致させない通信方式になります。
通信方式を表す言葉なので、「同期方式」と「非同期方式」という単語を使用することもあります。
この” “同期”という用語の意味は、使用される文脈によって変化します。例えば、物理的なレベルでは、通信においてクロック周波数の同期をとることを指します。Webにおいては、クライアントのリクエストのタイミングとサーバーからのレスポンスを受け取るタイミングを合わせる、ということを指します。以下では、Webアプリケーションの文脈で説明します。
(さらに…)JSONは、PHPでのデータのやり取りに使用されます。どのようにphpでjson形式のデータを作成し、それをJavaScriptなどに渡すのでしょうか。
本記事の目標は、PHPで配列からJsonデータを生成し、JavaScriptで受け取ることです。これは、例えば、サーバからPHPでデータを取得して、JavaScriptで処理する場合などに使用できます。
以下のようなサンプルデータを作成しました。
<?php
$teachers = []
$teachers = [
"101" => [
"name" => "Poppins",
"class" => "music",
],
"102" => [
"name" => "Dolittle",
"class" => "natural history",
],
"103" => [
"name" => "Snape",
"class" => "pharmacy",
],
];
?>forループを使って同じデータ構造を生成する場合は、以下のようになります。
<?php
$teachers = [];
$data_set = [["101", "Poppins", "music"],["102", "Dolittle", "natural history"],["103", "Snape", "pharmacy"]];
for($i=0; $i < count($data_set); $i++){
$teacher = $teachers_list[$i];
$teachers += array($teacher[0] => array("name" => $teacher[1], "class" => $teacher[2]));
}
?><?php
echo json_encode($teachers);
?>
//output => {"101":{"name":"Poppins","class":"music"},"102":{"name":"Dolittle","class":"natural history"},"103":{"name":"Snape","class":"pharmacy"}}Json形式の文字列をphpの変数$teachersから受け取り、この文字列をJSON.parse()を使ってObjectに変換します。
<script type="text/javascript">
var json_str='<?php echo json_encode($teachers); ?>';
var json_obj = JSON.parse(json_str);
console.log(json_str)
for(k in json_obj){ // get keys
var teacher = json_obj[k];
console.log("name: " + teacher['name']);
console.log("class: " + teacher['class']);
}
/*
--console output--
name: Poppins
class: music
name: Dolittle
class: natural history
name: Snape
class: pharmacy
*/
</script>ソースコード全体は以下のようになります。
<?php
$teachers = [];
$teachers = [
"101" => [
"name" => "Poppins",
"class" => "music",
],
"102" => [
"name" => "Dolittle",
"class" => "natural history",
],
"103" => [
"name" => "Snape",
"class" => "pharmacy",
],
];
?>
<script type="text/javascript">
var json_str='<?php echo json_encode($teachers); ?>';
var json_obj = JSON.parse(json_str);
console.log(json_str)
for(i in json_obj){
var teacher = json_obj[i];
console.log("name: " + teacher['name']);
console.log("class: " + teacher['class']);
}
</script>