使用 Enyo 框架的 AJAX 调用答案

【问题标题】：AJAX Call using Enyo Framework使用 Enyo 框架的 AJAX 调用
【发布时间】：2014-04-29 00:28:37
【问题描述】：

我正在尝试使用 enyo 框架进行 ajax 调用，但我一头扎进了一个问题。我收到的错误消息是 0。这只是一个 0。我确保我的 json 文件链接是正确的，我构建了这个 jsfiddle 来测试它http://jsfiddle.net/mmahon512/CPU8n/2/ 任何帮助都非常感谢。我的主机是 GoDaddy，我确保将 json 扩展正确添加到我的 Web 配置中。 json 文件的链接是正确的，它返回有效的 json。我使用 jsonlint 检查了它。这是 jsfiddle 上的代码：

enyo.kind({ name: "AjaxSample", components: [ { kind: "Button", content: "Fetch Users", ontap: "fetch" }, { name: "repos", content: "Not loaded...", allowHtml: true } ], fetch: function() { var ajax = new enyo.Ajax({ url: "@987654322@" }); ajax.go(); ajax.response(this, "gotResponse"); ajax.error(this, this.gotError); }, gotResponse: function(inSender, inResponse) { var output = ""; for(i = 0; i < inResponse.length; i++) { output += inResponse[i].Id + " "; } output += Date.now(); this.$.repos.setContent(output); }, gotError: function(inSender, inError) { alert(inError); this.$.repos.setContent(inError + " " + Date.now()); }

});

【问题讨论】：

标签： enyo

【解决方案1】：

看起来像 CORS 问题。我在控制台中看到以下内容：

请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin fiddle.jshell.net 因此不允许访问。

我成功地将它包装成一个 jsonp 请求。

http://jsfiddle.net/CPU8n/3/

enyo.kind({
    name: "AjaxSample",
    components: [
        { kind: "Button", content: "Fetch Users", ontap: "fetch" },
        { name: "repos", content: "Not loaded...", allowHtml: true }
    ],
    fetch: function() {
        var ajax = new enyo.JsonpRequest({
            url: "http://jsonpwrapper.com/?urls%5B%5D=http%3A%2F%2Fatxapps.com%2F_sites%2Fatxapps.com%2Fdev%2Fjetstream%2Fassets%2FdataUsers.json"
        });
        ajax.go();
        ajax.response(this, "gotResponse");
        ajax.error(this, this.gotError);
    },
    gotResponse: function(inSender, inResponse) {
        var output = "";
        var body = enyo.json.parse(inResponse[0].body); // jsonpwrapper.com wraps the results in a array with an index for each URL. The actual data is in the body param of that index but it isn't parsed (at least in this example)
        for(i = 0; i < body.length; i++) {
            output += body[i].Id + "<br />";
        }
        output += Date.now();
        this.$.repos.setContent(output);
    },
    gotError: function(inSender, inError) {
        alert(inError);
        this.$.repos.setContent(inError + " " + Date.now());
    }

});

如果您在 prod 中的同一台服务器上运行它，您不会看到错误（因为它不是跨域的）。如果它在不同的服务器上，您可以将服务器端转换为支持 jsonp 或adds the appropriate CORS headers。

【讨论】：