上一节我们对 NodeJS 的安装和模块做了介绍,这一节我们就正式开始编码,实现我们的小案例。
首先,我们在喜欢的地方新建一个目录用来存放这个案例的代码,如 E:\node_workspace\code
注意路径中不要出现中文,免得各种问题 ^_^
我们首先来完成页面的布局:index.html
<!DOCTYPE html>
<html>
<head>
<title>DNS查询</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css">
.container{
margin-top: 5em;
}
#check_result{
color: #CD46A2;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h1>DNS查询工具</h1>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/parse" method="post">
<div class="form-group">
<label for="search_dns" class="col-sm-3 control-label">查询DNS: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="search_dns" name="search_dns">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<button type="submit" class="btn btn-primary">查询</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<div id='check_result'></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这里我们使用 bootstrap v3 ,下面就是来实现在点击查询按钮的时候在不刷新页面的情况下通过 Ajax 提交数据,然后对返回结果进行处理。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
为了更方便地使用 Ajax
和操作 DOM
元素,我这里还使用了jQuery (jQuery
是一个 JavaScript
库,极大地简化了JavaScript
编程)。
修改 index.html
文件,在 body
标签结束前加上引入 jQuery
文件:
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
接下来我们在刚引入的 jQuery
一行下编写点击事件的 JavaScript
代码:
<script type="text/javascript">
$(function(){
$('form').submit(function () {
var $this = $(this),
search_dns = $('#search_dns').val(),
url = $this.attr('action');
if ( search_dns ) {
$.get(url,{search_dns: search_dns}, function (res) {
var res = JSON.parse(res);
$('#check_result').html('IP 地址: ' + res.addresses);
})
}else{
alert('请输入域名!');
}
return false;
});
});
</script>
这里还只是一个 html
文件,还没编写服务器端的代码,所以输入一个 网站如:http://www.helloarron.com
后并没有返回我们所需的查询结果,反而会在浏览器控制台报错(可以打开控制台看看效果,Chrome
快捷键 F12
)。
下面是这个步骤下的 index.html
文件的完整代码:
<!DOCTYPE html>
<html>
<head>
<title>DNS查询</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css">
.container{
margin-top: 5em;
}
#check_result{
color: #CD46A2;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h1>DNS查询工具</h1>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/pae" method="post">
<div class="form-group">
<label for="search_dns" class="col-sm-3 control-label">查询DNS: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="search_dns" name="search_dns">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<button type="submit" class="btn btn-primary">查询</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<div id='check_result'></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('form').submit(function () {
var $this = $(this),
search_dns = $('#search_dns').val(),
url = $this.attr('action');
if ( search_dns ) {
$.get(url,{search_dns: search_dns}, function (res) {
var res = JSON.parse(res);
$('#check_result').html('IP 地址: ' + res.addresses);
})
}else{
alert('请输入域名!');
}
return false;
});
});
</script>
</body>
</html>
在接下来的一章中我们就正式开始服务器端代码的编写。