Oto mój kod, który wyśle zapytanie i sprawia, że niektóre treści odpowiedzi w 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>

Ten kod działa idealnie po uruchomieniu w przeglądarce Eclipse. Ale jego brak w przeglądarce. Sprawdziłem konfigurację przeglądarki do włączania skryptu i jego włączony. a także bez problemu z konfiguracją przeglądarki.

Im nowe do JavaScript HTTP żądania. Proszę zasugeruj

1
dileepvarma 4 grudzień 2013, 09:25

4 odpowiedzi

Najlepsza odpowiedź

Przeczytałem gdzieś, że przeglądarka Eclipse nie przestrzega do zasady podstawowej < EM> [Wikipedia] . Dlatego możliwe jest złożenie żądania AJAX do zewnętrznego adresu URL, coś, co nie jest możliwe Domyślnie w "normalnej" przeglądarce.

I rzeczywiście, jeśli spróbuję Uruchom kod [JSFIDDLE] , otrzymuję następujący błąd:

XmlhttpRequest nie może załadować http://api.openweathermap.org/data/2.5/find?q=chennai&units=metric&mode=json. Nagłówek "Access-Control-Delfit-Origin" jest obecny na żądanym zasobie. Pochodzenie 'http://fiddle.jshell.net' nie jest zatem dozwolonym dostępem.

Wiele sposobów pracy wokół tej polityki pochodzenia [SO] . W twoim przypadku wydaje się, że usługa obsługuje JSONP [SO] .

Z JSONP, nie robiąc wezwanie AJAX na serwer, ale zamiast tego używasz adresu URL z dynamicznie utworzonym elementem skryptu. Elementy skryptów nie są ograniczone przez politykę tego samego pochodzenia i dlatego mogą ładować dane (kod) z innych serwerów.

Serwer zwróci plik JavaScript, który zawiera pojedyncze połączenie funkcyjne. Nazwa funkcji jest określona przez użytkownika za pomocą parametru zapytania. Więc jeśli odpowiedź JSON jest zazwyczaj:

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

Dodając argument callback=foo do URL, zwraca serwer

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

(Śledź Ten adres URL , aby zobaczyć przykład swojej usługi)

Ta odpowiedź może być oceniana jako javascript. Uwaga , że możesz , a nie obrócić każdą odpowiedź JSON na JSONP. JSONP musi być obsługiwany przez serwer.

Oto pełny przykład:

// 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);
}

PRÓBNY

Jeśli Google dla JSONP, znajdziesz Więcej informacji [Wikipedia] i samouczki.

1
Community 23 maj 2017, 10:25

Myślę, że twoja instancja XMLHTTPREQUEST nie jest tworzona. Jest to pewna od przeglądarki, spróbuj tego ..

     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  }
1
Sachin9 4 grudzień 2013, 05:40

Oprócz potrzebnego przeglądarki XMLHTTPQUQUEST (która dla tego samego użyłbym jQuery), musisz także poczekać, aż dokument będzie gotowy przed uzyskaniem dostępu do miasta przez ID ... to jest, przesuń blok skryptu po definicji miasta ( I myślę, że możesz potrzebować formularza, w zależności od przeglądarki). Być może coś takiego

<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>
1
Elliott Frisch 4 grudzień 2013, 05:52
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();
 }
-1
danny.hu 4 grudzień 2013, 05:38