这里有新鲜出炉的 7 天学会 Node.js,程序狗速度看过来!
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用 · Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, 非常适合 运行在分布式设备 的 数据密集型 的实时应用
这篇文章主要介绍了 node.js+Ajax 实现获取 HTTP 服务器返回数据,讲解的十分详细,也给出了很多的实例,是篇非常不错的文章,这里推荐给大家。
我们看一个 html5 页面中通过 AJAX 请求的方式获取 HTTP 服务器返回数据的代码示例. 由于我们把服务器的端口指定为 1337, 并将从端口为 80 的网站中运行 HTML5 页面, 因此这是一种跨域操作, 需要在 HTTP 响应头部中添加 Access_Control_Allow_Origin 字段, 并且将参数指定为允许向服务器请求数据额域名 + 端口号 (省略端口号时允许该域名下的任何端口向服务器请求数据),
静态页面: index.html(注: 一定要放在服务器环境下, 如果是 win7 系统的话, 可以开启 IIS 服务, 并把页面考过去直接运行这个页面,)
- http://localhost:1337/",true);
- xhr.onreadystatechange=function(){
- if(xhr.readyState==4){
- if(xhr.status==200){
- document.getElementById("res").innerHTML=xhr.responseText;
- }
- }
- }
- xhr.send(null);
- }
- dsdf
node 代码:
- var http=require("http");
- var server=http.createServer(function(req,res){
- if(req.url!=="/favicon.ico"){
- res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost"});
- res.write("你好啊!");
- }
- res.end();
- });
- server.listen(1337,"localhost",function(){
- console.log("开始监听...");
- });
首先开启服务: node server.js
启动静态页面:
点击按钮 "获取数据"
如果大家觉得需要配置服务器环境太麻烦, 可以借用编辑器的优势来做.
比如我用的是 webstrom 8.0;
当我启动页面的时候, 浏览器中显示的是这个路径:
端口是 63342. 这个时候我们队代码做一些修改:
node 的 server.js 代码:
- var http=require("http");
- var server=http.createServer(function(req,res){
- if(req.url!=="/favicon.ico"){
- res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
- //res.setHeader();
- res.write("你好啊!");
- }
- res.end();
- });
- server.listen(1337,"localhost",function(){
- console.log("开始监听...");
- });
修改了 "Access-Control-Allow-Origin" 的值.
重新运行 demo 会发现, 达到同样的效果
也可以通过 res.seetHeader 来单独设置响应头部.
可以将上面的 res.writeHead() 改成 res.setHeader();
- var http=require("http");
- var server=http.createServer(function(req,res){
- if(req.url!=="/favicon.ico"){
- //res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
- res.setHeader("Content-Type","text/plain");
- res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
- res.write("你好啊!");
- }
- res.end();
- });
- server.listen(1337,"localhost",function(){
- console.log("开始监听...");
- });
细心的同学可能发现了, 利用 setHeader 的方法时, 缺少了一个状态码, 比如 200. 那么我们在使用 res.setHeader 的时候, 如何来设置状态码呢? 等会上代码
ajax 在服务器端返回的时候日期:
我们可以在服务器端返回时, 删除这个字段.
设置 res.sendData=false;
- var http=require("http");
- var server=http.createServer(function(req,res){
- if(req.url!=="/favicon.ico"){
- //res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
- res.statusCode=200;
- res.sendDate=false;
- res.setHeader("Content-Type","text/plain");
- res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
- res.write("你好啊!");
- }
- res.end();
- });
- server.listen(1337,"localhost",function(){
- console.log("开始监听...");
- });
设置了状态码, 也屏蔽了日期信息.
res.getHeader(name) 获取我们设置的响应头信息
res.removeHeader(name); 删除我们的头信息. 必须在我们的 write 方法发送数据之情被调用.
res.headersSent 属性是一个布尔值, 当当响应头已发送时, 属性值为 true 时; 当响应头未发送时, 属性值为 false.
server.js 代码:
- var http=require("http");
- var server=http.createServer(function(req,res){
- if(req.url!=="/favicon.ico"){
- if(res.headersSent)
- console.log("响应头已发送");
- else
- console.log("响应头未发送");
- res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
- if(res.headersSent)
- console.log("响应头已发送");
- else
- console.log("响应头未发送");
- res.write("你好啊!");
- }
- res.end();
- });
- server.listen(1337,"localhost",function(){
- console.log("开始监听...");
- });
运行 demo 查看结果:
res.write() 方法是向客户端发送数据的, 其实他还有一个返回值.
当向客户端发送的数据量比较小时或网速较快时, node 总是将数据直接发送到操作系统的内核缓存区中, 然后从内核缓存区中取出数据发送给对方. 这个时候 write 会返回 true.
当网速慢或数据量较大时, http 服务器并不一定会立刻把数据发送给客户端, node 会把数据缓存在内存中, 并在对方可以接受数据的情况下将内存中的数据通过操作系统的内核发送给对方. 这时的 write 返回 false.
可以设置 test.txt 的内容多少来测试结果.
一个简单的 node+ajax 效果就实现了. 是不是很简单呢?当然,想制作更加复杂的功能的话,我们还需要进一步的学习,以后我们慢慢来更新。
来源: http://www.phperz.com/article/17/0428/274229.html