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);
}

 

運行效果圖:

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM