今天在查看订阅的时候发现一个网站，汇总了至今为止所有被黑客攻击过的网站泄露的帐号，提供查询，试了一下，发现自己的帐号也在Adobe泄密事件的帐号中。另外发现这个网站也提供API，遂比较好奇想尝试下API的用法
首先是HTML页面，负责用户界面的输入和输出，由于功能比较简单，只需要用户输入帐号，只设置了一个输入框，另外预留了两个div，一个显示文字提示，一个显示返回的结果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery-1.10.2.js"></script><!--调用jquery--> <script type="text/javascript" src="do.js"></script><!--调用后台处理js--> <title>无标题文档</title> </head> <body> <input id="inputxt" name="input" type="text" value="foo%40bar.com" size="30" /><!--用户输入--> <!--<button id="button">发送请求</button> --><br /> <div id="textbefore"></div><!--说明文字预留--> <div id="text"></div><!--返回结果预留--> </body> </html> |
其次是后台处理页面，网站API是GET方式提交查询，这里用了jquery的.ajax方法，看了看参数表，还是比较简单的。通过读取用户输入构建查询url，然后根据返回成功或失败调用不同的回调函数。一开始是监听按钮点击，但是后来觉得太麻烦，遂改为监听键盘输入，虽然有些延迟，但是比较有意思，能够实时显示反馈。只是载入页面的时候默认值没法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(document).ready(function(){//监听网页载入完成事件 $(document).keyup(function(){ //监听键盘输入事件 //$("button").click(function(){ $.ajax({ type: "GET",//查询方式为GET url: "https://haveibeenpwned.com/api/breachedaccount/" + $("#inputxt").val(),//构造查询url async: "true",//异步方式处理前台任务 dataType: "json",//返回数据格式为json success: function(data){//返回成功信息后回调的函数 $("#textbefore").text("帐号已泄露，泄露的网站是："); $("#text").empty(); $.each(data, function(idx,field){ $("#text").append(field + " "); })}, error: function(XMLHttpRequest, textStatus, errorThrown){//返回失败信息后回调的函数 $("#textbefore").empty(); if(XMLHttpRequest.status==404) $("#text").text("恭喜，帐号很安全"); if(XMLHttpRequest.status==400) $("#text").text("错误，格式不对"); //alert(XMLHttpRequest.readyState + " ," + XMLHttpRequest.status + " ," + XMLHttpRequest.responseText+ " ,"); } }); }); }); |
实现后的结果如下
最后放上这次测试的API来源：https://haveibeenpwned.com/API
另外放上开发API一款非常实用的工具：Chrome应用Postman – REST Client
There are no comments yet