Using $.ajax() to get XML



The jQuery Code START
    
    <script type="text/javascript" src="./jquery-1.5.1.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    
    <script type="text/javascript">
      $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "sandwiches.xml",
          dataType: "xml",
          success: callback
        });
     });
     
     function callback(data, status) {
            var sandwiches = data.getElementsByTagName("sandwich");
            listSandwiches(sandwiches);
     }

      function listSandwiches (sandwiches) {
        var loopIndex;
        var selectControl = document.getElementById('sandwichList');

        for (loopIndex = 0; loopIndex < sandwiches.length; loopIndex++) {
          selectControl.options[loopIndex] = new Option(sandwiches[loopIndex].firstChild.data);
        }
      }
    </script>
    
    <style type="text/CSS">
        <!--
        .code { color: red; }
        .back { background-color: yellow; }
        -->
   </style>
  </head>

  <body>
    <h1>Using $.ajax() to get XML</h1>
    <form>
      <select size="1" id="sandwichList">
        <option>Select a sandwich</option>
      </select>
    </form>