JS中的变量无法被调用

我的JS代码如下：

<html>
<head>
<title>shuju</title>
<script>
//let DataList=[];
var ajax = new XMLHttpRequest()
ajax.open('GET','http://127.0.0.1:5000',true) //建立一个通信方法是get，请求地址，异步请求
ajax.send()
ajax.onreadystatechange=()=>{
        if(ajax.readyState === 4 && ajax.status === 200){
                datalists=ajax.response
        }  
}
</script>
</head>
<body>
<script type="text/javascript"> 
        console.log(datalists) 
</script>
</body>
</html>

我想调用的变量是【datalists】。运行之后的报错是：

img


我的理解是它没有找到我定义的这个变量。而且因为我要把这个变量拿来画图，所以我需要在body标签处引用。请问该怎么做呢？


<html>
<head>
<title>shuju</title>
<script>
    let datalists = ''
//let DataList=[];
var ajax = new XMLHttpRequest()
ajax.open('GET','http://127.0.0.1:5000',true) //建立一个通信方法是get，请求地址，异步请求
ajax.send()
ajax.onreadystatechange=()=>{
        if(ajax.readyState === 4 && ajax.status === 200){
                datalists=ajax.response
        }  
}
</script>
</head>
<body>
<script type="text/javascript"> 
        console.log(datalists) 
</script>
</body>
</html>

网络请求是异步的，要在请求的回调函数里面去处理请求结果