http服务

一:了解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技术来加载服务器上的资源.

原文地址:https://www.cnblogs.com/1314bjwg/p/12541191.html