How to use AJAX and PHP by example

Post Reply
Tony
Lieutenant
Lieutenant
Posts: 86
Joined: Tue Jul 21, 2009 4:11 pm

How to use AJAX and PHP by example

Post by Tony » Sun Nov 29, 2009 5:02 am

Asynchronous JavaScript And XML

AJAX is a method of making a web page more application like. It allows server interaction without having to reload the web page. It uses a combination of server-side scripting (in this example PHP), and client-side JavaScript and the XMLHttpRequest object. This is not an AJAX tutorial, but if you have done some homework in advance, the best way to learn a new technique is with a working example. Name the html page ajax.htm and name the PHP script ajax.php. The only change you need to make is the domain name in the html page (currently example.com). Load the html page in your browser, enter the input and click anywhere else on the page.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Language" content="en-us" /> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> 
<title>AJAX Example</title> 

<style type="text/css"> 
span.hidden { 
  display: none; 
} 
span.display { 
  display: inline; 
  color: red; 
} 
</style> 

<script type="text/javascript"> 

// ajax processing - this is a generic function to process the server response 
function processReqChange() { 
  if (req.readyState == 4) // only if req shows "complete" 
    if (req.status == 200) {  // then only if req shows "OK" 
      response = req.responseXML.documentElement; 
      method = response.getElementsByTagName('method')[0].firstChild.data; 
      result = response.getElementsByTagName('result')[0].firstChild.data; 
      eval(method + '(result)'); 
    } else  
      alert("There was a problem retrieving the XML data:\n" + req.statusText); 
} 

// ajax processing - this is a generic function to access the server script 
function loadXML(url) { 
  // branch for native XMLHttpRequest object 
  if (window.XMLHttpRequest) { 
    req = new XMLHttpRequest(); 
    req.onreadystatechange = processReqChange; 
    req.open("GET", url, true); 
    req.send(null); 
  // branch for IE ActiveX version 
  } else if (window.ActiveXObject) { 
    req = new ActiveXObject("Microsoft.XMLHTTP"); 
    if (req) { 
      req.onreadystatechange = processReqChange; 
      req.open("GET", url, true); 
      req.send(); 
    } 
  } 
} 

// ajax processing - accepts input for the name variable 
function nameInput(input) { 
  document.getElementById('nameCheckValid').className = 'hidden'; 
  document.getElementById('nameCheckFailed').className = 'hidden'; 
  if (input == '') document.getElementById('name').value = document.getElementById('name').defaultValue;  // reset value if empty 
    else loadXML('http://example.com/ajax.php?name=' + input);  // ensure proper domain/script name 
} 

// ajax processing - processes the server response for the name variable 
function nameResponse(response) { 
  if (response == '1')  
    document.getElementById('nameCheckValid').className = 'display'; 
  else 
    document.getElementById('nameCheckFailed').className = 'display';  
} 

function focusInput(el) { 
  if (document.getElementById(el).defaultValue==document.getElementById(el).value) document.getElementById(el).value = ""; 
} 

</script> 

</head> 
<body> 

<div> 
<input type="text" id="name" onfocus="focusInput(this.id)" onblur="nameInput(this.value)" value="Enter Name" /> 
<span class="hidden" id="nameCheckFailed">Invalid name</span> 
<span class="hidden" id="nameCheckValid">Valid name</span> 
</div> 

</body> 
</html> 

Code: Select all

<?php 
header('Content-Type: text/xml'); 
echo '<?xml version="1.0" ?>'; 
// this script can do database validation, database updates, or what ever is needed 
if (strtolower($_GET['name']) == "fred") $result = 1; else $result = 0; 
?> 
<response> 
  <method>nameResponse</method> 
  <result><?php echo $result; ?></result> 
</response>
Post Reply

Return to “PHP & MySQL”