How to send and request HTTP method in JavaScript?

Question

I am trying to access some information based on IP Address and wish to display it in my web page using JavaScript. I am getting my data based on IP address but when I try to do it with JavaScript, I am not getting any error same time no output.

Below I am posting my code. Please give me some valuable information about this and also try to correct my code.

<!DOCTYPE html>
<html>
<head>
    <title>JS Get Request</title>
</head>
<body>
<center>JavaScript Get Request Test</center>

statusCode : <p id="statusCode"></p><br/>
stausMessage : <p id="statusMessage"></p><br/>
ipAddress : <p id="ipAddress"></p><br/>
countryCode : <p id="countryCode"></p><br/>
countryName : <p id="countryName"></p><br/>
regionName : <p id="regionName"></p><br/>
cityName : <p id="cityName"></p><br/>
zipCode : <p id="zipCode"></p><br/>
latitude : <p id="latitude"></p><br/>

<script type="text/javascript">
    var HttpClient = function(){
        this.get = function(aUrl, aCallback){
            var anHttpRequest = new XMLHttpRequest();
            anHttpRequest.onreadystatechange = function() {
                if(anHttpRequest.readyState == 4 && anHttpRequest.status ==200)
                    aCallback(anHttpRequest.responseText);
            }

            anHttpRequest.open("GET", aUrl, true);
            anHttpRequest.send(null);
        }
    }
    var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
    var client = new HttpClient();
    client.get(theurl, function(resonse){
        var response1 = JSON.parse(response);
        //alert(response);
        });

    document.getElementById("statusCode").innerHTML = response1.statusCode;
    document.getElementById("statusMessage").innerHTML = response1.statusMessage;
    document.getElementById("ipAddress").innerHTML = response1.ipAddress;
    document.getElementById("countryCode").innerHTML = response1.countryCode;
    document.getElementById("countryName").innerHTML = response1.countryName;
    document.getElementById("regionName").innerHTML = response1.regionName;
    document.getElementById("cityName").innerHTML = response1.cityName;
    document.getElementById("zipCode").innerHTML = response1.zipCode;
    document.getElementById("latitude").innerHTML = response1.latitude;

</script>
</body>
</html>

Move all lines of `document.getElementById(**).innerHTML = response1.**` just below `var response1 = JSON.parse(response)` — , May 31 '18 at 11:52
you have also typo in `client.get...` line, it should be `response` instead of `resonse` in function params. — Max Sinev, May 31 '18 at 11:53
You are trying to access asynchronous data synchronously, you can understand it clearly from here https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 — AvcS, May 31 '18 at 11:56
Note that `` is obsolete and `
` does not use a closing slash and never has. — Rob, May 31 '18 at 12:02
Is api.ipinfodb.com the same domain from which you are sending the request? If not you will get cross domain request error. Domain api.ipinfodb.com will have to set required headers to allow you to make request to them. — D555, May 31 '18 at 12:05

Mgasmi · Answer 1 · 2018-05-31T12:08:43.973

