Ajax+Node.js前後端交互最佳入門實踐(03)
3.HTTP服務器
3.3.相關前置知識
1 什麽是url？
統一資源定位符是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麽處理它
2 url包含的內容
url的形式是這樣的： http://nodeing.com/cloud/search?q=html 其中，http://表示協議， nodeing.com表示域名，／cloud/search表示路由，?號後面的叫做查詢字符串，還有一個默認的值80，表示端口，他應該加在域名的後面 http://nodeing.com:80/
2.1 模式/協議（scheme）：它告訴瀏覽器如何處理將要打開的文件。最常用的模式是超文本傳輸協議（Hypertext Transfer Protocol，縮寫為HTTP），這個協議可以用來訪問網絡，這裏我們要理解一下協議， 通常協議就是雙方都需要遵守的規則，不同的協議有不同的約束，互聯網中使用的這些協議也是一樣，兩臺計算機之間通信，可以采用不同的協議(規則)，都遵循同一種協議，才能完成某些事情，例如，我們常用的超文本傳輸協議（http）就是在網絡訪問的時候用的，ftp協議，文件傳輸用的協議，Telnet協議，遠程連接用的協議等等，總之，你只要記住他們是一些都要遵守的規則就行了
2.2 域名／ip地址：互聯網中ip地址就相當於門牌號，你想象一下你要給某個人寄快遞，首先是不是應該知道對方的地址呢？ip地址的作用就是門牌號，ip地址的格式是這樣的： 192.168.1.123 ，互聯網上ip地址成千上萬，如果讓你去記住每個網站的ip地址，肯定是記不住的除非你是天才，因此，就有域名和ip的一種映射關系，你可以去註冊一個域名，和你的電腦(服務器)ip地址綁定，例如：baidu.com <===> 119.75.217.109/，這樣我們就不用記ip而只需要記住域名就可以訪問一些常用網站了，這就是域名和ip的關系，以及作用
2.3 端口： 這裏我們說的端口指的就是協議端口，如果把計算機看作是一棟房子，那麽端口就是房子的門，一個IP地址的端口有65536（2的16次方）個，這些端口是通過端口號來標記的，範圍是0～65535，既然我們把每個端口看作是房子的門，你可以想象一下，一棟政府的辦公大樓裏面，有各種各樣的服務窗口，各種各樣的科室，每個科室的智能不同，提供的服務也不同，那麽同樣的道理，計算機上的這些端口也對外提供服務，想要獲得服務也必須找到正確的端口才行，例如：http服務的默認端口是80，ftp協議的默認端口是21，Telnet協議的默認端口是23,https協議的默認端口是443等等
2.4 文件路徑／文件名： url的第四部分是你訪問資源的文件路徑和文件名，本質上說一個網站就是放在服務器上的文件夾和文件組成的，我們開發一個網站會有很多的目錄和文件，裏面有我們寫好的各種功能，例如：我們在一臺服務器(互聯網上的遠程電腦)上部署了我們開發出來的網站，實際上就是把我們開發的網站放到了特定的目錄下，假如說這個目錄是這樣的：
我們要訪問到這個目錄下的圖片文件怎麽訪問呢？我們假設這臺服務器的域名就是http://nodeing.com, 那麽意味著我們在瀏覽器中輸入http://nodeing.com 這個地址的時候就能夠訪問到這個文件夾了，這個目錄我們稱為網站跟目錄，這個目錄下 還有其他的目錄和文件， 這個時候我們要訪問圖片的話我們需要 這樣寫： http://nodeing.com/img/html_logo.png， 在域名後面加的內容img/html_logo.png就是目錄和文件的路徑
2.5 查詢字符串：當我們要想服務器發送數據請求的時候，我們可以把數據加在問號後面以一定的格式發送到後臺，例如：http://nodeing.com/cloud/search?q=html， 其中q = html 表示發送到後臺的數據，這個我們會在表單發送數據的時候詳細的操作實踐
3.2.http模塊是什麽
通常一臺電腦作為服務器，需要安裝相應的服務器軟件來提供服務，例如，常用的服務器軟件有Aphche、Nginx、IIS，他們會響應前端的請求，根據不同的請求做不同的事情，而在node中你不需要單獨去安裝這些服務器軟件，可以直接使用內置的http模塊來實現簡單的服務器，所以簡單的說，http模塊就是node內置的提供http服務的模塊
3.3.創建一個http服務器
下面我們就創建一個http服務器程序來體驗一下它到底是做什麽的？
index.js文件中，寫入下面代碼：
//引入http模塊
var http = require(‘http‘);
//創建一個服務實例
var app = http.createServer(function (req, res) {
res.write("hello world");
res.end();
});
// 設置監聽端口
app.listen(3000);
接下來，在你的瀏覽器中輸入,http://localhost:3000 查看效果
如果你不明白localhost怎麽回事，別著急，我們下面深入的講講
1 當用戶在瀏覽器輸入網址的時候，首先會去查找本地的hosts文件，在這個文件中去看看有沒有域名和ip地址的映射（對應關系）關系，如果有就直接訪問這個ip地址對應的電腦，如果沒有接著往下找 註意： window系統的本地hosts文件位置在 C:\Windows\System32\drivers\etc目錄下 ， mac系統本地hosts文件在 /etc 目錄下 下面是hosts文件內容
## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost # 後面的這些都是自己配置的 127.0.0.1 www.cdx.com 127.0.0.1 location.cdx.com 127.0.0.1 test.yii.com 127.0.0.1 admin.yii.com
從這個文件中我們發現有一個localhost名字對應著127.0.0.1，這就是域名和ip的對應關系，所以我們在瀏覽器中輸入http://localhsot:3000 就相當於我們輸入了http://127.0.0.1:3000, 這裏的127.0.0.1比較特殊，它是本機的ip回環地址，你可以粗暴的理解為只有是在你自己電腦上輸入這個地址，那麽就是指訪問自己電腦
2 當這個本地的hosts文件中，並沒有記錄你訪問的域名和ip的對應關系，那麽就會去DNS服務器上找，DNS是域名解析系統，根據你的域名解析對應的ip地址，一般來說DNS配置正確，你訪問的這個網站能正常提供服務，那麽你輸入域名都是能訪問到網站的
3.4.獲取get方式的數據
1 根據請求，返回不同的頁面
//引入http模塊
var http = require(‘http‘);
//創建一個服務實例
var app = http.createServer(function (req, res) {
res.setHeader("content-type", "text/plain;charset=utf-8");
//req 表示請求對象 一些請求信息會放在這個對象下
//res 表示響應對象 一些響應的信息會放在這個對象下
//一次http請求 會有一次響應
//req.url記錄了請求的路徑，我們可以打印出來看看
console.log(req.url);
//根據不同的請求，做不同的事情
if(req.url === ‘/‘){
res.write("歡迎來到網站首頁");
res.end();
}else if(req.url === ‘/login‘){
res.write("歡迎來到登錄頁面");
res.end();
}else if(req.url === ‘/register‘){
res.write("歡迎來到註冊頁面");
res.end();
}else if(req.url === ‘/admin‘){
res.write("歡迎來到後臺管理頁面");
res.end();
}else{
res.write("404 你找的頁面飛了");
res.end();
}
});
// 設置監聽端口
app.listen(3000);
2 返回一個html網頁
index.html文件內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/login" method="get" id="form">
用戶名: <input type="text" name="username"/>
密碼： <input type="text" name="password" />
<input type="submit" value="登錄" id="btn">
</form>
</body>
</html>
index.js文件內容
//引入fs模塊，用來處理文件
var fs = require(‘fs‘);
//引入http模塊
var http = require(‘http‘);
//創建一個服務實例
var app = http.createServer(function (req, res) {
if(req.url === ‘/login‘){
fs.readFile(‘./index.html‘, ‘utf-8‘, function (err, data) {
res.setHeader("content-type", "text/html;charset=utf-8");
if(!err){
res.write(data);
res.end();
}
})
}
});
// 設置監聽端口
app.listen(3000);
運行index.js文件，在瀏覽器輸入http://localhost:300/login 查看效果
3 url模塊和querystring模塊的使用
//引入url模塊， 把url字符串解析成對象 var url = require(‘url‘); //url字符串 var url_str = ‘http://nodeing.com/search/?q=html‘; //url字符串被解析成了對象 var urlObj = url.parse(url_str); console.log(urlObj); //從對象中獲取查詢字符串 query: ‘q=html‘, var query_str = urlObj.query; //把查詢字符串解析成對象 // 引入queryString模塊 var queryString = require(‘querystring‘); var queryObj = queryString.parse(query_str) console.log(queryObj); //取出html字符串 console.log(queryObj.q)
4 修改表單提交路徑，發送數據到後臺並且把發送的數據打印出來
index.html需要修改的內容
//把原來action改為 /user_login <form action="/user_login" method="get" id="form">
index.js中的內容
//引入fs模塊，用來處理文件
var fs = require(‘fs‘);
// 引入url模塊 可以把url解析成對象
var url = require(‘url‘);
// 引入querystring模塊，可以把q=html這種查詢字符串轉換成對象
var queryString = require(‘querystring‘);
//引入http模塊
var http = require(‘http‘);
//創建一個服務實例
var app = http.createServer(function (req, res) {
//用url模塊，把請求的url解析成對象
var urlObj = url.parse(req.url);
//打印出來看看是啥？
console.log(urlObj);
if(urlObj.pathname === ‘/login‘){
fs.readFile(‘./index.html‘, ‘utf-8‘, function (err, data) {
res.setHeader("content-type", "text/html;charset=utf-8");
if(!err){
res.write(data);
res.end();
}
})
}
//如果請求的是 /user_login 就返回查詢字符串
if(urlObj.pathname === ‘/user_login‘){
//把這種格式 q=html 轉換成 {q: ‘html‘}
var query_obj = queryString.parse(urlObj.query);
//打印出來
console.log(query_obj);
//返回查詢字符串
res.write(urlObj.query);
res.end();
}
});
// 設置監聽端口
app.listen(3000);
3.5.獲取post方式提交的數據
post方式提交的數據，在後端獲取的方式不一樣，需要監聽兩個事件，data和end，當請求發送數據會觸發data事件，當數據接收完成會觸發end事件，具體代碼如下
//引入fs模塊，用來處理文件
var fs = require(‘fs‘);
// 引入url模塊 可以把url解析成對象
var url = require(‘url‘);
// 引入querystring模塊，可以把q=html這種查詢字符串轉換成對象
var queryString = require(‘querystring‘);
//引入http模塊
var http = require(‘http‘);
//創建一個服務實例
var app = http.createServer(function (req, res) {
//用url模塊，把請求的url解析成對象
var urlObj = url.parse(req.url);
//打印出來看看是啥？
console.log(urlObj);
if(urlObj.pathname === ‘/login‘){
fs.readFile(‘./index.html‘, ‘utf-8‘, function (err, data) {
res.setHeader("content-type", "text/html;charset=utf-8");
if(!err){
res.write(data);
res.end();
}
})
}
//如果請求的是 /user_login 就返回查詢字符串
if(urlObj.pathname === ‘/user_login‘ && req.method === ‘POST‘){
var postData = ‘‘;
req.on(‘data‘, function (datachunk) {
postData += datachunk
});
req.on(‘end‘, function () {
//返回查詢字符串
res.write(postData);
res.end();
});
}
});
// 設置監聽端口
app.listen(3000);
註意： 你需要把index.html中到請求方式改成post
//把method 改成post <form action="/user_login" method="post" id="form">
Ajax+Node.js前後端交互最佳入門實踐(03)