passing params through ajax to php

Question

I know this is a very basic question, but i couldnt figure how to fix the code even after crawling the web for past 1 hour. I have an unordered list containing the information about the categories in the database, with cat_id as primary key. and a subject table with cat_id as its foreign key, so i want to access the subjects table through ajax request for given category ID. below is the code i used to generate categories. Where i am stuck is, i dont know which DOM element to fetch in order to send the unique id in the url parameter .. thanks ..

    <ul id="search_form">
       <?php
       $cat = Category::find_all();
       foreach($cat as $category) {
           echo '<li id="';
           echo $category->cat_id;
           echo '"><a href="subject.php?id=';
           echo $category->cat_id;
           echo'">';
           echo $category->category;
           echo '</a></li>';

       }

       ?>
    </ul>
    <div id="results">
        <!-- ajax contents goes here -->
    </div>

the ajax file is

    window.onload = init;
    function init() {
      if (ajax) {
        if (document.getElementById('results')) {
          document.getElementById('search_form').onclick = function() {

            ajax.open('get', 'subject.php?id='+id ); // subject.php?id=
            // how will i pass the variable
            ajax.onreadystatechange = function() {
              handleResponse(ajax);
            }
            ajax.send(null);
            return false; 
          } 
        }
      } 
    } 
    function handleResponse(ajax) {
      if (ajax.readyState == 4) {
        if ((ajax.status == 200) || (ajax.status == 304) ) {
          var results = document.getElementById('results');
          results.innerHTML = ajax.responseText;
          results.style.display = 'block';

        } 
      } 
    } 

and the subject.php

    <?php 
    //include("tpl/header.php");
    include("includes/initialize.php");
    ?>
       <h2></h2>
        <?php
            if (isset($_GET['id'])) {
                $id= mysql_real_escape_string($_GET['id']);
                $subject = Subject::find_subject_for_category($id);
                foreach($subject as $subj) {
                    echo $subj->subject_title;
                }
            } else {
                echo "No ID Provided";
            }
        ?>

Answer 1

I have used Jquery to do these kind of things and it works fine for me.

$.ajax({
  type: GET,
  url: "subject.php",
  data: {id: $('#search_form :selected').val()},
  success: function(result){
    // callback function
  }
});