javascript代码在浏览器中不起作用？答案

【问题标题】：javascript code is not working in browser?javascript代码在浏览器中不起作用？
【发布时间】：2013-12-04 05:25:07
【问题描述】：

这是我的代码，它将发送获取请求并在 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 请求。请推荐

【问题讨论】：

是的，这不是一种非常现代的 AJAX 调用方式。你会用jQuery吗？
相关问题，stackoverflow.com/questions/19821753/…
为什么不在浏览器中调试 javascript。有许多插件可用于调试。像 firefox 和 Chrome 中的 Firebug 一样有内置的调试器。

标签： javascript html json http

【解决方案1】：

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

事实上，如果我尝试run your code ^[jsFiddle]，我会收到以下错误：

XMLHttpRequest 无法加载 http://api.openweathermap.org/data/2.5/find?q=chennai&units=metric&mode=json。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://fiddle.jshell.net' 因此不允许访问。

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

使用 JSONP，您无需对服务器进行 Ajax 调用，而是将 URL 与动态创建的脚本元素一起使用。脚本元素不受同源策略限制，因此可以从其他服务器加载数据（代码）。

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

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

通过将参数callback=foo 添加到 URL，服务器返回

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

如果你用谷歌搜索 JSONP，你会发现 more information ^[Wikipedia] 和教程。

【讨论】：

【解决方案2】：

我认为你的 xmlhttprequest 实例没有被创建。有一段时间依赖浏览器试试这个..

     var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 { your code  }

【讨论】：

虽然这通常会有所帮助，但这不是问题所在。

【解决方案3】：

除了需要一个跨浏览器的 xmlhttpquest（我会单独使用 jQuery）之外，您还需要等待文档准备好，然后才能通过 id 访问城市……也就是说，将您的脚本块移到您的城市定义（我认为您可能需要一个表单，具体取决于浏览器）。也许是这样的

<body>
  <form>
    <input type="text" id="city" />
    <input type="button" value="submit" onclick="httpGet()" />
  </form>
  <script type="text/javascript">
    function httpGet() {
        if (typeof (document.getElementById("city")) == 'undefined') {
          alert("Maybe console.log our alarm... but the sky appears to be falling.");
        }
        var xmlHttp = null;
        if (window.XMLHttpRequest)
        { // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            var obj1 = JSON.parse(xmlHttp.responseText.toString());
            document.getElementById("placeholder").innerHTML = obj1.message
                + " " + obj1.list[0].name;
          }
        }
        var x = document.getElementById("city").value;
        var url = "http://api.openweathermap.org/data/2.5/find?q=chennai&units=metric&mode=json";
        xmlHttp.open("GET", url, false);
        xmlHttp.send();
      }
  </script>
  <div id="placeholder"></div>
</body>

【讨论】：

嗯，代码在点击按钮时执行，此时ID为#city的元素已经存在。关于 DOM 访问，代码非常好。
经过仔细检查，我发现您是正确的，但这仍然是个好建议。
我尝试将脚本块移动到城市定义之后..但仍然没有成功
为简单起见，我删除了城市输入标签并在脚本代码中获取城市元素。所以现在我将他只有提交按钮。我仍然无法从浏览器获得响应。

【解决方案4】：

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.onreadystatechange = function(){
         var obj1 = JSON.parse(xmlHttp.responseText.toString());
         document.getElementById("placeholder").innerHTML = obj1.message
                    + " " + obj1.list[0].name;
    }
    xmlHttp.send();
 }

【讨论】：

你看不到吗？我添加了等待 ajax 完成的事件监听器。
不，我浏览代码时没有看到。总是解释你的解决方案，不要只是发布代码。虽然您的代码不正确，但事件处理程序不是必需的。此代码执行同步请求 (xmlHttp.open("GET", url, false);)，这就是为什么可以像在原始代码中那样访问响应的原因。或者换一种说法：您的更改不会改变代码的行为，因此无法解决问题。