AJAX 基礎トレーニング

AJAX レスポンス

AJAX PHPサンプル

この章では、AJAXリクエストをPHPファイルに送信する方法とPHPファイルの内容を取得する方法を説明します。

AJAX PHPサンプル1

以下の例では、ウェブページがネットワークサーバーと通信し、PHPファイルの内容を取得する方法を示しています：

コードを実行する

例説明：

上記の例では、イベントfetchDoc()がonclick機能を実行しました。

これはHTMLコードです：

　　<button type="button" onclick="fetchDoc()">Fetch Content</button>
　　<div id="output"></div>
　　
　　<script>
　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_time.php", true);
　　httpRequest.send();
　　}
　　</script>

これはPHPコード（ajax_time.php）です：

　　<?php
　　echo date("d/m/Y, h:i:s A);
　　?>

AJAX PHPサンプル2

以下の例では、ユーザーが入力フィールドに文字を入力するとき、ウェブページがWebサーバーと通信する方法を示しています：

以下の入力フィールドに国の名前を入力し始めてください/地域名：

国：

意見・提案：

コードを実行する

例説明：

上記の例では、ユーザーが入力フィールドに文字を入力するとき、イベントshowHint()がonkeyup機能を実行します。

これはHTMLコードです：

　　<!DOCTYPE html>
　　<html>
　　
　　<div>
　　<p>在下面的输入字段中开始输入国家/地区名称:</p>
　　<p>国家: <input type="text" onkeyup="showHint(this.value)"></p>
　　<p>建议: <span id="result"></span></p>
　　</div>
　　
　　<script>
　　var elem = document.getElementById("result");
　　function showHint(name) {
　　if (name.length === 0) {}}
　　　elem.innerHTML = "";
　　　return;
　　} else {
　　　var httpRequest = new XMLHttpRequest();
　　　httpRequest.onreadystatechange = function() {
　　　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　　elem.innerHTML = this.responseText;
　　　　　}
　　　};
　　　httpRequest.open("GET", "ajax_hint.php?q="　+　name, true);
　　　httpRequest.send();
　　}
　　}
　　</script>
　　
　　
　　</html>

これはPHPコード（ajax_hint.php）です：

　　<?php
　　
　　//　国名数组
　　$countries = array("Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra",...);
　　//　从URL获取q参数
　　$q = $_REQUEST["q"];
　　
　　$hint = "";
　　
　　//　如果$q与数组中的提示不同，则循环遍历数组中的所有提示 ""
　　if ($q !== "") {
　　　　$q = strtolower($q);
　　　　$len = strlen($q);
　　　　foreach($countries as $name) {
　　　　if (stristr($q, substr($name, 0, $len))) {
　　　　　　if ($hint === "") {
　　　　　　　　$hint = $name;
　　　　　　} else {
　　　　　　　　$hint .= ", $name";
　　　　　　}
　　　　}
　　　　}
　　}
　　
　　//ヒントが見つからない場合や正しい値が表示される場合、"no suggestion"を出力します
　　echo $hint === "" ? "no suggestion" : $hint;
　　
　　?>

国名の完全リストについては、参照してくださいhttps://gist.github.com/DHS/1340150

AJAX レスポンス