node.js基础（三）

来源：互联网发布：网络科技产品编辑：程序博客网时间：2024/06/05 14:46

个人博客搭建完成，欢迎大家来访问哦
黎默丶lymoo的博客

http模块深入

http协议

http: 超文本传输协议，所有路由都是通过它来传输，通过它能够构建一个客户端与服务端连接的管道
http模块: 能够构建服务器环境（模拟客户端）

创建服务器

类似node.js基础（一）文章中提到的

var http = require("http");var url = require("url");var server = http.createServer(function (req, res) {    console.log(req.url);    // 打印请求的路径    console.log(req.method); // 打印请求的方法    res.end("结束本次请求");});server.listen(8080);

实例1

使用from表单进行简单的前后台交互
首先创建三个文件，index.html和form.html以及http.js（名字随意，具体是了解如何实现）。
index.html文件内容

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>首页</title>    </head>    <body>        <h1>首页</h1>        <a href="form.html">跳转到登录注册页</a>    </body></html>

form.html文件内容

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Title</title>    </head>    <body>        <form action="">            用户名：<input type="text" name="user"><br/>            密码：<input type="password" name="pass"><br/>            <input type="submit" value="提交" />        </form>    </body></html>

http.js文件内容

var http = require("http");var url = require("url");var fs = require("fs");var server = http.createServer(function (req, res) {    var urlObj = url.parse(req.url, true);    if (urlObj.pathname == "/" || urlObj.pathname == "/index.html") {        // 把本项目中的index.html读出来，写进响应res中        var rs = fs.createReadStream("index.html");        rs.pipe(res);    } else if (urlObj.pathname == "/form.html") {        fs.createReadStream("form.html").pipe(res);        console.log(urlObj.query); // 输出用户名和密码    } else {        // 如果输出来乱码的同学可以加上下面这句话        res.writeHead(200, {"Content-Type": "text/html;charset=utf-8"});        res.end("结束本次请求");    }});server.listen(8080);

至此可以试一下打开http.js的模拟服务器，在浏览器输入http://localhost:8080 进行一下相关操作看一下效果吧。
首页效果
表单页效果
返回结果图
最终效果在终端能够如图所示就大功告成了，但是这里只有简单的两个页面交互，如果有许许多多的页面，每个页面都要去else if判断一下是不是太麻烦了，这里有个较为简便的方法，在http.js的文件中将else if改为如下：

else if (urlObj.pathname != "/favicon.ico") {    fs.createReadStream("." + urlObj.pathname).pipe(res);}

这样就不用写很多pathname去一一匹配了~是不是很方便呢！
这里默认的传输方式是通过GET，那如果是POST该怎么写呢？

实例2

使用from表单的POST传输方式进行简单的前后台交互
还是实例1中的三个文件，将form.html文件的form标签里的属性更改为

<form action="/post" method="post">

然后再将http.js更改为如下

var http = require("http");var url = require("url");var fs = require("fs");var queryString = require("querystring");var formidable = require("formidable");var server = http.createServer(function (req, res) {    var urlObj = url.parse(req.url, true);    if (urlObj.pathname == "/" || urlObj.pathname == "/index.html") {        var rs = fs.createReadStream("index.html");        rs.pipe(res);    } else if (urlObj.pathname == "/post") {        res.writeHead(200, {"Content-Type": "text/html;charset=utf-8"});        // 处理post传进来的数据        var str = "";        req.on("data", function (chunk) {        str += chunk;    });    req.on("end", function () {        var query = queryString.parse(str);        console.log(query);    });        res.end("你请求的地址是" + urlObj.pathname);    } else if (urlObj.pathname != "/favicon.ico") {        fs.createReadStream("." + urlObj.pathname).pipe(res);    }});server.listen(8080);

这样最终效果同GET方式一样能够获取到填写的用户名和密码，并且最终页面返回的结果是“你请求的地址是/post”

实例3

使用from表单的POST传输方式进行简单的图片上传的操作
这里同样是上述的三个文件，在form.html文件中加上上传文件的标签

<input type="file" name="fileup">

在http.js中也添加一段对post传输文件的操作，代码如下：

else if (urlObj.pathname == "/post") {    // 处理上传文件    var form = new formidable.IncomingForm();    form.parse(req, function (err, fields, files) {        // fields: 是提交过来的字段        // files: 是提交过来的文件对象，文件会存储在临时路径        var rs = fs.createReadStream(files.fileup.path);        // 将文件从临时路径存放到指定目录下        var ws = fs.createWriteStream("./upload/" + files.fileup.name);        rs.pipe(ws);    });    res.writeHead(200, {"Content-Type": "text/html;charset = utf-8"});    res.end("你请求的地址是" + urlObj.pathname);}

此时可以测试一下上传一张图片看看能否在upload目录下找到同样的图片~

实例4

ajax请求的发送与接收
这里就不需要form.html文件了，将index.html加上一段script标签进行ajax请求发送，代码如下：

<script>    window.onload = function () {        var time = document.getElementById("time");        var ajax = new XMLHttpRequest();        ajax.open("GET", "/ajax?user=test&pass=123", true);        ajax.send();        ajax.onload = function () {            time.innerHTML = ajax.responseText;        }    }</script>

在http.js文件中的else if后再加上一段代码

else if (urlObj.pathname == "/ajax") {    // 接收了ajax传输的数据    console.log(urlObj.query);}

最终同样在浏览器输入http://localhost:8080 在终端就能收到ajax发送出来的user和pass两个字段了~

实例5

http模拟客户端
这里我们再新建一个名为request.js的文件，这里提供get和post两种写法，代码如下：

var http = require("http");get方式var request = http.request({    host: "localhost",    port: "8080",    path: "/request?user=test&pass=111",    method: "get"}, function (res) {    // console.log(res.statusCode);    res.on("data", function (chunk) {        console.log(chunk.toString());    });});request.end("请求结束"); // 结束本次请求// post方式var request = http.request({    host: "localhost",    port: "8080",    path: "/request",method: "post"}, function (res) {    // console.log(res.statusCode);    res.on("data", function (chunk) {        console.log(chunk.toString());    });});request.write("user=test&pass=111");request.end("请求结束"); // 结束本次请求

然后在http.js文件中再添加一段else if代码

else if (urlObj.pathname == "/request") {    // get方式    console.log(urlObj.query);    res.statusCode = 200;    res.end('{"err": 0, "msg": "请求的内容"}');    // post方式    req.on("data", function (chunk) {        console.log(chunk.toString());    });    res.end('{"err": 0, "msg": "请求的内容"}');}

然后我们先开启一下http.js这个模拟服务器，在运行request.js进行模拟请求，我们会发现request.js会返回出{"err": 0, "msg": "请求的内容"}，然后服务器会返回出user=xxx&pass=111 请求结束。如果出现这种结果就说明发送成功了！
原文链接

0 0