How can I use an ajax request to fire Webservice calls in Javascript

Question

I am currently working on some javascript that can be included in the header of surveys that use TrueSample, and will dynamically generate and fire Webservice calls for the survey. One of the requirements of Truesample is that after every page, it is sent the amount of time spend on that page, as well as some other arbitrary information generated in the beginning of the survey. I am trying to automate the every page web service call, so that I don't have to have hundreds of web services in every survey.

I am pretty far along, and have found some cool tricks to make this all work, but I am struggling with firing the webservice using javascript.

Here is what I have so far:

Qualtrics.SurveyEngine.addOnload(function()
{
                var pageStart = new Date();
                var beginning = pageStart.getTime();
                // Necessary Variables
                var account-id = parseInt("${e://Field/account-id}"); 
                var passcode = parseInt("${e://Field/passcode}"); 
                var survey-country = parseInt("${e://Field/survey-country}"); 
                var end-client-id = parseInt("${e://Field/end-client-id}"); 
                var page-exposure-duration; 
                var page-id = parseInt("${e://Field/pageID}"); 
                var platform-id = parseInt("${e://Field/platform-id}"); 
                var respondent-id = parseInt("${e://Field/respondent-id}"); 
                var response-id = parseInt("${e://Field/response-id}"); 
                var source-id = parseInt("${e://Field/source-id}"); 
                var survey-id = parseInt("${e://Field/survey-id}"); 
                var api-version = parseInt("${e://Field/api-version}"); 
                //End Variables
                var that = this;
                that.hideNextButton();
                var para = document.createElement("footnote");
                var test = document.getElementById("Buttons");
                var node = document.createElement('input');
                var next = document.getElementById("NextButton");
                node.id = "tsButton";
                node.type = "button";
                node.name = "tsButton";
                node.value = "  >>  ";
                node.onclick = function trueSample(){
                                var pageEnd = new Date();
                                var end = pageEnd.getTime();
                                var time = end - beginning;
                                window.alert(pageID + ", time spent on page = " + time);
        Qualtrics.SurveyEngine.setEmbeddedData("pageID", pageID + 1);

                                new Ajax.Request('webserviceURL', {
                                parameters: {
                                                account-id: account-id,
                                                passcode: passcode,
                                                survey-country: surveycountry,
                                                end-client-id: end-client-id,
                                                page-exposure-duration: time,
                                                page-id: page-id,
                                                platform-id: platform-id,
                                                respondent-id: respondent-id,
                                                response-id: response-id,
                                                source-id: source-id,
                                                survey-id: survey-id,
                                                api-version: api-version}


                                });

                                that.clickNextButton();
                };
                para.appendChild(node);
                test.insertBefore(para, next);

});

Does anyone have experience with firing webservice calls out of Javascript? And if so, do you have any ideas on how to finalize the ajax request and make it work? Or is there another(potentially better) method that I could use for these calls that would work? I understand that there is information on this on Stack Overflow, but I am having a hard time understanding how specific use cases apply to mine.

Also, please note that, while I would love to use JQuery, I am limited to vanilla Javascript, and Prototype.JS.

Answer 1

Using Traditional javascript XmlHttpRequest you can make an AJAX call. For a Webservice, we need couple of HTTP Headers. Like: SOAPAction, Content-Type, Accept. The values for these headers MUST be like below:

SOAPAction:""
Content-Type:text/xml
Accept:text/xml

So, additionally, your code should look something like this for making an AJAX call to the Webservice:

//Get XML Request Object
var request = new XMLHttpRequest();
// Define the URL
var url="http://your.end.point.url?wsdl";
//Define HTTP Method. Always POST for a Webservice
request.open("POST", url, true); // Remember that all the Webservice calls should be POST
//Setting Request Headers
request.setRequestHeader("SOAPAction", "\"\"");//Not sure of the escape sequence. The value should be "".
request.setRequestHeader("Accept","text/xml");
request.setRequestHeader("Content-Type","text/xml");

//Make your AJAX call    
request.send(soap); // where soap is you SOAP Request Payload.

Parsing the response:

request.onreadystatechange=stateChanged;

function stateChanged()
{
if (request.status==200)
{
// Success. Parse the SOAP Response
}
if(request.status==500)
{
//Failure. Handle the SOAP Fault
}
}