Jinu in Javascript, JSON
Javascript- Send HTTP Get/Post Request and Read JSON response
In this video video I have shown how you can send Http Get Request and Post Request.
Here I have used 2 websites which can send Get and Post requests which give JSON response.
1. ipinfodb.com -> We can send Get Request with IP address, It will give JSON response with details of IP address
2. httpbin.org
1. Below code shows example HTTP GET request on page load.
HttpReqOnLoad.html
<!DOCTYPE html>
<html>
<head>
<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=9d64fcfdfacc213c7ddf4ef911dfe97b55e4696be3532bf8302876c09sadaad06b&format=json&ip=40.77.167.44';
var client = new HttpClient();
client.get(theurl, function(response) {
var response1 = JSON.parse(response);
// alert(response);
document.getElementById("statusCode").innerHTML = response1.name + ", " + response1.statusCode;
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>
</head>
<body>
<center>
Javascript Get Request Test
<center>
<table border="1">
<tr><td>statusCode :</td><td id="statusCode"></td></tr>
<tr><td>statusMessage :</td><td id="statusMessage"></td></tr>
<tr><td>ipAddress :</td><td id="ipAddress"></td></tr>
<tr><td>countryCode :</td><td id="countryCode"></td></tr>
<tr><td>countryName :</td><td id="countryName"></td></tr>
<tr><td>regionName :</td><td id="regionName"></td></tr>
<tr><td>cityName :</td><td id="cityName"></td></tr>
<tr><td>zipCode :</td><td id="zipCode"></td></tr>
<tr><td>latitude :</td><td id="latitude"></td></tr>
<tr><td>longitude :</td><td id="longitude"></td></tr>
<tr><td>timeZone :</td><td id="timeZone"></td></tr>
</table>
</body>
</html>
Output of Above code.
2.Below code shows example HTTP GET request. The IP Address is taken from the form and the GET REQUEST url is created dynamically.
HttpReqFromForm.html
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
document.getElementById("Save").onclick = function fun() {
var x = document.forms["myForm"]["ip_address"].value;
var Url = "http://api.ipinfodb.com/v3/ip-city/?key=9d64fcfdfacc213c7ddf4ef911okjjhh97b55e4696be3532bf8302hhhhc09ebad06b&format=json&ip=" +x;
var xhr = new XMLHttpRequest();
xhr.open('GET', Url, true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
// alert(xhr.responseText);
var response1 = JSON.parse(xhr.responseText);
document.getElementById("statusCode").innerHTML = response1.name + ", " + response1.statusCode;
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;
document.getElementById("longitude").innerHTML = response1.longitude;
document.getElementById("timeZone").innerHTML = response1.timeZone;
}
}
}
}
</script>
</head>
<body>
<center>
Javascript Get Request Test From Form
<br> <br>
<form name="myForm">
<input type="text" name="ip_address"/>
<input type="button" id="Save" onclick="f1()" value="test"/>
</form>
<center>
<br> <br>
<table border="1">
<tr><td>statusCode :</td><td id="statusCode"></td></tr>
<tr><td>statusMessage :</td><td id="statusMessage"></td></tr>
<tr><td>ipAddress :</td><td id="ipAddress"></td></tr>
<tr><td>countryCode :</td><td id="countryCode"></td></tr>
<tr><td>countryName :</td><td id="countryName"></td></tr>
<tr><td>regionName :</td><td id="regionName"></td></tr>
<tr><td>cityName :</td><td id="cityName"></td></tr>
<tr><td>zipCode :</td><td id="zipCode"></td></tr>
<tr><td>latitude :</td><td id="latitude"></td></tr>
<tr><td>longitude :</td><td id="longitude"></td></tr>
<tr><td>timeZone :</td><td id="timeZone"></td></tr>
</table>
</body>
</html>
Out put of the above code.
3. HTTP Post request onload page. The below example will send Post Request and Read JSON Response.
HttpPostOnload.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var Url = "https://httpbin.org/post";
var xhr = new XMLHttpRequest();
xhr.open('POST', Url, true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response1 = JSON.parse(xhr.responseText);
document.getElementById("origin").innerHTML = response1.origin;
document.getElementById("url").innerHTML = response1.url;
}
}
</script>
</head>
<body>
<center>
Javascript Post Request Test
<br><br>
<table border="1">
<tr><td>origin :</td><td id="origin"></td></tr>
<tr><td>url :</td><td id="url"> </td></tr>
</table>
</center>
</body>
</html>
Output of above code
4. HTTP Post request from form. The below example will send Post request from data from the form and Read JSON Response.
HttpPostFromForm.html
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
document.getElementById("Save").onclick = function fun() {
var x = document.forms["myForm"]["ip_address"].value;
var Url = "https://httpbin.org/post";
var xhr = new XMLHttpRequest();
xhr.open('POST', Url, true);
xhr.send(x);
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
// alert(xhr.responseText.headers.Host);
var response1 = JSON.parse(xhr.responseText);
document.getElementById("origin").innerHTML = response1.origin;
document.getElementById("url").innerHTML = response1.url;
document.getElementById("data").innerHTML = response1.data;
}
}
}
}
</script>
</head>
<body>
<center>
Javascript Post Request Test
<br><br>
<form name="myForm">
<input type="text" name="ip_address"/>
<input type="button" id="Save" onclick="f1()" value="test"/>
</form>
<br><br>
<table border="1">
<tr><td>data :</td><td id="data"></td></tr>
<tr><td>origin :</td><td id="origin"></td></tr>
<tr><td>url :</td><td id="url"></td></tr>
</table>
</center>
</body>
</html>
Out put of above code
See all the above examples here.
1. HttpReqFromForm.html
2. HttpReqOnLoad.html
3. HttpPostFromForm.html
4. HttpPostOnload.html
0 Comments
Comments
Leave a Comment