Multiple API requests

So one of the problems that I ran into when working on my iteration 2 was that when I was creating multiple proxy requests, I could only get one of the API to return data. After some research and talking with professor Drake, he was able to point out that it was possibly because I was using the same createRequest() function to make the calls. After thinking about it for a bit, it became perfectly clear. The createRequest() function uses global variable and what was happening was that I was overwriting the globals with the second results when calling the function twice. So what I had to do was this. Create a function for the weather request.

function weatherRequest() {
try {
weatRequest = new XMLHttpRequest();
} catch (tryMS) {
try {
weatRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
weatRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
weatRequest = null;
}
}
}
return weatRequest;
}

I then had to create another function with different global variables.

function descriptionRequest() {
try {
descRequest = new XMLHttpRequest();
} catch (tryMS) {
try {
descRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
descRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
descRequest = null;
}
}
}
return descRequest;
}

Once this was accomplished I also had to create a different proxy script for each API that I wanted to call. This is because of the fact that each proxy is returning data and if you try to use the same proxy you either need to create all new variable and requests within the proxy script or you just need to have separate proxy files for each request. I chose the latter for simplicity and separation fo the code for troubleshooting purposes.

//*********************************************************************************

function getDesc(itemName) {
descRequest = descriptionRequest();
if (descRequest == null) {
return;
}
//alert("getDesc()");
url= "scripts/description.php?ImageID=" + escape(itemName);
descRequest.open("GET", url, true);
descRequest.onreadystatechange = displayDetails;
descRequest.send(null);

}

//*********************************************************************************

function getWeather(zip) {
weatRequest = weatherRequest();
if (weatRequest == null) {
return;
}

url= "scripts/weather.php?zipID=" + escape(zip);
weatRequest.open("GET", url, true);
weatRequest.onreadystatechange = displayWeather;
weatRequest.send(null);

}

Then it was just a matter of displaying the results to each of the div tags assigned. This was also accomplished using separate functions.

//*********************************************************************************

function displayDetails() {
if (descRequest.readyState == 4) {
if (descRequest.status == 200) {

document.getElementById("description").innerHTML = descRequest.responseText;
}
}
}

//*********************************************************************************

function displayWeather() {
if (weatRequest.readyState == 4) {
if (weatRequest.status == 200) {
//alert(request.responseText);

document.getElementById("weather").innerHTML = weatRequest.responseText;
}
}
}

That's it. So essentially for each API that you use you will need to have a set of separate functions to handle the requests and the displaying of the data all with different global variable. You can check out the results of this HERE.