個人博客搭建完成，歡迎大家來訪問哦
黎默丶lymoo的博客
http模塊深入
http協(xié)議
http: 超文本傳輸協(xié)議，所有路由都是通過它來傳輸眶俩，通過它能夠構建一個客戶端與服務端連接的管道
http模塊: 能夠構建服務器環(huán)境（模擬客戶端）
創(chuàng)建服務器
類似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表單進行簡單的前后臺交互
首先創(chuàng)建三個文件，index.html和form.html以及http.js（名字隨意，具體是了解如何實現(xiàn)）彪标。
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傳進來的數(shù)據(jù)
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請求的發(fā)送與接收
這里就不需要form.html文件了难咕，將index.html加上一段script標簽進行ajax請求發(fā)送课梳，代碼如下：
<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傳輸?shù)臄?shù)據(jù)
console.log(urlObj.query);
}
最終同樣在瀏覽器輸入http://localhost:8080 在終端就能收到ajax發(fā)送出來的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進行模擬請求，我們會發(fā)現(xiàn)request.js會返回出{"err": 0, "msg": "請求的內容"}爆土，然后服務器會返回出user=xxx&pass=111 請求結束椭懊。如果出現(xiàn)這種結果就說明發(fā)送成功了！
原文鏈接
