who to populate select with curl http response from php function via ajax?

I have the following index.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title>galshan ajax</title>
<script>
$(document).ready(function(){
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "add.php",
        action: "get_prof",
        data: { "par" : '' },
        dataType: "json",
        async: true,
        success: function(data) {
            var select = $('#mySelect');
            $(data).find('root').each(function(){
                $(this).find('p').each(function(){
                    var textVal = $(this).val('n');
                    var valueVal = $(this).val('i');
                    select.append("<option class='ddindent' value='"+ valueVal +"'>"+textVal+"</option>");
                });
            });
            select.children(":first").text("pick one").attr("selected",true);
        } //sucess close
    }); 
}); 
</script>
</head>
<body>
    <div id="page-wrap">
        <select id="mySelect">
            <option>loading</option>
        </select>
    </div>
</body>
</html>

and the add.php file is:

<?php
function get_prof(){
    $par = isset($_POST['par'])?$_POST['par']:'';
    // where are we posting to?
    $url = 'example.com/GetProf';

    // what post fields?
    $logins = array(
       'clientID' => 'idnum',
       'username' => 'name',
       'password' => 'password',
       'par'      => $par
    );

    // build the urlencoded data
    $postvars = http_build_query($logins);

    // open connection
    $curl_handle = curl_init();

    // set the url, number of POST vars, POST data
    curl_setopt($curl_handle, CURLOPT_URL, $url);
    curl_setopt($curl_handle, CURLOPT_POST, count($logins));
    curl_setopt($curl_handle, CURLOPT_POSTFIELDS, $postvars);

    // execute post
    $result = curl_exec($curl_handle);

    // close connection
    curl_close($curl_handle);
}
?>

and the response is like the following:

<?xml version="1.0" encoding="utf-8"?>
<root>
  <p i="9107" n="content01" />
  <p i="9267" n="content02" />
  <p i="9106" n="content03" />
  <p i="9078" n="content04" />
  <p i="9282" n="content05" />
  <p i="1000" n="content06" />
  <p i="1200" n="content07" />
  <p i="9097" n="content08" />
  <p i="1400" n="content09" />
  <p i="9242" n="content10" />
</root>

I'm basically trying to populate the #mySelect with options that the text is the n value and the actual value is the i. And I have few problems:

I can't seems to call the function within the add.php file from the ajax script, if i don't declare the function in the php file i get the response but i can't seems to return it. What do i need to do to call a specific function within php file from the ajax script?
When i get the response from the external web site i can't seems to append the data as options in the select element, What do I do wrong?

This project need to be closed this week, and I'll be thankful if some one can help me with that.

Solution

The main problem with this html is that i used jquery ver 1.3 that can't work with dataType: "xml" or "json".

Second, the n and the i can be reached like $(this).attr("i") and not .val.

Third, you can't execute php function with ajax only if you pass a value to the php file and define the function you want to execute.

My code for know is:

<!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=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" title="main css" type="text/css" media="screen" charset="utf-8">
<title>ajax</title>
<script>
$(document).ready(function(){
    $.ajax({
        type: "POST",
        url: "add.php",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: { "par" : "500"},
        dataType: "xml",
        async: true,
        success: function(xml) {
            var select = $('#profSel');
            $(xml).find('root').each(function(){
                $(this).find('p').each(function(){
                    var textVal = $(this).attr("n");
                    var valueVal = $(this).attr("i");
                    select.append("<option class='ddindent' value='"+ valueVal +"'>"+textVal+"</option>");
                });
            });
            select.children(":first").text("בחר ענף").attr("selected",true);
        } //sucess close
    }); 
}); 
</script>
</head>
<body>
    <div id="page-wrap">
        <select id="profSel">
            <option>loading</option>
        </select>
    </div>
</body>
</html>

still working on it, and will update.