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内容够多，即可应付各种文件的传输。