Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript program to retrieve clients IP address
Javascript allows us to obtain a client's IP address. We can then further use this information to fetch their geolocation and tailor content according to their preferences.
We can retrieve a client’s IP addresses using different methods, like using a 3rd parties API service such as ipify or ipapi. In javascript, retrieving the IP address of clients can be useful for various applications, such as tracking user locations, personalizing content based on geolocation, or implementing security measures.
Let’s look at some of the examples to understand the concept better −
Example 1
To obtain the client's IP address in this example we will utilise third−party API service (https://www.ipify.org/). We'll send a GET call to the "ipify" API using the $.getJSON() function to get the IP address information. IP address is taken from data object after the data is received and presented in the paragraph element
Filename - index.html
<html>
<head>
<title>JavaScript program to retrieve clients IP address using ipify</title>
</head>
<body>
<h3>Retrieve Client's IP Address</h3>
<p id="ipAddress">Your IP address will appear here.</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON("https://api.ipify.org?format=json", async function(data) {
const res = JSON.stringify(data);
const ip = JSON.parse(res).ip;
$("#ipAddress").text("Your IP address is: " + ip);
});
});
</script>
</body>
</html>
Output
The result will like the image below.
Example 2
In this demonstration the client's IP address will be obtained by sending an AJAX request to the "ipapi" API endpoint (https://ipapi.co/json/) using the jQuery framework. The API offers IP address and geolocation information. We will make a GET request to the "ipapi" API using the $.getJSON() function. Upon receiving the data, the IP address is extracted from the data object and shown in the paragraph element with the id "ipAddress" once the data has been received.
Filename - index.html
<html>
<head>
<title>JavaScript program to retrieve clients IP address using ipapi</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Retrieve Client's IP Address</h3>
<p id="ipAddress">Your IP address will appear here.</p>
<script>
$(document).ready(function() {
$.getJSON("https://ipapi.co/json/", function(data) {
$("#ipAddress").text("Your IP address is: " + data.ip);
});
});
</script>
</body>
</html>
Output
The result will like the image below.
Conclusion
Retrieving the client's IP address in javascript can be useful in various applications, like tracking user locations, implementing geolocation−based features, or enhancing the security of our website. We learned how to retrieve a client’s IP address in javascript and saw some examples explaining the same.
393 Views