Here an example jsFiddle that works : https://jsfiddle.net/nsqpv5rr/ click run to get data
you have 2 errors:
1- typo response <=> reponse,
2- move all document.getElementById.... inside client.get(theurl, function(response){...} this should work :

<!DOCTYPE html>
<html>
<head>
    <title>JS Get Request</title>
</head>
<body>
<center>JavaScript Get Request Test</center>
<button  onClick="test()">run</button><br>

statusCode : <p id="statusCode"></p><br/>
stausMessage : <p id="statusMessage"></p><br/>
ipAddress : <p id="ipAddress"></p><br/>
countryCode : <p id="countryCode"></p><br/>
countryName : <p id="countryName"></p><br/>
regionName : <p id="regionName"></p><br/>
cityName : <p id="cityName"></p><br/>
zipCode : <p id="zipCode"></p><br/>
latitude : <p id="latitude"></p><br/>

<script type="text/javascript">
    var HttpClient = function(){
        this.get = function(aUrl, aCallback){
            var anHttpRequest = new XMLHttpRequest();
            anHttpRequest.onreadystatechange = function() {
                if(anHttpRequest.readyState == 4 && anHttpRequest.status ==200)
                    aCallback(anHttpRequest.responseText);
            }

            anHttpRequest.open("GET", aUrl, true);
            anHttpRequest.send(null);
        }
    }
    var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
    function test(){ 
    var client = new HttpClient();
    client.get(theurl, function(response){
        var response1 = JSON.parse(response);
         document.getElementById("statusCode").innerHTML = response1.statusCode;
    document.getElementById("statusMessage").innerHTML = response1.statusMessage;
    document.getElementById("ipAddress").innerHTML = response1.ipAddress;
    document.getElementById("countryCode").innerHTML = response1.countryCode;
    document.getElementById("countryName").innerHTML = response1.countryName;
    document.getElementById("regionName").innerHTML = response1.regionName;
    document.getElementById("cityName").innerHTML = response1.cityName;
    document.getElementById("zipCode").innerHTML = response1.zipCode;
    document.getElementById("latitude").innerHTML = response1.latitude;
        });


}
</script>
</body>
</html>

Didix · Answer 2 · 2018-05-31T12:16:52.377

As @Arvind comment stated you need to put your var response1 and all of your document.getElementById("Foo").innerHTML = response1.Foo; at the same place.

At line 10 you have a stausMessage : instead of statusMessage

At line 33 you have a typo error should be :client.get(theurl, function(response){

<center> is obsolete use CSS instead and <br> doesn't need a closing slash.

Here's the full code.

<!DOCTYPE html>
<html>

<head>
  <title>JS Get Request</title>
</head>

<body>
  <p style="text-align:center;">JavaScript Get Request Test</p>

  statusCode : <p id="statusCode"></p><br>
  statusMessage : <p id="statusMessage"></p><br>
  ipAddress : <p id="ipAddress"></p><br>
  countryCode : <p id="countryCode"></p><br>
  countryName : <p id="countryName"></p><br>
  regionName : <p id="regionName"></p><br>
  cityName : <p id="cityName"></p><br>
  zipCode : <p id="zipCode"></p><br>
  latitude : <p id="latitude"></p><br>

  <script type="text/javascript">
    var HttpClient = function() {
      this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() {
          if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
            aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open("GET", aUrl, true);
        anHttpRequest.send(null);
      }
    }
    var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
    var client = new HttpClient();
    client.get(theurl, function(response) {
      var response1 = JSON.parse(response);
      //alert(response);
      document.getElementById("statusCode").innerHTML = response1.statusCode;
      document.getElementById("statusMessage").innerHTML = response1.statusMessage;
      document.getElementById("ipAddress").innerHTML = response1.ipAddress;
      document.getElementById("countryCode").innerHTML = response1.countryCode;
      document.getElementById("countryName").innerHTML = response1.countryName;
      document.getElementById("regionName").innerHTML = response1.regionName;
      document.getElementById("cityName").innerHTML = response1.cityName;
      document.getElementById("zipCode").innerHTML = response1.zipCode;
      document.getElementById("latitude").innerHTML = response1.latitude;
    });
  </script>
</body>

</html>

Priyal Pithadiya · Accepted Answer · 2018-05-31T12:16:10.807

@Akshay, try with the below solution, you can make a call via ajax request and simply set crossDomain: true with your ajax call

<!DOCTYPE html>
<html>
<head>
    <title>JS Get Request</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<center>JavaScript Get Request Test</center>
statusCode : <p id="statusCode"></p><br/>
stausMessage : <p id="statusMessage"></p><br/>
ipAddress : <p id="ipAddress"></p><br/>
countryCode : <p id="countryCode"></p><br/>
countryName : <p id="countryName"></p><br/>
regionName : <p id="regionName"></p><br/>
cityName : <p id="cityName"></p><br/>
zipCode : <p id="zipCode"></p><br/>
latitude : <p id="latitude"></p><br/>
<script type="text/javascript">
    function callback(response1) {
        document.getElementById("statusCode").innerHTML = response1.statusCode;
        document.getElementById("statusMessage").innerHTML = response1.statusMessage;
        document.getElementById("ipAddress").innerHTML = response1.ipAddress;
        document.getElementById("countryCode").innerHTML = response1.countryCode;
        document.getElementById("countryName").innerHTML = response1.countryName;
        document.getElementById("regionName").innerHTML = response1.regionName;
        document.getElementById("cityName").innerHTML = response1.cityName;
        document.getElementById("zipCode").innerHTML = response1.zipCode;
        document.getElementById("latitude").innerHTML = response1.latitude;
    }
    var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
    $.ajax({
        type: "POST",
        url: theurl,
        crossDomain: true,
        success: function (data) {
        callback(data);
            // do something with server response data
        },
        error: function (err) {
            // handle your error logic here
        }
    });

</script>
</body>
</html>

How to send and request HTTP method in JavaScript?

3 Answers3