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

Question

这是我的代码，它将发送get请求并以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请求的新手。 请建议

Answer 1

我认为您的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  }

Answer 2

除了需要跨浏览器xmlhttpquest（仅使用jQuery我就需要使用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>

Answer 3

我在某处看到Eclipse浏览器不遵循相同的原始策略 ^[Wikipedia] 。 这就是为什么可以向外部URL发出Ajax请求的原因，而这在“正常”浏览器中默认是不可能的。

实际上，如果我尝试运行您的代码^[jsFiddle] ， ^则会收到以下错误：

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

解决同源策略^[SO]的方法有多种。 在您的情况下，该服务似乎支持JSONP ^[SO] 。

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

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

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

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

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

（按照此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，则会发现更多信息^[Wikipedia]和教程。

Answer 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();
 }

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

问题描述

4 个解决方案

解决方案1
1 2013-12-04 05:31:18

解决方案2
1 2013-12-04 05:33:11

解决方案3
1 已采纳 2013-12-04 05:57:11

解决方案4
-1 2013-12-04 05:38:30

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

问题描述

4 个解决方案

解决方案1 1 2013-12-04 05:31:18

解决方案2 1 2013-12-04 05:33:11

解决方案3 1 已采纳 2013-12-04 05:57:11

解决方案4 -1 2013-12-04 05:38:30

解决方案1
1 2013-12-04 05:31:18

解决方案2
1 2013-12-04 05:33:11

解决方案3
1 已采纳 2013-12-04 05:57:11

解决方案4
-1 2013-12-04 05:38:30