OPTIONS request being made for $.ajax

Question

Hello,

I have the following code which,currently im running on my local machine.I am making a call to a php script called getxml.php,which should send the contents of an xml file as the response.

But,instead of a GET request, in Firebug i see that an OPTIONS request is being made, like OPTIONS getxml.php . I think im not making a cross domain Ajax request,but still am facing this problem . Any way to fix this ?

var employee_list = new Object; 
$(function(){
       $.ajax({
       type:"GET",
       url:"http://localhost/projectname/getxml.php",
       datatype:"xml",
       success: function(xml){
        $(xml).find('employee').each(function(){
         var name_text = $(this).find('name').text();
         var url_text = $(this).find('url').text();
         employee_list[name_text] = url_text;
         $('<li></li>').html(name_text + ' (' + url_text + ')').appendTo('#update-target ol');

        });
       } //closing function  
       }); //closing $.ajax

}); //closing $(

getxml.php

<?php
    //Send the xml file as response
    header('Content-type: text/xml');
    readfile('employee_results.xml');
?>  

Thank You

Answer 1

Make sure getxml.php exists. OPTIONS usually means you have a slight misspelling.

Answer 2

change datatype to dataType and see if that fixes your problem. The rest of the code looks right.

edit: also, I'm not a PHP pro, but I wrote a map application which uses a similar approach. To return xml, I used:

header("Status: 200");
header("Content-type: text/xml");
echo  file_get_contents($q,0); /*$q is the query/filename*/  
exit();

I remember reading somewhere that header("Status: 200"); was required.

edit: Here is how I've done the same thing. I hope this helps.

 /* call ajax method to retrieve earthquakes */
  $.ajax({
    type: "GET",
    url: "../getxml.php?q=" + xmlLocation, 
    dataType: "xml",
    success: function(xml){
            $(xml).find('entry').each(function(){
                /* Retrieve all needed values from XML */
                var title = $(this).find('title').text();
                var summary = $(this).find('summary').text();
                var coord = $(this).find('georss\\:point').eq(0).text();
                if(!coord){var coord = $(this).find('point').text();}; 
                var points = coord.split(' ');
                var latitude = parseFloat(points[0]);
                var longitude = parseFloat(points[1]);  
                var htmlString = "<div class=\"infowindow\"><b>" + 
                                title + "</b>" + "<p>" + summary + "<br></div>";
                var myLatlng = new google.maps.LatLng(latitude,longitude);
                var marker = new google.maps.Marker(
                {
                 position: myLatlng,
                 map: map,
                 title: title
                });
                markers[markers.length] = marker;
                addInfoWindow(marker, map, htmlString);

                $('#output').text("Showing " + markers.length + " earthquakes");
            });/*  end each */
        }
    }); /* end $.ajax */

The php file is exactly as I posted above, but with "security" to respond only to ajax requests.