Node.js 学习过程总结(二)之网页解析

在Node.js服务器中，浏览器的每次请求都要有对应的解析代码。

当浏览器打开一个网页时，Node.js后台是如何处理的？

当浏览器打开一个页面的时候，实际上是向服务器发送一个GET请求，URL指向期望访问的页面。Node.js后台收到浏览器的请求，先判断是什么类型的请求，可用

Request.method

方法获取，如果为GET，则先获取请求的页面名称，可用

url.parse(Request.url).pathname

方法获取，如浏览器访问http://127.0.0.1:6324/index.html页面，该方法即可获取出页面名称index.html，然后再调用

fs.readFile

方法读取index.html文件，再将读取出来的数据返回给浏览器。

示例如下：

function HandleGet(Request, Response)
{
var Path = url.parse(Request.url).pathname;

fs.readFile('./' + Path, 'binary',function (Error, Data)
{
if (Error) {
Response.writeHead(404, {'Content-Type': 'text/plain'});
Response.write('页面丢失');
Response.end();
}
else
{
Response.writeHead(200, {'Content-Type': 'text/html'});
Response.write(Data, 'binary');
Response.end();
}
})
}

当浏览器获取到页面后，是如何解析html页面中的js脚本和css样式等文件的？

假如html页面中包含外部样式

<link rel="stylesheet" href="css/normalize.css">

，那么当浏览器获取到该html页面后，还需要根据链接去获取css样式文件，这时浏览器又向Node.js服务器发送GET请求，URL指向css/normalize.css文件，服务器再一遍执行上述代码，但问题出现了，页面还是没有显示css样式。

要注意的地方是

Response.writeHead(404, {'Content-Type': 'text/html'})

服务器回应报文的头部是硬编码，申明返回的数据是html格式的，但现在要求的是返回css格式，浏览器当然不可能识别了。

解决思路：要识别浏览器请求的文件格式，可以通过

var Type = path.extname(Path)

获取请求文件的后缀，

Type.slice(1)

去除后缀前的.号，然后根据一个配置文件获取该文件类型对应的Content-Type值。

解决方案如下：

写好配置文件Mime.js，各种类型文件对应的Content-Type值

exports.types = {
"css": "text/css",

"gif": "image/gif",

"html": "text/html",

"ico": "image/x-icon",

"jpeg": "image/jpeg",

"jpg": "image/jpeg",

"js": "text/javascript",

"json": "application/json",

"pdf": "application/pdf",

"png": "image/png",

"svg": "image/svg+xml",

"swf": "application/x-shockwave-flash",

"tiff": "image/tiff",

"txt": "text/plain",

"wav": "audio/x-wav",

"wma": "audio/x-ms-wma",

"wmv": "video/x-ms-wmv",

"xml": "text/xml"
};

修改读取文件代码

fs.readFile('./' + Path, 'binary',function (Error, Data)
{
if (Error) {
Response.writeHead(404, {'Content-Type': 'text/plain'});
Response.write('页面丢失');
Response.end();
}
else
{
var Type = path.extname(Path);
Type = Type ? Type.slice(1) : 'unknown';
var ContentType = Mime.types[Type] || "text/plain";
Response.writeHead(200, {'Content-Type': ContentType});
Response.write(Data, 'binary');
Response.end();
}
})

这样只要Mime.js内容够多，即可应付各种文件的传输。