Tutorial

Tutorial: First Calculation

Now we'll make our first call to the TaxServer backend. In the compute function, we remove the 'alert' call, replacing it with an AJAX call.

Javascript:

	function compute() {
		var earnings = getFloat('earnings');
		var filingstatus = getInt('filingstatus');
		var payperiods = getInt('payperiods');
		getFederal(earnings, filingstatus, payperiods); 
	}
	function getFederal(earnings, filingstatus, payperiods) { 
		var xhttp = new XMLHttpRequest(); 
		xhttp.onreadystatechange = function() { 
			if (this.readyState == 4) { 
				alert(this.responseText); 
			} 
		}; 
		var uri = "http://localhost:8000/taxamount/federal income tax" 
			+ "?earnings=" + earnings.toString() 
			+ "&filingstatus=" + filingstatus.toString() 
			+ "&payperiods=" + payperiods.toString(); 
		xhttp.open("GET", uri, true); 
		xhttp.send(); 
	} 
	function getFloat(id) {
		var elem = document.getElementById(id).value;
		var f = parseFloat(elem);
		if (isNaN(f)) {
			return 0.00;
		} else {
			return f;
		}
	}
	function getInt(id) {
		var elem = document.getElementById(id).value;
		var f = parseInt(elem);
		if (Number.isInteger(f)) {
			return f;
		} else {
			return 0;
		}
	}

Here we've replaced the alert in compute with a call to getFederal. The getFederal function performs an AJAX call to the running docker instance, then shows an alert with the response.

Let's look a little closer at the 'uri' constructed in getFederal:

The 'http://localhost:8000' portion makes this a cross-domain AJAX request. This is why we needed the '--cors=...' argument when launching the TaxServer container.
Since we're computing a tax, the TaxServer API calls for a path of '/taxamount/<tax-name>.
We're computing federal withholding, choosing the tax-name 'Federal Income Tax'. This is appropriate for employees who've signed the Federal 2020 (or later) W-4. For employees who haven't signed, you'd need to use the tax-name 'FIT'.
We pass in the API-designated parameters 'earnings', 'filingstatus', and 'payperiods', along with their corresponding values.

Once the AJAX call completes, getFederal produces an alert containing the returned JSON text.

Result:

With the changes above, we're actually calling the TaxServer backend. Click the 'Compute' button below to get an alert with the computed response.