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），你还需要等待文件准备好才能通过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浏览器不遵守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”标头。因此，不允许原始'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]和教程。

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 个答案: