Question

经过很长一段时间潜伏，是时候问我的第一个问题......

我在使用之前在迁移到AWS之前工作的AJAX查询时遇到了问题。

以前，我的网站托管在WAMP服务器上进行测试和开发，以下相关代码工作正常。

@Injectable()

最近，该网站已转移到使用AWS的Elastic Beanstalk发行版。

'www.atmocean.com.au'已使用AWS证书管理器配置了SSL证书。

'assets.atmocean.com.au'也包含在SSL证书中，并映射到S3存储桶的云端分发。

在S3存储桶中是带有.web后缀的xml格式文件（这些文件由专有软件生成。）

当查看相关网页时，chrome控制台会显示以下错误：“未捕获的TypeError：无法读取属性'getElementsByTagName'为null”

此错误是参考此行：

//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){ 
            Read_Meta_Data(xhttps)
            Read_Time_Status(xhttps)
            Read_Wave_Height(xhttps)
        ;}
    };

    xhttps.open("GET", XML_File_Path, true);
    xhttps.send();
}   
//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]

我无法理解的是，当查看开发者控制台的“网络”选项卡时，资源显示为正确加载，状态代码为200。此外，可以在“响应”选项卡中查看文件内容。

这是否意味着文件已从服务器正确下载到客户端？

如果是这样，为什么之前没有错误的代码现在无法获取文件内容？

是否需要通过弹性beanstalk（或其他方式）配置标准网站配置以外的其他内容？

感谢您的期待。

Answer 1

您收到HTTP 200，这意味着服务器了解请求并可以完整填写请求，但随后会执行内容，当您执行Read_Meta_Data时，并不意味着已提供完整内容

您可以添加console.log(xml)和console.log(xmlDoc)来查看进度的当前内容

我建议你利用代码在传输完成时添加一个监听器

var xhttps = new XMLHttpRequest();
xhttps.overrideMimeType('text/xml');
xhttps.addEventListener("load", transferComplete, false);

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

注意：还有loadend方法在负载完成时运行（无论是否成功 - 从未使用过它）

Answer 2

弗雷德里克，

感谢您的回复。线索如下：

xhttp.overrideMimeType('text/xml');

因为xml文件使用自定义文件扩展名，所以它作为文本字符串返回。

我已将此功能更改为现在，如下所示：

//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 xhttp = new XMLHttpRequest();
    xhttp.overrideMimeType('text/xml');

    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200){ 
            Read_Meta_Data(xhttp)
            Read_Time_Status(xhttp)
            Read_Wave_Height(xhttp)
        ;}
    };

    xhttp.open("GET", XML_File_Path, true);
    xhttp.send();
}   


xhttp.overrideMimeType('text/xml');

随着这一改变，一切都与世界相得益彰。（至少我的功能。）

迁移到AWS $ CloudFront后，AJAX查询无法运行

2 个答案: