AJAX is Easy

AJAX Examples

AJAX is easy. Here are some client-server examples:

Example 0: (see function getIP)
Example 1: change button text when clicked (see function toggleIt)	This button without reloading the page.
Example 2: This listbox populates itself when clicked (see function listIt)

Source Files

ajax.js

var theDIV; // we will set this to an id that actually exists in the page

// theDIV = "aDIV";
  // makeRequest(url,qry); 
  var toggle=0;
  function toggleIt()
  {
    // (local server only without invoking Javascript permission prompt)
    var url = "server.php"

theDIV='aDIV';
    if( toggle==0 ) qry = "?show=after";
    else qry = "?show=before";

// results will be returned and acted on above in `fromServer' fx
    makeRequest(url,qry);

toggle = !toggle;
    return false;
  }

function listIt(n)
  {
    var url = "server.php"

theDIV='bDIV';
    qry = "?list=" + n;
    makeRequest(url,qry);
    return false;
  }

function getIP()
  {
    var url = "server.php"

theDIV='ipDIV';
    qry = "?getIP=1";
    makeRequest(url,qry);
    return false;
  }

server.php


<?php

if( $show=="before" ) print <<<EPR
This button 
<input type=button onclick="toggleIt();" value="changes"> 
without reloading the page.
EPR;

else if( $show=="after" ) print <<<EPR
This button <input type=button onclick="toggleIt();" value="CHANGED"> 
without reloading the page.
EPR;

else if( $list==1 ) print <<<EPR
<select size=4 onClick="listIt(2);">
<option>option 1</option>
<select>
EPR;

else if( $list==2 ) print <<<EPR
<select size=4 onClick="listIt(3);">
<option>option 1</option>
<option>option 2</option>
</select>
EPR;

else if( $list==3 ) print <<<EPR
<select size=4 onClick="listIt(1);">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
EPR;

else if( $getIP ) 
{
  $ip = $_SERVER["REMOTE_ADDR"];
  if( !strlen($ip) ) $ip = $_SERVER["REMOTE_HOST"];
  print <<<EPR
your IP Address is $ip
EPR;

}


?>

page.html


<script language="JavaScript" src="ajax.js"></script>
AJAX is easy. Here are some client-server examples:
<br>
<hr>
<table><tr><td colspan=2>
Example 0: <span id="ipDIV" style="color: #666666;"></span> (see function
<i>getIP</i>)<br>
</td></tr><tr>
<td width=200 valign=center>
Example 1: change button
text when clicked (see function <i>toggleIt</i>)</td><td>
<div id="aDIV" 
style="text-align: center; padding: 6px; 
    background-color: #fffff0;
    border-style: dashed; border-width:thin;"
>
This button <input type=button onclick="toggleIt();" value="changes"> without reloading the page.
</div>
</tr><tr>
<td width=200 valign=center>Example 2:
This listbox populates itself when clicked (see function <i>listIt</i>)
</td><td>
<div id="bDIV" 
style="text-align: center; padding: 6px; 
    background-color: #fffff0;
    border-style: dashed; border-width:thin;"
>
<select size=5 onClick="listIt(1);">
<option> (click to test) </option>
</select>
</div>
</td></tr></table>