I'm making an ajax call to a another page on my own domain. On this page however, I make an API call to Etsy's API. I get the JSON back, format it into XML, then echo $xml to return the data to the original ajax call. However, ajax.responseXML is always null! ajax.responseText does contain all the info I need though.
If instead of returning the XML-formatted JSON, I just return some XML without that data, (say... echo "<orders></orders>") then it works. And responseXML is not null.
So I'm thinking that even though my ajax call is calling another page on my domain, because that page is making an cross-domain call (Etsy API), it is violating the single origin policy and that is why responseXML is null?
Here's the call:
var ajax = new XMLHttpRequest();
ajax.open("GET", "OrderFetcher.php?function=sort");
ajax.onreadystatechange = function () {
if (ajax.readyState === 4) {
if (ajax.responseXML === null) {
console.log("ajax.responseXML is null.");
}
ordersToSort = convertXmlToArray(ajax.responseXML);
};
ajax.send();
OrderFetcher.php contains the API call.
EDIT
Here's the php code ajax calls:
if (array_key_exists("function", $_GET)) {
if ($_GET["function"] === "sort") {
header('Content-Type: text/xml');
$fetchUrl = "https://openapi.etsy.com/v2/shops/__SELF__/receipts/open?limit=150&includes=Transactions,Listings";
$orders = fetch(); // fetch() makes the API call via an Oauth object and oauth->fetch(...etc...etc...)
$xml = "<orders>";
foreach ($orders as $order) {
$xml .= "<order>";
$xml .= "<title>$order[title]</title>";
$xml .= "<order_date>$order[order_date]</order_date>";
$xml .= "<hidden_order_date>$order[hidden_order_date]</hidden_order_date>";
$xml .= "<ship_date>$order[ship_date]</ship_date>";
$xml .= "<addr_name>$order[addr_name]</addr_name>";
$xml .= "<addr_line_1>$order[addr_line_1]</addr_line_1>";
$xml .= "<addr_line_2>$order[addr_line_2]</addr_line_2>";
$xml .= "<addr_city>$order[addr_city]</addr_city>";
$xml .= "<addr_state>$order[addr_state]</addr_state>";
$xml .= "<addr_zip>$order[addr_zip]</addr_zip>";
$xml .= "<addr_country>$order[addr_country]</addr_country>";
$xml .= "<price>$order[price]</price>";
$xml .= "<quantity>$order[quantity]</quantity>";
$xml .= "<message>$order[message]</message>";
$xml .= "</order>";
}
$xml .= "</orders>";
echo $xml;
}
I believe I've narrowed it down to something with the API call or ajax timing out. In the code above, if I comment out the API call and xml data and instead just do the below, it "returns" fine and ajax.responseXML is not null.
if (array_key_exists("function", $_GET)) {
if ($_GET["function"] === "sort") {
header('Content-Type: text/xml');
//$fetchUrl = "https://openapi.etsy.com/v2/shops/__SELF__/receipts/open?limit=150&includes=Transactions,Listings";
//$orders = fetch();
// Remove xml string building code.
echo "<xmltag>Test</xmltag>";
}
}
EDIT 2
When I open "OrderFetcher.php?function=sort" (the ajax call) in my browser it runs for a few seconds (making API call) then gives me this:
This page contains the following errors:
error on line 1 at column 1: Document is empty Below is a rendering of the page up to the first error.
However, I'm not convinced something that Etsy is returning is causing invalid XML, because of these two points I mentioned above:
- If I ignore the API data (but still make the API call) and return a simple XML string (
echo "<tag></tag>"), then responseXML will still be null, even though I'm not "echo-ing" any of the data from the API call.
This doesn't work (ajax.responseXML is null):
$orders = fetch();
echo "<xmltag>Test</xmltag>";
- If I return the simple XML string (
echo "<tag></tag>") but also remove the API call altogether, suddenly responseXML is valid and not null!
This does work (ajax.responseXML is not null):
//$orders = fetch();
echo "<xmltag>Test</xmltag>";
