Why i am getting XMLHttprequest status 0?

1

Url is correct but when i make ajax request it fails.

navigator.geolocation.getCurrentPosition(function(position) {
    var url= "api.openweathermap.org/data/2.5/weather?lat="+position.coords.latitude+"&lon="+position.coords.longitude+"&APPID=061f24cf3cde2f60644a8240302983f2";

  console.log(url);
  var requestX = new XMLHttpRequest();
  requestX.open("GET", url, true);
  requestX.send(null);
  console.log("OK");
  requestX.onreadystatechange = function () {
    console.log("OK1");
    if(requestX.readyState===4 && requestX.status===2){
      console.log("OK2");
      console.log(requestX.responseText);
   $scope.parsedObject=JSON.parse(requestX.responseText);

 } else {
   console.log("Its an error ",requestX.readyState," ",requestX.status);
   console.log(requestX.responseText);
 }
  }
  });
2

It’s strange to me that I’m seeing so many questions about the xhr API this week, here and elsewhere. Don’t use it!

3

Add http:// to your url:

var url= "http://api.openweathermap.org/data/2.5/weather?lat=

Also I don’t think there is a status 2, use 200 instead and get rid of your else statement.

EDIT:
as openweathermap uses http your codepen should also be on http (not https).

4

Fetch API is indeed very promising but at the moment according to MDN very poorly supported, especially on mobile browsers. Also I suggest dumping geolocation API as it works only in HTTPS and openweathermap only in HTTP.
And full output is:
Its an error 4 0
pen.js:7 Mixed Content: The page at ‘https://codepen.io/mikeNIN/pen/dORWbp?editors=1010’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://api.openweathermap.org/data/2.5/weather?lat=52.406374&lon=16.9251681&APPID=061f24cf3cde2f60644a8240302983f2’. This request has been blocked; the content must be served over HTTPS.

5

Actually openweathermap is the one that should be dumped.

1 Like
6

this would be perfect solution but unfortunately I found no free https weather API’s

7

https://darksky.net/dev/

8

The polyfill is linked in my post. It’s production ready and should be used to future proof all code, not to mention build the right skills and habits in new developers.

Noooooooooooooooooooooooooooo! :cry:

9

Ah ok, yes I see it now, but at the bottom of linked page is small note, that this polyfill won’t affect modern browsers as they contain native implementations of window.fetch. Also you need to write your own error handler to catch standard HTTP errors. Really it’s better to use jquery ajax.

Please, show me how navigator.geolocation works in HTTP on Chrome 50 and up :wink:

10

This is, indeed, how polyfills work :smiley: It only fills in missing functionality if it’s missing. Using jQuery is certainly an option, but maybe a bit heavyweight for just AJAX. Something like axios is great if you just want a promise based HTTP request library. Since a person needs to write their own error handlers for xhr objects as well, this doesn’t really affect the choice for fetch, but you’re definitely right to choose a more complete library.

It doesn’t, and it shouldn’t. But trying to forego HTTPS is the worst way to handle the incompatibility. Use a different API, like jenovs suggested, or a CORS proxy, like cors-anywhere. By relying on an insecure connection, you cripple your application and force your users to choose between your app and their security :thumbsdown:

11

Sorry, but I really don’t see a point using this polyfill I just wrote xhr function which works, that’s all.

jenovs suggested API which is not free, it’s free up to 1000 calls a day, which give us about 41 calls per h and after that you’re charged. I am also not happy using http but in this case I had to.