Node.js配合jQuery UI autocomplete的应用

Node.js擅长的领域为：

不需要很多运算
吞吐量要求高
进消息轻并且要求快
出消息轻并且要求快

网上的例子都是socket.io的，我一直在想到底能用在什么地方？根据node.js的优点（擅长领域），想出了这个应用场景：

jQuery UI的autocomplete应用场景，这个需要的数据都是很零碎却量多的。

结构如下：

用ASP.NET MVC4新建一个web站点，在这里编写jQuery UI autocomplete代码
用WebMatrix编写Node.js代码（主要是基于express的路由）

由于这2个都是独立的站点，因此涉及到跨域问题，使用JSONP解决（其实在js代码调用和node.js端都要修改相应的代码）。

先贴ASP.NET MVC4的代码

<head>
    <title></title>
    <link href="jqueryui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="jqueryui/js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="jqueryui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
      <script>
          $(function () {
              $("#searchKey").autocomplete({
                  source: function (request, response) {
                      $.ajax({
                          type: "get",
                          async: false,
                          url: "http://localhost:22912/users/" + request.term,    //这里是Node.js的url
                          dataType: "jsonp",
                          success: function (data) {
                              response($.map(data, function(item){
                                                                        return {label: item.UserName,value: item.UserName}
                                                                    }
                                             )//转换成label, value形式，以便UI中显示
                                       );
                          },
                          error: function () {
                              alert('fail');
                          }
                      });
                  }
              });
          });
      </script>
</head>
<body>
    <input id="searchKey" size="50" />
</body>

然后建立Node.js程序，先看看WebMatrix的新建Node.js Dialog：

新建后，会看到一堆文件建立了，先看看server.js入口文件，再看路由文件：

var express = require('express')  //导入express模块
  , http = require('http')        //导入http核心模块
  , path = require('path')        //同上
  , routes4users = require('./routes/users');  //导入自己编写的users路由模块

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');  //存放视图的文件夹，和asp.net mvc类似用途
  app.set('view engine', 'jade');          //类似于asp.net mvc的razor，不过jade语法不同，并且接近于coffeescript那样采用缩进
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/users/:name', routes4users.users_getCollectionByName);
//类似于asp.net mvc中的路由，mvc下为：{controller}/{action}/{id}，Node.js中用:前缀为参数
//routes4users.users_getCollectionByName是我们要编写的主要处理函数



http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

看看users.js文件：

function UserInfo()
{
    this.UserName = null;
    this.Age = -1;
}

var users = new Array();         //模拟数据库
for (var i = 0; i < 10; i++) {   //加入数据
    var u=new UserInfo();
    u.UserName = "aaron" + i;
    u.Age = i;
    users.push(u);
}


exports.users_getCollectionByName = function (req, res) {  //server.js中，路由/users/:name的对应函数
    var searchKey = req.params.name;

    var result = new Array();
    for (var i = 0; i < users.length; i++) {//模拟搜索逻辑
        if (users[i].UserName.indexOf(searchKey) >= 0) {
            result.push(users[i]);
        }
    }
    var callbackFunctionName = req.query.callback;//jQuery的JSONP调用会设置这个参数，通过querystring的方式传过来

    res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
    var str = JSON.stringify(result);
    str = callbackFunctionName+"(" + str + ")";//这句很重要
    res.send(str);
}

运行效果图：

posted @ 2013-08-20 14:21 McKay 阅读(3242) 评论(8) 编辑收藏举报

刷新页面返回顶部

McKay

Node.js配合jQuery UI autocomplete的应用

公告