PHP and AJAX

AJAX stands for Asynchronous JavaScript and XML.

AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and JavaScript.

Why to use AJAX in PHP

You can use AJAX in/with PHP, to get, fetch, display, etc records/data either from file or from database without refreshing the web page.

Therefore, you can make your web page more interactive and user-friendly with using AJAX.

PHP and AJAX Example

Now let's take an example to understand about how AJAX works with PHP.

Let's first create a PHP file named codescracker.php with following content inside it:

<!doctype html>
<html>
<head>
	<title>PHP and AJAX Example - codescracker</title>
	<script>
		function languageSuggestion(langVal)
		{
			if(langVal.length == 0)
			{ 
				document.getElementById("langClue").innerHTML = "";
				return;
			}
			else
			{
				var xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function()
				{
					if(this.readyState == 4 && this.status == 200)
					{
						document.getElementById("langClue").innerHTML = this.responseText;
					}
				};
				xmlhttp.open("GET", "languageSuggestionList.php?lanSug=" + langVal, true);
				xmlhttp.send();
			}
		}
	</script>
</head>
<body>
	<h2>Type Language</h2>
	<p>Type your favourite programming language to start learning:</p>
	<form>
		Which language you want to learn ? <input type="text" onkeyup="languageSuggestion(this.value)">
	</form>
	<p>Language Hint: <span id="langClue"></span></p>
</body>
</html>

As you can see from the above example of PHP and AJAX, when you type the language name, such as Java, C, C++, or any other language, in the input box field, then the function named languageSuggestion() will be triggered. All the AJAX code is placed inside this function as you can see from the above example will run and give you the language hint came from the PHP file named languageSuggestionList.php.

Now let's create a file named languageSuggestionList.php with following content inside it:

<?php
	// here are the list of all the language available 
	// that you can start learning with
	$lnar[] = "Java";
	$lnar[] = "C";
	$lnar[] = "C++";
	$lnar[] = "HTML";
	$lnar[] = "CSS";
	$lnar[] = "JavaScript";
	$lnar[] = "PHP";
	$lnar[] = "SQL";
	$lnar[] = "Perl";
	$lnar[] = "Python";
	$lnar[] = "C#";
	$lnar[] = "Objective-C";
	
	// the code given below will get the lanSug parameter 
	// from the URL of codescracker.php
	$lanSug = $_REQUEST["lanSug"];
	
	$suggest = "";
	
	if($lanSug != "")
	{
		$lanSug = strtolower($lanSug);
		$length = strlen($lanSug);
		foreach($lnar as $lanName)
		{
			if(stristr($lanSug, substr($lanName, 0, $length)))
			{
				if($suggest == "")
				{
					$suggest = $lanName;
				}
				else 
				{
					$suggest .= ", $lanName";
				}
			}
		}
	}
	
	// below code is for, when no suggestion was found
	echo $suggest === "" ? "not found!" : "<b>".$suggest."</b>";
?>

As you can see from the above PHP file, there are some languages listed here to give the user, some suggestion hint of the language that he/she want to learn.

Here is the sample output produced by the above example code of PHP and AJAX:

Now type any language name to check it out that how the above example of PHP and AJAX works:

As you can see from the above sample screenshot, after typing only the first character of Python, that is P, the web page suggested all those language whose first character is P.

If you again type y after the P, then all those languages will be suggested using the above PHP and AJAX example code whose first character starts with P and second character starts with Y. Here is the sample output:

Now let's check it out again through different language:

And at last, let's try with a language name, that is not listed inside the file named languageSuggestionList.php, for example ruby

As you can see from the above output, if no any match was found, then you will see not found! in the suggestion hint line.

PHP Online Test

« Previous Tutorial Next Tutorial »