zoukankan      html  css  js  c++  java
  • 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);
    }

    运行效果图:

  • 相关阅读:
    提高关键词排名的28个优化技巧
    Web存储机制—sessionStorage,localStorage使用方法
    19个JavaScript简化编码小技巧
    禁止浏览器滚动条滚动,但滚动条可以显示
    H5项目常见问题及注意事项
    利用cookie实现“只弹出一次窗口”的JS代码
    关于JSON.parse在ie6,ie7下未定义的issue
    你真的会使用XMLHttpRequest吗?
    页面内容不足以铺满屏幕高度时,footer居底显示
    CSS box-shadow 属性
  • 原文地址:https://www.cnblogs.com/aarond/p/NodeJSautocomplete.html
Copyright © 2011-2022 走看看