本帖最后由 小菜鸟一枚 于 2020-3-4 10:13 编辑
使用原生JavaScript解析某网站返回的JSON串，显示IP等信息
0x1获取JSON串格式
1.使用浏览器访问网站，得到如下的JSON串：
{"status":"success","country":"中国","countryCode":"CN","region":"HB","regionName":"湖北省","city":"xxx","zip":"","lat":xxx465,"lon":114xxx42,"timezone":"Asia/Shanghai","isp":"Chinanet","org":"Chinanet HB","as":"AS4134 Chinanet","query":"xxx"}
0x2使用ajax发送异步请求
1.学了这么些天C++，百度了一下，也没弄明白怎么获取网页内容，那我就还是用原生JavaScript通过ajax发送异步请求，然后使用JSON.parse函数将json串转换为对象。
2.源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小菜鸟一枚</title>
<style ></style>
<script type="text/javascript">
function selfDefined()
{
//发送一个get方式的异步请求
var xmlhttp =new XMLHttpRequest();
xmlhttp.open("GET","http://www.ip-api.com/json/?lang=zh-CN",true);
xmlhttp.send();
//获取服务器响应后返回的JSON数据
xmlhttp.onreadystatechange = function()
{
//每当 readyState 发生变化时就会调用 onreadystatechange 函数。
//当 readyState 为 4，status 为 200 时，响应就绪：
if (this.readyState == 4 && this.status == 200)
{
//responseText 获取字符串形式的响应数据
//responseXML 获取 XML 数据形式的响应数据
var obj = JSON.parse(this.responseText);
document.getElementById("ip").innerHTML =""+'\r'
<!-- 英文版 -->
/* +"<p>"+ "status：" + obj.status +"</p>"+'\r'
+"<p>"+ "country：" + obj.country +"</p>"+'\r'
+"<p>"+ "countryCode：" + obj.countryCode +"</p>"+'\r'
+"<p>"+ "region：" + obj.region +"</p>"+'\r'
+"<p>"+ "regionName：" + obj.regionName +"</p>"+'\r'
+"<p>"+ "city：" + obj.city +"</p>"+'\r'
+"<p>"+ "zip：" + obj.zip +"</p>"+'\r'
+"<p>"+ "lat：" + obj.lat +"</p>"+'\r'
+"<p>"+ "lon：" + obj.lon +"</p>"+'\r'
+"<p>"+ "timezone：" + obj.timezone +"</p>"+'\r'
+"<p>"+ "isp：" + obj.isp +"</p>"+'\r'
+"<p>"+ "org：" + obj.org +"</p>"+'\r'
+"<p>"+ "as：" + obj.as +"</p>"+'\r'
+"<p>"+ "query：" + obj.query +"</p>"+'\r' */
<!-- 汉化版 -->
+"<p>"+ "状态：" + obj.status +"</p>"+'\r'
+"<p>"+ "国家：" + obj.country +"</p>"+'\r'
+"<p>"+ "国家代码：" + obj.countryCode +"</p>"+'\r'
+"<p>"+ "区域缩写：" + obj.region +"</p>"+'\r'
+"<p>"+ "区域名：" + obj.regionName +"</p>"+'\r'
+"<p>"+ "地点：" + obj.city +"</p>"+'\r'
+"<p>"+ "邮编：" + obj.zip +"</p>"+'\r'
+"<p>"+ "纬度（北纬为正数，南纬为负数）：" + obj.lat +"</p>"+'\r'
+"<p>"+ "经度（东经正数，西经为负数）：" + obj.lon +"</p>"+'\r'
+"<p>"+ "时区：" + obj.timezone +"</p>"+'\r'
+"<p>"+ "ISP接入商：" + obj.isp +"</p>"+'\r'
+"<p>"+ "组织：" + obj.org +"</p>"+'\r'
+"<p>"+ "骨干网：" + obj.as +"</p>"+'\r'
+"<p>"+ "本机IP：" + obj.query +"</p>"+'\r'
;
}
else
{
document.getElementById("ip").innerHTML = "请检查网络是否已连接，然后重新打开网页！";
}
}
}
</script>
</head>
<body>
<div>
<p style="text-align: center;">吾爱破解论坛 By 小菜鸟一枚</p>
</div>
<div id="ip">
<!--ip放在这里-->
信息加载中...
</div>
</body>
</html>
3.效果图
0x3总结
1.与c++相比，定义函数的方法都差不多，调用也是使用函数名（）。
2.C++如果能得到这个字符串，应该定义一个结构体，然后以：分割字符串，然后赋值给结构体的各个属性。
3.JavaScript字符串拼接不能像C++一样随意换行，得加‘\r’或者'\n'，c++是以；为结束一个语句，可以随意换行。
参考文献：
百度：js拼接字符串如何换行
《JavaScript参考手册》
《Ajax使用指南》 | 
发表于 2020-3-3 16:24
|
发表于 2020-3-4 10:04
