PHP ajax

AJAX means Asynchronous JAvascript and XML. Javascript is used at the client side to send informaitons to the server, and get reponses from the server.

The process is asynchronous, thus the user's web page browsing acitivity will not be disrupted. At the server side, various language can be used to precess the information, the logic is similar, of which PHP is very popular. Sometimes CSS is also used to improve the web designs.

That's see an example, following is the input box that use AJAX, you may input "php", "ajax", "javascript" to get response from the server side.


Following is the web page code:

<html>
<body>
<style type="text/css" media="screen">
.link{
	width:350px; 
	height:22px;
	border:1px solid; 
}
.link_over{
	background-color: #D1E0A4;
	height:22px;
	width:350px; 
	border:1px solid; 
}
</style>	
<input id="searchtxt" autocomplete="off" type="text" 
onkeyup="searchindex()" style="width:350px;height:26px" name="q">
<div id="suggest" style="font-size:14px"></div>
<br>
<script language=Javascript>
var req;
document.onclick = onClick; 
function onClick(ev) 
{ 
	document.getElementById('suggest').innerHTML = '';
} 
function searchindex() 
{	
	if (req.readyState == 4 || req.readyState == 0)
	{				
	 var str = document.getElementById('searchtxt').value;
	 req.open("GET", 'script/ajax_example.php?q=' + str, true);		
	 req.onreadystatechange = handleSearchSuggest; 		
	 req.send(null);	
	}
}
function divmainsuggestOut(div_value){
	document.getElementById('suggest').innerHTML = '';
}
if (window.XMLHttpRequest){
	req = new XMLHttpRequest(); 
}
else if (window.ActiveXObject){
	req = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
function handleSearchSuggest() 
{	
if (req.readyState == 4) 
{		
  var ss = document.getElementById('suggest');
  var str = req.responseText.split("\n");
  ss.innerHTML = '';
  for(var i=0; i < str.length - 1; i = i + 1){	
  var stri = str[i];
  var elem = stri.split(",");
  var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
  suggest += 'onmouseout="javascript:suggestOut(this);" ';
  suggest += 'onclick="window.location.href=\'' + elem[1] + '\'"; ';
  suggest += 'class="link">';
  suggest += "<A href=\"" + elem[1] + "\">" + elem[0] + "</A></div>";
  ss.innerHTML += suggest;			
  }
}
}
function suggestOver(d){d.className = 'link_over';}
function suggestOut(d){d.className = 'link';}
</script>
</body>
</html>

Following is the PHP code at the server side:

<?PHP
	if (isset($_GET['q'])) $q = $_GET['q'];	  
	$ax = array();
	$ax["AJAX"]="ajax.php";
	$ax["Javascript"]="../js/";
	$ax["PHP"]="index.php";
	$ax["R"]="../R/";
	$ax["Unit Conversion"]="../../convert/";
	$ax["Scientific Calculator"]="../../calc/";

	foreach($ax as $key=>$val)
	{
		$key2 = strtolower($key);
		if (preg_match("/$q/",$key2)) echo "$key,$val\n";
	}
?>

The above ajax is similar to the search box at the home page of this site.


:: PHP Tutorials Home ::
PHP String Functions
 • concatenation • echo
 • ereg • ereg_replace
 • explode • htmlspecialchars
 • preg_match • preg_replace
 • preg_split • print,sprintf
 • str_replace • strcmp
 • strpos • strrev
 • strrpos • strtr
 • substr • substr_replace
PHP Array Functions
 • array_diff • array_flip
 • array_intersect • array_key_exists
 • array_keys • array_merge
 • array_pop • array_push
 • array_rand • array_search
 • array_splice • array_unshift
 • array_values • asort & arsort
 • count • in_array
 • ksort • shuffle
 • sort
PHP Data Types
 • array • associative array
 • date & time • number
 • class, object • regular expression
 • string • variables
PHP Loop & Conditions
 • continue & break • for loop
 • foreach • if else
 • not equal • while
PHP File System Functions
 • copy • delete, unlink
 • dirname • download url
 • file_exists • is_file
 • mkdir • read file
 • scandir • write file
PHP Popular Topics
 • ajax • clone
 • comments • constants
 • cookie • database
 • defined • die
 • form validation • gd, draw images
 • global variables • header url
 • heredoc • mail
 • pass by reference • print
 • regular expression • sessions
 • threads • xml parse
PHP Math Functions
 • abs • cos
 • exp • floor & ceil
 • fmod • log
 • max & min • pow
 • round • sin
 • sqrt • tan
endmemo.com © 2020  Terms of Use | Home