gpt4 book ai didi

javascript 代码在浏览器中不起作用?

转载 作者:可可西里 更新时间:2023-11-01 17:10:29 26 4
gpt4 key购买 nike

这是我的代码,它将发送获取请求并以 html 格式呈现响应的一些内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mytitle</title>
</head>
<body>

<script type="text/javascript">
function httpGet() {
var xmlHttp = null;
var x = document.getElementById("city").value;
var url = "http://api.openweathermap.org/data/2.5/find?q=chennai&units=metric&mode=json";
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, false);
xmlHttp.send();
var obj1 = JSON.parse(xmlHttp.responseText.toString());
document.getElementById("placeholder").innerHTML = obj1.message
+ " " + obj1.list[0].name;

}
</script>
<input type="text" id="city" />
<input type="button" value="submit" onclick="httpGet()" />
<div id="placeholder"></div>
</body>
</html>

当我在 Eclipse 浏览器中运行时,这段代码运行良好。但它在浏览器中失败。我已经检查了浏览器配置以启用脚本并启用它。浏览器配置也没有问题。

我是 javascript http 请求的新手。请建议

最佳答案

我在某处读到 Eclipse 浏览器不遵守 same origin policy [Wikipedia] .这就是为什么可以向外部 URL 发出 Ajax 请求,这在“普通”浏览器中默认是不可能的。

事实上,如果我尝试 run your code [jsFiddle] ,我收到以下错误:

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/find?q=chennai&units=metric&mode=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

multiple ways to work around the same-origin policy [SO] .在您的情况下,该服务似乎支持 JSONP [SO] .

使用 JSONP,您不会对服务器进行 Ajax 调用,而是使用带有动态创建的脚本元素的 URL。脚本元素不受同源策略的限制,因此可以从其他服务器加载数据(代码)。

服务器将返回一个包含单个函数调用的 JavaScript 文件。函数的名称由您通过查询参数指定。所以,如果 JSON 响应通常是:

{"message":"accurate","cod":"200", ...}

通过向 URL 添加参数 callback=foo,服务器返回

foo({"message":"accurate","cod":"200", ...});

(关注 this URL 查看您的服务示例)

此响应可以作为 JavaScript 进行评估。 请注意,您不能将每个 JSON 响应转换为 JSONP。服务器必须支持 JSONP。

这是一个完整的例子:

// this function must be global since the script is executed in global scope
function processResponse(obj1) {
document.getElementById("placeholder").innerHTML =
obj1.message + " " + obj1.list[0].name;
}

function httpGet() {
var url = "http://api.openweathermap.org/data/2.5/find?q=chennai&units=metric&mode=json";
// the following line is just to explictly show the `callback` parameter
url += '&callback=processResponse';
// ^^^^^^^^^^^^^^^ name of our function

var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}

DEMO

如果你用 google 搜索 JSONP,你会发现 more information [Wikipedia]和教程。

关于javascript 代码在浏览器中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20367566/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com