Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Andrzejek on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

AJAX and PHP

PHP and JavaScript

AJAX and PHP

by  Lrnmore  Posted    (Edited  )
This is a "working" example of AJAX and how it enables the client to "request" data from
the server without refresh of the page.

Included is a listing of helpful resources. You will need to do your own research as to
which types of "request" you will need to utilize.

mkSel.html
Code: 
<html>
<head>
<title>AJAX Example</title>
<script type="text/javascript">

//global variable
var selArr = new Array();

/***  from http://jibbering.com/2002/4/httprequest.html  an article by Jim Ley***/

var xmlhttp
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
  try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
 } catch (e) {
  try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
  } catch (E) {
   xmlhttp = false;
  }
 }
@else
 xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 try {
  xmlhttp = new XMLHttpRequest();
 } catch (e) {
  xmlhttp=false;
 }
}


/***  Blame me if anything goes wrong below ;)  ***/

function getData(val) {
if(val.length == 0) return;
url="server4.php?pet=" + val;
xmlhttp.open("GET",url,true);
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
xmlhttp.setRequestHeader("Content-Type", "text/xml");
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   selArr = xmlhttp.responseText.split(",");
   mkSel2();
   }
  }
xmlhttp.send(null);
}

function mkSel2(){
var selObj = document.forms['f1'].elements['sel2'];
selObj.options.length = 0;
     for(var j = 0; j < selArr.length; j++){
     selObj[selObj.options.length] = new Option(selArr[j], selArr[j]);
     }
}  
</script>
</head>
<body>
<form name="f1">
<select name="sel1" onchange="getData(this.value)">
        <option value = "">Pick One
        <option value = "cats">Cats
        <option value = "dogs">Dogs
        <option value = "horses">Horses
</select>
<p>
<select name="sel2">
        <option value = "">Pick One
</select>
</p>
</form>
</body>
</html>

server4.php
Code: 
<?php
$phpArr = array("cats" => 'Pick One,Fluffy,Tiger,Garfield',
                 "dogs" => 'Pick One,Spot,Skip,Woff',
                 "horses" => 'Pick One,Ed,Dolly,Boots');

if(isset($_GET['pet'])){
   echo $phpArr[$_GET['pet']];
   }
?>

Links:
[link http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jsconconditionalcompilation.asp]Conditional Compilation[/link]
http://en.wikipedia.org/wiki/XMLHttpRequest
http://jibbering.com/2002/4/httprequest.html
http://www.google.com/search?hl=en&lr=&q=AJAX

Notes:
IE has a bad tendency to "cache" the info, see the wiki link


Anyhow, do your own research and testing to make sure it's right for your application.
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top