ajax POST returning error function with the correct data

I have the following code that is called whenever a dropdown is selected on my website:

Defailt.aspx page

$.ajax({
                     type: "POST",
                     url: "WebService1.asmx/HelloWorld",
                     data: "{}",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (response)
                     {
                         var resp = $.parseJSON(response.d);
                         alert(response.d);
                     },
                     error: function (response) {
                         alert(response.d);
                     },
                });

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string HelloWorld()
        {
            var data = new { Greeting = "Hello", Name = "How are you doing" };
            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
            return js.Serialize(data);
        }
    }

Whenever the ajax function is called I use Google Chromes debugging tools to put breakpoints and I see that:

1.  The error function gets called every time

2. The response.status is 200 and response.StatusText is "OK"

3. responseText="<?xml version="1.0" encoding="utf-8"?><string xmlns="http://tempuri.org/">{"Greeting":"Hello","Name":"How are you doing"}</string>"

Why is it returning the correct data in the 'error' function?

How can I get it to return success??