Question

I am new to JavaScript and Ajax.

I have a form which posts to remote url and returns a XML response containing some data and a URL. I need to extract the url and redirect to the URL in the XML response.

Here is my form

<form target="_blank" action='https://requesturl.co.uk/requestservice.asmx/Request_v4' method="POST"  >
<input type='hidden' value='' name='AffiliateID' /><input type='hidden' value='' name='AffiliatePW' /><input type='hidden' value='' name='ReqMode' /><input type='hidden' value='' name='ReqTotalTimeout' /><input type='hidden' value='' name='ReqLenderTimeout' /><input type='hidden' value='' name='ReqLoanAmount' /><input type='hidden' value='' name='AppTitle' /><input type='hidden' value='' name='AppFirstName' /><input type='hidden' value='' name='AppLastName' /><input type='hidden' value='' name='AppEmail' /><input type='hidden' value='' name='AppDOBDay' /><input type='hidden' value='' name='AppDOBMonth' /><input type='hidden' value='' name='AppDOBYear' /><input type='hidden' value='' name='AppHomePhone' /><input type='hidden' value='' name='AppWorkPhone' /><input type='hidden' value='' name='AppMobilePhone' /><input type='hidden' value='' name='AppPostCode' /><input type='hidden' value='' name='AppHouseNumber' /><input type='hidden' value='' name='AppStreet' /><input type='hidden' value='' name='AppTown' /><input type='hidden' value='' name='AppCounty' /><input type='hidden' value='' name='EmpIncomeType' /><input type='hidden' value='' name='EmpEmployerName' /><input type='hidden' value='' name='EmpTimeAtEmployer' /><input type='hidden' value='' name='EmpNetMonthlyPay' /><input type='hidden' value='' name='EmpPayFrequency' /><input type='hidden' value='' name='EmpDirectPayment' /><input type='hidden' value='' name='EmpNextPayDay' /><input type='hidden' value='' name='EmpNextPayMonth' /><input type='hidden' value='' name='EmpNextPayYear' /><input type='hidden' value='' name='EmpFollowingPayDay' /><input type='hidden' value='' name='EmpFollowingPayMonth' /><input type='hidden' value='' name='EmpFollowingPayYear' /><input type='hidden' value='' name='EmpNINumber' /><input type='hidden' value='' name='BankAccount' /><input type='hidden' value='' name='BankSortcode' /><input type='hidden' value='' name='BankDebitCard' /><input type='hidden' value='' name='AppAddressYears' /><input type='hidden' value='' name='AppAddressMonths' /><input type='hidden' value='' name='AppHomeStatus' /><input type='hidden' value='' name='ReqConsent' /><input type='hidden' value='' name='ReqIPAddress' /><input type='hidden' value='' name='ReqAgent' /><input type='hidden' value='' name='ReqMarketingOptIn' /><input type='hidden' value='' name='ReqDomain' />
<input type="submit" value="Invoke" class="button">

The XML response is

<RequestResult><Result>Accepted</Result><FailureReasons/><AcceptedLender>LendingStream</AcceptedLender><RedirectURL>http://redirecttothisURL.com/testing.htm</RedirectURL><PPDReference>6524845</PPDReference></RequestResult>

after some research it looks like Jquery would be best to do this but I’m getting confused if the fact its posting to remote URL will create problems due to browsers not allowing it.

Any help or ideas would be greatly appreciated.

Thanks

Answer 1

Yes, due to the same origin policy restriction you cannot use javascript to perform this request. You could write a server side script that will perform the request to fetch the remote resource and then use an AJAX request to this server side script on your domain that will bring the XML and allow you to parse it.

Obviously depending on the server side language you are using there might be different ways to implement this.

But if you want to use jQuery it is pretty easy once you have setup this server side script on your domain. You simply use the $.ajax() method:

$.ajax({
    url: '/url_to_your_server_side_script_that_serves_as_a_bridge',
    success: function(xml) {
        alert($('Result', xml).text());
    }
});

And here’s a live demo.