jQuery Mobile - >从外部服务器加载内容

时间:2012-03-03 23:47:31

标签: php jquery json cross-domain jsonp

我正在开发一个看似基本的移动应用程序(第一个)。但我想让应用程序从我们的'head'服务器请求信息。确保它有最新信息。

我目前正在运行这样的jQuery脚本。

$.ajax({
        url: 'http://www.domain.com/list.php',
        dataType: 'json',
        crossDomain: true,
        success: function(data) {

            // Remove all content first
            $(contentId +' li').remove();

            // Load Data
            $.each(data.items, function(index, list){
                $(contentId).append('<li><a href="details.html?id=' + list.homeId + '" >' + list.name + '</a></li>\n');
            });

            // Reload View
            $(contentId).listview('refresh');

        }, 
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('Error: '+ jqXHR + textStatus + errorThrown);
        }
    });

实际上在那个LIST.PHP文件中,它确实返回了一个JSON字符串。但我为安全做的是将其添加为标题

header("Access-Control-Allow-Origin: *");

或者我可以将*更改为域/网址以增加安全性。但是,如果我不在其中添加header()代码,我的javascript就会中断并且无法正常运行。

我想我真正想知道的是,我这样做了吗?或者有更好的方法吗?我已经尝试过JSONP,但我似乎无法让它为跨域工作。

我的解决方案听起来不错?或完全废话?任何想法或方向将不胜感激!

1 个答案:

答案 0 :(得分:1)

我认为你应该研究JSONP。这并不难。在客户端,jQuery已经开箱即用,只需将?callback=?附加到URL即可。在服务器上,而不是仅使用JSON响应,例如:

{
  "foo": "bar"
}

查找查询参数callback,如果它存在,则将JSON输出包装在函数调用中,其名称为callback参数的值,因此,对于callback=foo

foo({
  "foo": "bar"
})

使用JSONP回复时,请发送Content-Type: text/javascript。这应该可以在不设置Access-Control-Allow-Origin或类似的任何内容的情况下工作。

相关问题