http: 超文本傳輸協(xié)議,所有路由都是通過它來傳輸,通過它能夠構(gòu)建一個(gè)客戶端與服務(wù)端連接的管道
http模塊: 能夠構(gòu)建服務(wù)器環(huán)境(模擬客戶端)
創(chuàng)建服務(wù)器
類似 node.js基礎(chǔ)(一) 文章中提到的
var http = require("http");var url = require("url");var server = http.createServer(function(req, res){ console.log(req.url); // 打印請(qǐng)求的路徑
實(shí)例1
使用from表單進(jìn)行簡單的前后臺(tái)交互
首先創(chuàng)建三個(gè)文件, index.html 和 form.html 以及 http.js (名字隨意,具體是了解如何實(shí)現(xiàn))。
index.html文件內(nèi)容
<!DOCTYPE html><html>
form.html文件內(nèi)容
<!DOCTYPE html><html>
http.js文件內(nèi)容
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") { // 把本項(xiàng)目中的index.html讀出來,寫進(jìn)響應(yīng)res中
至此可以試一下打開http.js的模擬服務(wù)器,在瀏覽器輸入 http://localhost:8080 進(jìn)行一下相關(guān)操作看一下效果吧。
最終效果在終端能夠如圖所示就大功告成了,但是這里只有簡單的兩個(gè)頁面交互,如果有許許多多的頁面,每個(gè)頁面都要去else if判斷一下是不是太麻煩了,這里有個(gè)較為簡便的方法,在 http.js 的文件中將else if改為如下:
else if (urlObj.pathname != "/favicon.ico") { fs.createReadStream("." + urlObj.pathname).pipe(res);
這樣就不用寫很多pathname去一一匹配了~是不是很方便呢!
這里默認(rèn)的傳輸方式是通過GET,那如果是POST該怎么寫呢?
實(shí)例2
使用from表單的POST傳輸方式進(jìn)行簡單的前后臺(tái)交互
還是實(shí)例1中的三個(gè)文件,將 form.html 文件的 form 標(biāo)簽里的屬性更改為
<formaction="/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");
這樣最終效果同GET方式一樣能夠獲取到填寫的用戶名和密碼,并且最終頁面返回的結(jié)果是“你請(qǐng)求的地址是/post”
實(shí)例3
使用from表單的POST傳輸方式進(jìn)行簡單的圖片上傳的操作
這里同樣是上述的三個(gè)文件,在 form.html 文件中加上上傳文件的標(biāo)簽
<inputtype="file"name="fileup">
在 http.js 中也添加一段對(duì)post傳輸文件的操作,代碼如下:
else if (urlObj.pathname == "/post") { // 處理上傳文件
此時(shí)可以測試一下上傳一張圖片看看能否在upload目錄下找到同樣的圖片~
實(shí)例4
ajax請(qǐng)求的發(fā)送與接收
這里就不需要 form.html 文件了,將 index.html 加上一段 script 標(biāo)簽進(jìn)行ajax請(qǐng)求發(fā)送,代碼如下:
<script>
在 http.js 文件中的else if后再加上一段代碼
else if (urlObj.pathname == "/ajax") { // 接收了ajax傳輸?shù)臄?shù)據(jù)
最終同樣在瀏覽器輸入 http://localhost:8080 在終端就能收到ajax發(fā)送出來的user和pass兩個(gè)字段了~
實(shí)例5
http模擬客戶端
這里我們?cè)傩陆ㄒ粋€(gè)名為 request.js 的文件,這里提供get和post兩種寫法,代碼如下:
var http = require("http");
然后在 http.js 文件中再添加一段else if代碼
else if (urlObj.pathname == "/request") { // get方式
然后我們先開啟一下 http.js 這個(gè)模擬服務(wù)器,在運(yùn)行 request.js 進(jìn)行模擬請(qǐng)求,我們會(huì)發(fā)現(xiàn) request.js 會(huì)返回出
{“err”: 0, “msg”: “請(qǐng)求的內(nèi)容”}
,然后服務(wù)器會(huì)返回出
user=xxx&pass=111 請(qǐng)求結(jié)束
。如果出現(xiàn)這種結(jié)果就說明發(fā)送成功了!
聯(lián)系客服