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>
3 answers
solution1
0 2018-05-31 12:01:08
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>
solution2
0 2018-05-31 12:01:32
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>
solution3
0 ACCPTED 2018-05-31 12:01:40
@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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to send data in javascript http Get request
how to send a http request in the background in javascript？
Send a HTTP Request w/ JavaScript
Send JavaScript in an HTTP post request
Send HTTP request using JavaScript?
How to send an http request with parameters to rails from javascript
How can we send a HTTP POST request by using JavaScript?
Javascript - How would I send a http request without it being redirected?
How to send parameters with http request
Send cookie in HTTP POST Request in javascript
Related Tags