一：了解http模块:
/*了解HTTP协议: 1：HTTP全称为超文本传输协议,在计算机网络体系中的分层中属于应用层. 2：HTTP协议的特点: 支持客户/服务器模式 简单快速：客户向服务器发送请求服务时,只需要传送请求方法和路径。 常见的请求方法有GET,HEAD,POST,每种方法规定了客户与服务器联系的类型不同。 3:灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。 4：无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。 5：由于HTTP协议是无状态的一种协议，因此我们常需要使用cooike技术. */ /* 2:node.js提供了HTTP模块，加载该模块的语法: var http = require('http');//HTTP服务器本质上也是一个Socket服务器. */ /* 3:创建http.Server: (1):var server =http.createServer(); (2):http.Srever是一个基于事件的HTTP服务器，继承自EventEmitter,所有的请求 都被封装为独立的事件. (3):http.Server还提供了三个事件: request:当客户端请求到来时,该事件被触发,提供了两个参数req和res,分别为 http.ServerRequest和http.ServerResponse的实例,表示请求和响应信息.分别代表可读流,和可写流。 connection:当tcp连接建立时,该事件被触发,提供一个参数socket,为net.Socket 的实例. */ /* 4:http.ServerResponse: (1)http.ServerResponse是返回给客户端的信息,决定了用户最终能看到的结果. 他是由http.Server的request事件发送的,作为第二个参数传递. (2):http.ServerResponse包含三个重要的成员函数: response.writeHead: response.write(data,[encoding]):向请求的客服端发送响应内容. response.end(data,encoding):参数意义和write是一样的,目的是告诉 客户端所有发送已经完成.如果不调用该函数,客户端将永远处于等待状态. */ var http = require('http'); var server = http.createServer(); //监听请求:(request): /*request:就是一个可读流:用来获取当前服务器连接的客户端的一些请求 报文数据; reponse:就是一个可写流:用来给客户端socket发送消息,或者响应报文. */ server.listen(3000,function(){ console.log('server is Listening at port 3000'); }); server.on('request',function(request,reponse){ //使用HTTP发送数据时,HTTP会把信息封装成一些响应报文发送到socket。 response.write('hello world'); reponse.write('必须复习计算机网络.'); reponse.end(); });
二：HTTP服务请求处理:
var http = require('http'); var server = http.createServer(); server.on('request',function(request,response){ var url = request.url; if(url === '/'){ response.end('hello end');}else if(url === '/login'){ response.end('hello login'); } else{ response.end('404 Not Found'); } }); server.listen(3000,function(){ console.log('server is listening at port 3000'); }); /* 在浏览器中可以进行测试:使用本地服务器测试地址: 地址栏输入http://127.0.0.1：3000或直接输入127.0.0.1：3000就可以。 */
三：HTTP处理静态资源:首先需要把要加载的HTML页面放在一个具体固定的文件夹中这里放在static中
login.html
<!DOCTYPE html> <html> <head> <title>登录页面</title> <link rel="stylesheet" type="text/css" href="static/mian.css"> </head> <body> <h1>登录</h1> <img src="images/img1.jpg" alt="wangqian"> </body> </html>
register.html
<!DOCTYPE html> <html> <head> <title>注册页面</title> <link rel="stylesheet" type="text/css" href="static/main.css"> </head> <body> <h1>注册</h1> <img src="images/img1.jpg" alt=""> </body> </html>
404.html
<!DOCTYPE html> <html> <head> <title>404</title> </head> <style type="text/css"> body{ background-color: pink; } </style> <body> <h1>404 Not Found.</h1> </body> </html>
main.css
body{
background-color: red;
}
index.html
<!DOCTYPE html> <html> <head> <title>首页</title> <link rel="stylesheet" type="text/css" href="static/main.css"> </head> <style type="text/css"> h1{ border: solid 1px blue; text-align: center; margin:80px 80px; background-color: blue; } iframe{ float: left; } </style> <body> <h1>首页</h1> <iframe height="498" width="510" src="http://player.youku.com/embed/XNDIzMTU1Mzk0OA==" frameborder="0" allowfullscreen></iframe>> </body> </html>
HTTP.js
var http = require('http'); var fs = require('fs'); //用于读取静态文件 var path = require('path'); var server = http.createServer(); server.on('request',function (res,rep) { //获取静态资源路径 var url = res.url; //用户请求的路径; if(url === '/'){ fs.readFile(path.join(__dirname,'static/index.html'),'utf-8',function(err,data){ if(err){throw err;} rep.end(data);//将读取到的数据响应给浏览器 }); } else if(url === '/login'){ fs.readFile(path.join(__dirname,'static/login.html'), 'utf-8',function(err,data){ if(err){throw err;} rep.end(data); }); //在遇到css文件和图片文件浏览器会重新发送请求获取资源 }else if(url === 'main.css'){ var csspath = path.join(__dirname,'static/main.css'); fs.readFile(csspath,'utf-8',function(err,data){ if (err) {throw err;} response.end(data); }); }else if(url === 'images/img1.jpg'){ var imgPath = path.join(__dirname,'static/images/img1.jpg'); fs.readFile(imgPath,function(err,data){ if (err) {throw err;} rep.end(data); console.log(data); }); }else if(url === '/register'){ fs.readFile(path.join(__dirname,'static/register.html'),'utf-8', function(err,data){ if(err){throw err;} rep.end(data); console.log(data); //输出的数据就是html文本,这里发送给浏览器进行解析. }); } else{ fs.readFile(path.join(__dirname,'static/404.html'),'utf-8', function(err,data){ if (err) {throw err;} rep.end(data); }); } }); server.listen(3000,function(){ console.log('server is listening at port 3000'); });
在遇到图片资源时:会加载的特别慢,所以在这里会使用AJAX技术来加载服务器上的资源.