Getting a error when running a simple web service

See more:

C#

Javascript

XML

SOAP

I have constructed a very simple web service in C# this is the server code

using MySql.Data;
[WebService(Namespace = "http://www.example.org/", Description = "Example web service in C#")]
	[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
	[ScriptService]
	public class ExampleService : System.Web.Services.WebService
	{
        
    	[WebMethod(Description = "Echos back a string")]
		[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]

		public string echoString(String testString)
		{
			// An example of a pragma for throwing an exception for invalid input
			// NB: You will still get basic type error handling even if you don't do this!
			// "InputValidationException" is a commonly used pragma for input handling in .NET
			if (testString.Length < 1)
				throw new InputValidationException("The input string must be at least one character");

			return testString; 
		}
       }

When I access ExampleServics.asmx via a Web browser it works fine. However when I try to access it via javascript using the code below i get the following error
Data at the root level is invalid. Line 1, position 1. It is my understanding that this is caused by a malformed statement. Here is the javascript for the Request

var str = 
   'POST /ExampleService.asmx HTTP/1.1 ' +
     'Host: localhost ' +
     'Content-Type: text/xml; charset=utf-8 ' +
     'Content-Length: length ' +
     'SOAPAction: "http://www.example.org/echoString" ' +
     '<?xml version="1.0" encoding="utf-8"?> ' +
     '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
      xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> ' +
     '<soap:Body> ' +
     '<echoString xmlns="http://www.example.org/"> ' +
     '<testString>test</testString> ' +
     '</echoString> ' +
     '</soap:Body> ' +
     '</soap:Envelope> ';

        var url = "http://apislot/ExampleService.asmx";
        var soap_request =  makeSoapRequest(url);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
         xhr.onreadystatechange = function() {//Call a function when the state changes.
            // Request finished. Do processing here.
        }
       xhr.send(str);

What I have tried:

I have been trying to solve this for days but nothing seems to work. Been all over the internet but all I find is references to a bad request but I can find nothing wrong with the code above. Please help.