Ajax 功能在移动浏览器上不起作用答案

【问题标题】：Ajax function will not work on mobile browserAjax 功能在移动浏览器上不起作用
【发布时间】：2013-11-12 23:38:58
【问题描述】：

您好，感谢您查看此内容。对 jQuery/ajax 等非常陌生。这个网站可以通过 FTP 访问适当的服务器，所以我（据我所知）没有违反跨域策略。这个网站在任何桌面浏览器上都能正常工作，但在任何移动浏览器上都不能工作。我觉得问题很明显，但我不知道该怎么办。有人可以帮我解决这个问题吗？

<!DOCTYPE html> 
<html>

<head>
<meta charset="utf-8">
<title>GRID Mobile</title>
<meta name = "viewport" content="width=device-width, user-scalable=no"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
            type: 'GET',
            url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                    $('#feedContainer').append('<h3>'+title+'</h3><p>'+description+link+'</p>');
                });
            }
        });
</script>

</head> 
<body> 

<div data-role="page" id="page">



    <div data-role="header" data-theme="b">


    <h1>GRID MOBILE</h1>

</div>
    <div data-role="content">   
        <div id="feedContainer"></div>  
        <h3></h3>
        <p></p>

    </div>
    <div data-role="footer">
        <h4>Advertisements</h4>
    </div>
</div>


</body>
</html>

【问题讨论】：

标签： javascript jquery ajax jquery-mobile cross-domain

【解决方案1】：

只是一个想法，您是否尝试过将您的 ajax 调用包装在加载事件中。我还没有在移动浏览器上测试过。不过试试看。

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'GET',
            url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                    $('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
                });
            }
        });
    });
</script>

请注意，唯一的变化是 $(function() { }); 包装。

编辑：在 OSX 上测试。

仅供参考，我在 OSX 上的 iPhone 5s 上测试了您的页面，并且肯定存在跨站点来源问题。

实际错误是

XMLHttpRequest cannot load http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 Origin. xxxx is not allowed by Access-Control-Allow-Origin.

现在这是来自 iPhone 使用 Safari 网络检查器的错误。此外，当此文件未托管在网络服务器上并作为简单的 HTML 文件运行时，请求可以正常工作。只要您将文件托管在网络服务器中，您就会遇到 CORS 问题。

要解决此问题，您需要联系网站管理员并允许跨站点来源，并切换到其他检索问题的方法。还有其他方法可以尝试解决 CORS 问题。

对不起，如果这不是那么有用。

最终编辑：实际问题。

好吧，据我所知，问题是您的脚本中完全编码的网址 http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1。由于您在同一主机上的同一网络服务器上，我建议使用相对 url 作为

/BayAreaTech/wp-rss2.php?cat=1

原因是如果您在没有 www 的情况下浏览。在您的浏览器（或设备）中，脚本认为它正在调用另一个服务，因为 URL 完成匹配。但是，当您在同一台服务器上托管服务时，您可以消除http://www。部分，这应该可以正常工作。

要对此进行测试，请打开您的桌面浏览器。

http://www.e-grid.net/mobile/index.html

当你这样做时，一切都会很好。现在试试。（注意没有万维网）。这不起作用，因为您现在正在执行跨域（因为您已在 url 中硬编码 www 部分。

http://e-grid.net/mobile/index.html

试一试，告诉我进展如何。

试试下面的脚本块。

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'GET',
            url: '/BayAreaTech/wp-rss2.php?cat=1',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                    $('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
                });
            }
        });
    });
</script>

【讨论】：

我现在就试一试，让你知道！编辑：尝试过，没有运气。结果还是一样。页眉和页脚正在显示，只是没有内容。感谢您的评论，我很感激！
感谢您的洞察力。我将文件加载在与我试图从中提取信息的站点相同的服务器上。再说一次，虽然我可能忽略了一些东西。如果站长允许站点跨站访问，问题还会存在吗？还是我需要尝试解决方法？
另外，我知道网站管理员没有添加跨域访问的经验。他需要直接添加到站点的权限代码吗？
好的.. 你能把 URL 贴到页面上，我可以使用 IOS 设备在 Mac 上检查它。干杯
用实际修复更新了我的回复。请更新，我可以再次测试。