Ok, I'm getting better and better with PHP, and now I'm diving in to some JavaScript.

I have two files. One displaying information, and the other gathering information from MySQL. This is the code in the display page:

PHP Code:
<?php require_once('searchArtist.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WebCity ArtGallery</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
#style {
    position:absolute;
    left:265px;
    top:114px;
    z-index:1;
    background-color: #EAEAD5;
    width: 141px;
    visibility: hidden;
}
#artist_list {
    position:absolute;
    left:420px;
    top:116px;
    z-index:2;
    background-color: #EAEAD5;
    visibility: hidden;
    width: 348px;
}
-->
</style>
</head>

<body onload="MM_preloadImages('images/menu_link_over.gif')">
<div id="style" onmouseover="MM_showHideLayers('style','','show')" onmouseout="MM_showHideLayers('style','','hide')">
  <table cellpadding="0" cellspacing="3" class="cat_table">
      <tr>
      <td height="25" align="center" class="table_title">Styles</td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#acrylic">Acrylic Paint</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#charcoal">Charcoal</a> </td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#clay">Clay</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#collage">Collage</a> </td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#drawing">Drawing</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#fresco">Fresco</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#glass">Glass</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#gouache">Gouache</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#gumarabic">Gum Arabic</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#lithography">Lithography</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#oilpainting">Oil Painting</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#oilpastel">Oil Pastel</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#painting">Painting</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#penandink">Pen and Ink</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#pencil">Pencil</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#pigment">Pigment</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#tempera">Tempera</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#watercolorpainting">Watercolor Painting</a></td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#other">Other</a></td>
    </tr>
  </table>
</div>
<div id="artist_list">
  <table width="110" cellpadding="0" cellspacing="3" class="cat_table">
    <tr>
      <td height="25" align="center" class="table_title">Artist List </td>
    </tr>
    <tr>
      <td height="25" align="center" class="catagory"><a href="#">Name</a></td>
    </tr>
  </table>
</div>
<a href="index.html"><img src="images/webcity_banner.jpg" alt="WebCity ArtGallery" width="350" height="55" border="0" /></a>
<table width="100%" height="600" cellpadding="0" cellspacing="0">
  <tr>
    <td width="151" valign="top"><table width="151" cellpadding="0" cellspacing="0">
      <tr>
        <td class="space"><span class="titles">Menu</span><br />
            <div align="center"><img src="images/break_img.gif" width="95%" height="9" alt="webcity artgallery break image" /></div></td>
      </tr>
      <tr>
        <td class="space"><img src="images/menu_link_out.gif" alt="wcag_mouseout" name="link1" width="8" height="7" border="0" id="link1" /><a href="index.html" onmouseover="MM_swapImage('link1','','images/menu_link_over.gif',1)" onmouseout="MM_swapImgRestore()">Home</a><br />
            <img src="images/menu_link_out.gif" alt="wcag_mouseout" name="link2" width="8" height="7" border="0" id="link2" /><a href="#" onmouseover="MM_swapImage('link2','','images/menu_link_over.gif',1)" onmouseout="MM_swapImgRestore()">News</a><br />
            <img src="images/menu_link_out.gif" alt="wcag_mouseout" name="link3" width="8" height="7" border="0" id="link3" /><a href="viewArtists.php" onmouseover="MM_swapImage('link3','','images/menu_link_over.gif',1)" onmouseout="MM_swapImgRestore()">Artists</a><br />
            <img src="images/menu_link_out.gif" alt="wcag_mouseout" name="search" width="8" height="7" border="0" id="search" /><a href="search.php" onmouseover="MM_swapImage('search','','images/menu_link_over.gif',1)" onmouseout="MM_swapImgRestore()">Artist Map </a><br />
          <img src="images/menu_link_out.gif" alt="wcag_mouseout" name="link4" width="8" height="7" border="0" id="link4" /><a href="artist/alogin.php" onmouseover="MM_swapImage('link4','','images/menu_link_over.gif',1)" onmouseout="MM_swapImgRestore()">Artist Login</a><br /> 
          <img src="images/menu_link_out.gif" alt="wcag_mouseout" name="link5" width="8" height="7" border="0" id="link5" /><a href="clogin.php" onmouseover="MM_swapImage('link5','','images/menu_link_over.gif',1)" onmouseout="MM_swapImgRestore()">Customer Login</a>
</td>
      </tr>
      <tr>
        <td class="space"></td>
      </tr>
    </table></td>
    <td valign="top" class="space"><span class="titles">Artist Map</span><br />
    <img src="images/break_img.gif" width="95%" height="9" alt="webcity artgallery break image" /><br /><br />
    <table cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="110" cellpadding="0" cellspacing="3" class="cat_table">
          <tr>
            <td height="25" align="center" class="table_title">Catagory</td>
          </tr>
          <tr>
            <td height="25" align="center" class="catagory" onmousedown="MM_showHideLayers('style','','show')" onmouseout="MM_showHideLayers('style','','hide')"><a href="#style">Style</a></td>
          </tr>
          <tr>
            <td height="25" align="center" class="catagory"><a href="#genre">Genre</a></td>
          </tr>
        </table></td>
        <td width="150">&nbsp;</td>
        <td valign="top">Follow the menu, and find the artist you're looking for. </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="25" colspan="2" valign="bottom" class="space"><img src="images/break_img.gif" alt="wcag break img" width="95%" height="9" /><br />
    <span class="footer">Footer Text</span></td>
  </tr>
</table>
</body>
</html>
This is the page that gathers the information:
PHP Code:
<?php require_once('Connections/wcag.php'); ?>
<?php
$style 
"Fresco";

mysql_select_db($database_wcag$wcag);
$query_AllArtists "SELECT * FROM artist";
$AllArtists mysql_query($query_AllArtists$wcag) or die(mysql_error());
$row_AllArtists mysql_fetch_assoc($AllArtists);
$totalRows_AllArtists mysql_num_rows($AllArtists);

    do{
    
$art_styles explode(", ",$row_AllArtists['technique']);
    
$blanks 0;
        for(
$as 0$as count($art_styles); $as++){
            if(
$art_styles[$as] == $style){
            
$artist_str .= $row_AllArtists['name'].", ";
            }        
        }
    }while (
$row_AllArtists mysql_fetch_assoc($AllArtists));
    
    echo 
$artist_str;
mysql_free_result($AllArtists);
?>
$style is planned to be a $_GET variable. What all this does is it gets the string of "styles" from the database and splits them, and if one of them matches the GET variable, the artist gets called. And if another artist matches, it addes the artist to the $artist_str variable.

When it's done, this $artist_str variable will be a string of artists, that can be called to the display page in the "id=artist_list" DIV Layer. I want all this done in AJAX, but I have no idea where to start.

Here's what I'm looking for in a nutshell:
Click on a style from search.php -> Style variable gets sent to searchArtist.php via GET method -> string gets sent back to search.php

Only way I know this can be done without reloading or refreshing is AJAX, and I'd like to accomplish that. I need help. Thank you in advance.