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

}

运行效果图：

Node.js配合jQuery UI autocomplete的应用的更多相关文章

  1. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  2. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  3. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

    0.引言   1.起因                  一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...

  4. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  5. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  6. 可输入自动匹配Select——jquery ui autocomplete

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. jQuery.ui autoComplete使用

    官网  http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...

  8. jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框

    $("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...

  9. jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...

随机推荐

  1. Node.js学习起步

    Node.js学习: 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱 ...

  2. 微信小程序-全国快递查询

    微信小程序-全国快递查询 摘要:WeChat.小程序.JS 开发过程 源码下载 1. GitHub 2. 百度云 链接:https://pan.baidu.com/s/1XVbtT2JsZslg4Y0 ...

  3. php json_encode中提示的中文总是返回"\u767b\u5f55\u6210\u529f\uff01"的解决办法

    最近在练习使用 php 写一些简单的接口,但是在返回的消息中,如果有中文,在测试后总是返回: {"resultCode":200,"message":" ...

  4. ELk(Elasticsearch, Logstash, Kibana)的安装配置

    目录 ELk(Elasticsearch, Logstash, Kibana)的安装配置 1. Elasticsearch的安装-官网 2. Kibana的安装配置-官网 3. Logstash的安装 ...

  5. （转）Android 之生成图形验证码

    import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; impor ...

  6. java中获取系统的当前时间

    转自:http://www.cnblogs.com/Matrix54/archive/2012/05/01/2478158.html 一. 获取当前系统时间和日期并格式化输出: import java ...

  7. [20181007]12cR2 Using SQL Patch.txt

    [20181007]12cR2 Using SQL Patch.txt --//12cR2 已经把sql打补丁集成进入dbms_sqldiag,不是11g的 DBMS_SQLDIAG_INTERNAL ...

  8. SQL Server -- 回忆笔记（二）：增删改查，修改表结构，约束，关键字使用，函数，多表联合查询

    SQL Server知识点回忆篇(二):增删改查,修改表结构,约束,关键字使用,函数,多表联合查询 1. insert 如果sql server设置的排序规则不是简体中文,必须在简体中文字符串前加N, ...

  9. SQLServer基础之数据页类型：GAM,SGAM,PFS

    简介 我们已经知道SQL Server IO最小的单位是页,连续的8个页是一个区.SQL Server需要一种方式来知道其所管辖的数据库中的空间使用情况,这就是GAM页和SGAM页. GAM页 GAM ...

  10. 安全之路 —— 利用APC队列实现跨进程注入

    简介 在之前的文章中笔者曾经为大家介绍过使用CreateRemoteThread函数来实现远程线程注入(链接),毫无疑问最经典的注入方式,但也因为如此,这种方式到今天已经几乎被所有安全软件所防御.所以 ...