IMS RESTful API called through JavaScript fetches no response.
I have an IMS RESTful API that works perfectly fine when tested through the Swagger UI. The Request URL for the API is http://IMSA.XXX.COM:9080/part-transaction-api-project9/GETPARTInformation5/AN960C10
When I execute the URL by typing it directly into my GOOGLE CHROME Browser, I get a response back.
Now, I have coded a very, very simple Web Application with embedded JavaScript code that sends a HTTP GET request to the same URL. I provide the code below.
<!DOCTYPE html>
<html>
<head>
<title>PART Description Web Application</title>
<style>
body {background-color: orange;}
h1 {color: white;}
h1 {font-family:verdana;}
p {color: gray;}
p {font-family:verdana;}
</style>
<meta charset="UTF-8">
<meta name="description" content="PART Description Web Application">
<meta name="author" content="Subhasish Sarkar">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function validateForm() {
var PartNumberValidation = document.forms["myForm"]["PartNumber"].value;
if (PartNumberValidation == "") {
alert("Please enter a PART Number !!!");
return false;
}
else {
var PartNo = document.getElementById("PartNumberID").value;
var url = 'http://IMSA.XXX.COM:9080/part-transaction-api-project9/GETPARTInformation5/' + PartNo;
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.setRequestHeader("Authorization", "Basic ************************");
request.send();
alert(request.status);
console.log(request.response);
// alert(request.responseText);
}
}
</script>
</head>
<body>
<a href="https://www.xxx.com/" target="_blank">
<img src="xxx_logo_RGB.jpg" alt="XXX Logo couldn't be loaded !!!" style="width:100px;height:75px;border:0;">
</a>
<h1>PART Description Web Application</h1>
<p><b>This is a very, very simple Web Application that takes in a PART Number as the input from the user and then returns you the Part's description.</b></p>
<br>
<form name="myForm" onsubmit="return validateForm()">
PART Number:<br>
<input type="text" name="PartNumber" id="PartNumberID" maxlength="8" autofocus><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The problem is that I am not getting any response back - alert(request.status) displays 0.
Any help and feedback to get this working will be highly appreciated.
Hello Subhasish @Subhasish Sarkar
You are making an asynchronous call, because "true" is set on the request.open statement. So you should also have a request.onreadystatechange = function() to wait for the response. Try adding the following code immediately after var request = new XMLHttpRequest(); and before the request.open:
request.onreadystatechange = function() {
if (this.readyState == 4) {
console.log("Status " + this.status);
if (request.status == 200) {
console.log("Response Text " + this.responseText);
alert(this.responseText);
}
}
};
Also, the form submission may be cancelling the AJAX call, so try adding return false; after the request.send(); statement.
Regards, Sue
z/OS Connect EE Test
Works perfect !!! Thanks a ton, @bayliss for your assistance !!!