Paul Paul - 1 year ago 92
Ajax Question

AJAX Query Not Working After Move to AWS $ CloudFront

After a long time lurking, its time to ask my first question...

I'm having trouble with an AJAX query that used to work prior to moving to AWS.

Previously, My web site was hosted on a WAMP server for testing and development and the following relevant code worked fine.

//Read XML file from disc and send file content to other functions\\
function Get_XML_File(){
var XML_File_Path = File_Path + Client_Code + '/' + ID + '/' + ID + '_Analysed_Wave.web'
var xhttps = new XMLHttpRequest();

xhttps.onreadystatechange = function() {
if (xhttps.readyState == 4 && xhttps.status == 200){
};"GET", XML_File_Path, true);
//Extract Header Data from XML file\\
function Read_Meta_Data(xml) {
var xmlDoc = xml.responseXML;

// Client//
var Client_ID = xmlDoc.getElementsByTagName('Client_ID')[0].childNodes[0]
var Client_Name = xmlDoc.getElementsByTagName('Client_Name')[0].childNodes[0]

Recently, This site was moved to a Elastic Beanstalk distribution with AWS.

'' has been provisioned with an SSL certificate using the AWS certificate manager.

'' is also covered by an SSL certificate and is mapped to a cloudfront distribution of a S3 bucket.

Within the S3 bucket are xml formatted files with a .web suffix (these are generated by proprietary software.)

When the relevent web page is viewed, the chrome console shows the following error: "Uncaught TypeError: Cannot read property 'getElementsByTagName' of null"

this error is in reference to this line:

var Client_ID = xmlDoc.getElementsByTagName('Client_ID')[0].childNodes[0]

What I can't understand is that when the 'Network' tab of the developer console is viewed, the resource is shown as correctly loaded with a status code of 200.
Further, the file content can be viewed in the 'response' tab.

Does this mean that the file has been correctly downloaded from the server to the client?

If so, why does code that formerly worked without error now fail to get the file content?

Does something other than a standard website configuration need to be provisioned through elastic beanstalk (or other means)?

Thanks in anticipation.

Answer Source

You receive a HTTP 200 meaning the server understand the request and can full-fill the request but then it delivers the content, when you execute Read_Meta_Data it does not mean the full content has been delivered

you could add a console.log(xml) and console.log(xmlDoc) to see the current content of your progress

what I would suggest you leverage your code to add a listener on the completion of the transfer

var xhttps = new XMLHttpRequest();
xhttps.addEventListener("load", transferComplete, false);

function transferComplete(evt) {
  // from here your transfer has been completed

note: there's also a loadend method which runs when the load has been completed (wether it has been successful or not - never used it)