转载

【NodeJS学习小案例】DNS域名解析 <二>

上一节我们对 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>

在接下来的一章中我们就正式开始服务器端代码的编写。

正文到此结束