Question

您好，这是我的第一个问题。我是JS的新手，我需要一种纯粹的JS方式来获取Web访问者的IP地址并将其显示给他。我怎么能用GET做到这一点，有谁知道为什么我的代码不起作用？

获取信息

function goHome () {
    var xhr = XMLHttpRequest();
    xhr.open("GET", "http://ip-api.com/json", false);
    xhr.send();
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        alert(response.query);
    }
}

Answer 1

var xhr = XMLHttpRequest();

XMLHttpRequest是一个构造函数，您必须使用new运算符调用它。

var xhr = XMLHttpRequest();

Answer 2

此解决方案不使用 GET 方法，而是使用 fetch one - 纯 js 中的解决方案。我希望它有帮助！干杯！

<!DOCTYPE html>
<html>

<head>
    <title>Get user's IP</title>
    <style>
    body{
      background-color: black;
    }
        p, h1 {
            color: white;
      font-family: courier;
        }
    </style>
    <script>
  function json(url) {
      return fetch(url).then(res => res.json());
    }

    json(`https://api.ipify.org?format=json`).then(data => {
      console.log(data.ip);
      document.getElementById('userip').innerHTML = data.ip;
    });

    </script>

</head>

<body>


        <p style="text-align:center;font-size: 3em" id="userip"></p>

</body>

</html>

<块引用>

编辑

如果你也使用这个 api: http://ip-api.com/json 但你有更改 data.ip => data.query - 在 stackoverflow 上请求得到被屏蔽了，所以我使用了 ipify.org api。

Answer 3

这是一个具有异步响应的函数。最简单的实现方法是使用回调：

function goHome(cb){
    var xhr = new XMLHttpRequest();

    var fnError = function(type){
        return function(){
            console.error('error', type, 'has ocurred');
            cb({error: type});
        }; 
    };
    var fnOK = function(evt){

        if (evt.currentTarget && evt.currentTarget.readyState === 4 && evt.currentTarget.status === 200) {
            try{
                var response = JSON.parse(evt.currentTarget.responseText);
                cb(null, response.query)
            }catch(err){
                fnError('parsing xhr failed')();
            }
        } else {
            fnError('xhr failed')();
        }
    }


    xhr.open("GET", 'http://ip-api.com/json', true);

    xhr.addEventListener('error', fnError('error') );
    xhr.addEventListener('abort', fnError('abort') );
    xhr.addEventListener('load', fnOK);
    xhr.send();
}

基本用法：

goHome(function(err, ip){
    if (err){
        console.error(err);
    } else {
        //do stuff
        console.log(JSON.stringify(ip));
    }
});

如何使用GET方法在Pure JS中获取用户的IP地址？

3 个答案: