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

上一节我们对 NodeJS 的安装和模块做了介绍，这一节我们就正式开始编码，实现我们的小案例。
799bad5a3b514f096e69bbc4a7896cd920150311110625247391499.jpg

首先，我们在喜欢的地方新建一个目录用来存放这个案例的代码，如 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>

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

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

已注销

引用和评论

【Laravel学习篇 · 二】在Laravel中借鉴Yii的params使用方法

解决lodash由于依赖错误导致无法启动的问题

阿里云ECS服务器部署Node.js项目全过程详解

SAP Fiori应用的三种部署方式

JS工程化集锦

Node.js学习备案

解决nvm install node 出现错误