THE WORLD'S LARGEST WEB DEVELOPER SITE
×

## AJAX Tutorial

AJAX HOME AJAX Intro AJAX XMLHttp AJAX Request AJAX Response AJAX Events AJAX PHP AJAX ASP AJAX Database AJAX XML File

AJAX Examples

# AJAX PHP Example

AJAX is used to create more interactive applications.

## AJAX PHP Example

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:

### Example

Start typing a name in the input field below:

First name:

Suggestions:

## Example Explained

In the example above, when a user types a character in the input field, a function called "showHint()" is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

### Example

<html>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Try it Yourself »

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to a PHP file (gethint.php) on the server
• Notice that q parameter is added gethint.php?q="+str
• The str variable holds the content of the input field

## The PHP File - "gethint.php"

The PHP file checks an array of names, and returns the corresponding name(s) to the browser:

<?php
// Array with names
\$a[] = "Anna";
\$a[] = "Brittany";
\$a[] = "Cinderella";
\$a[] = "Diana";
\$a[] = "Eva";
\$a[] = "Fiona";
\$a[] = "Gunda";
\$a[] = "Hege";
\$a[] = "Inga";
\$a[] = "Johanna";
\$a[] = "Kitty";
\$a[] = "Linda";
\$a[] = "Nina";
\$a[] = "Ophelia";
\$a[] = "Petunia";
\$a[] = "Amanda";
\$a[] = "Raquel";
\$a[] = "Cindy";
\$a[] = "Doris";
\$a[] = "Eve";
\$a[] = "Evita";
\$a[] = "Sunniva";
\$a[] = "Tove";
\$a[] = "Unni";
\$a[] = "Violet";
\$a[] = "Liza";
\$a[] = "Elizabeth";
\$a[] = "Ellen";
\$a[] = "Wenche";
\$a[] = "Vicky";

// get the q parameter from URL
\$q = \$_REQUEST["q"];

\$hint = "";

// lookup all hints from array if \$q is different from ""
if (\$q !== "") {
\$q = strtolower(\$q);
\$len=strlen(\$q);
foreach(\$a as \$name) {
if (stristr(\$q, substr(\$name, 0, \$len))) {
if (\$hint === "") {
\$hint = \$name;
} else {
\$hint .= ", \$name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo \$hint === "" ? "no suggestion" : \$hint;
?>
{"ft_lang_label":"__label__en","ft_lang_prob":0.53171086,"math_prob":0.9321905,"size":2739,"snap":"2021-43-2021-49","text_gpt3_token_len":786,"char_repetition_ratio":0.16380256,"word_repetition_ratio":0.017857144,"special_character_ratio":0.35085797,"punctuation_ratio":0.19284295,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9892506,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2021-11-29T03:29:52Z\",\"WARC-Record-ID\":\"<urn:uuid:98c420e8-2137-41dc-8211-5c33a0f21cc3>\",\"Content-Length\":\"31055\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:6798a534-0866-4d75-88f1-6e2b4a680991>\",\"WARC-Concurrent-To\":\"<urn:uuid:287b6fd0-99a6-44cd-97d5-4a89eb263dff>\",\"WARC-IP-Address\":\"130.136.1.142\",\"WARC-Target-URI\":\"http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/ajax/ajax_php.asp.html\",\"WARC-Payload-Digest\":\"sha1:VGUI5C4JMYAW2FXW6HWY4JRPFI4FEFS4\",\"WARC-Block-Digest\":\"sha1:G4VJU5UCZNSHPBLVQHMQ7WGQXR5ICISH\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2021/CC-MAIN-2021-49/CC-MAIN-2021-49_segments_1637964358685.55_warc_CC-MAIN-20211129014336-20211129044336-00549.warc.gz\"}"}