javascript Ajax 功能将无法在移动浏览器上运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19942292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ajax function will not work on mobile browser
提问by Bacon2305
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. 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?
您好，感谢您查看此内容。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>
采纳答案by Nico
Just a thought, have you tried wrapping your ajax call in a load event. I havent tested this on a mobile browser. However try.
只是想一想，您是否尝试过将 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>
Note the only changes was the $(function() { });wrapping.
请注意，唯一的变化是$(function() { });包装。
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.
仅供参考，我在 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. Additionally when this file was not hosted on a webserver and run as a simple HTML file the request works fine. Its as soon as you host the file in a webserver you will get the CORS issue.
现在这是来自使用 Safari Web 检查器的 iPhone 的错误。此外，当此文件未托管在网络服务器上并作为简单的 HTML 文件运行时，请求工作正常。一旦您将文件托管在网络服务器中，您就会遇到 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=1in your script. As you are on the same webserver on the same host i would suggest using a relative url as
好吧，据我所知，问题是脚本中完全编码的 url http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1。由于您在同一主机上的同一网络服务器上，我建议使用相对 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. 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. part and this should work fine.
原因是如果您在没有 www 的情况下浏览。在您的浏览器（或设备）中，脚本认为它正在调用另一个服务，因为 URL 已完成匹配。但是，当您在同一台服务器上托管服务时，您可以消除http://www. 部分，这应该可以正常工作。
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). This does not work as you are now executing cross domain (as you have hard coded the www portion. portion in the url.
当你这样做时，一切都很好。现在试试。（注意没有 WWW）。这不起作用，因为您现在正在执行跨域（因为您已对 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>
