Ajax功能不适用于移动浏览器

Question

Hello and thanks for looking this over. 您好，感谢您的光临。 Very new to jQuery/ajax etc. This website has FTP access to appropriate server, so I (as far as I know) am not violating cross-domain policy. 对jQuery / ajax等很新。这个网站有FTP访问适当的服务器，所以我（据我所知）并没有违反跨域策略。 This is website works fine on any desktop browser but does not work on any mobile browser. 这个网站在任何桌面浏览器上都可以正常工作，但不适用于任何移动浏览器。 I feel like the issue is obviously but I don't know what to do. 我觉得这个问题很明显，但我不知道该怎么做。 Can someone help me with This? 有人可以帮我弄这个吗？

<!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>

Answer 1

Just a thought, have you tried wrapping your ajax call in a load event. 只是想一想，你是否尝试在加载事件中包装你的ajax调用。 I havent tested this on a mobile browser. 我没有在移动浏览器上测试过这个。 However try. 不过试试。

<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>

Note the only changes was the $(function() { }); 注意唯一的变化是$(function() { }); wrapping. 包装。

EDIT: Tested on OSX. 编辑：在OSX上测试。

Just a quick FYI I tested your page on an IPhone 5s on OSX and there are definitly Cross site origin problems. 只是一个快速的FYI我在OSX上的iPhone 5s上测试了你的页面，并且肯定有跨站点原点问题。

The actual error is 实际的错误是

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

Now this is the error that is coming from the IPhone using the Safari web inspector. 现在，这是使用Safari Web检查器从iPhone发出的错误。 Additionally when this file was not hosted on a webserver and run as a simple HTML file the request works fine. 此外，当此文件未托管在Web服务器上并作为简单的HTML文件运行时，请求正常。 Its as soon as you host the file in a webserver you will get the CORS issue. 只要您在网络服务器中托管文件，就会遇到CORS问题。

To resolve this you will need to contact the webmaster and allow cross site origin, switch to a different method of retrieving the issue. 要解决此问题，您需要联系网站管理员并允许跨站点来源，切换到另一种检索问题的方法。 There are other methods to try and get around CORS issues. 还有其他方法可以尝试解决CORS问题。

Sorry if this is not that helpful. 对不起，如果这没有用。

FINAL EDIT: The actual problem. 最终编辑：实际问题。

Ok from what I can tell the problem is the fully coded url http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 in your script. 好吧我可以告诉你的问题是你的脚本中完全编码的URL http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 。 As you are on the same webserver on the same host i would suggest using a relative url as 由于您在同一主机上的同一个Web服务器上，我建议使用相对URL作为

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

The reason for this is if you are browsing without the www. 原因是如果您在没有www的情况下浏览。 in your browser (or device) then the script thinks it is calling another service as the URLs done match. 在您的浏览器（或设备）中，当脚本完成匹配时，脚本认为它正在调用另一个服务。 However as you are hosting the service on the same server you can eliminate the http://www . 但是，当您在同一服务器上托管服务时，您可以删除http://www 。 part and this should work fine. 部分，这应该工作正常。

To test this open your desktop browser to. 要测试这个，请打开桌面浏览器。

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

When you do this all works well. 当你这样做时一切正常。 Now try. 现在试试。 (note without the WWW). （注意没有WWW）。 This does not work as you are now executing cross domain (as you have hard coded the www portion. portion in the url. 这不起作用，因为您现在正在执行跨域（因为您已经对网址中的www部分进行了硬编码。

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

Give this a try and let me know how it goes. 尝试一下，让我知道它是怎么回事。

Try the following script block. 请尝试以下脚本块。

<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>

Ajax功能不适用于移动浏览器

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-11-12 23:48:31

Ajax功能不适用于移动浏览器

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-11-12 23:48:31

解决方案1
2 已采纳 2013-11-12 23:48:31