Node.js开发实战 Node.js配合jQuery UI autocomplete的应用-职坐标

Node.js开发实战 Node.js配合jQuery UI autocomplete的应用

沉沙 2018-07-26 来源：阅读 1230 评论 0

摘要：本篇Node.js教程探讨了Node.js配合jQuery UI autocomplete的应用，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

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>

type="text/css" />

$(function () {

$("#searchKey").autocomplete({

source: function (request, response) {

$.ajax({

type: "get",

async: false,

url: "//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>

然后建立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;