JavaScript handles static resources for file requests
This article mainly introduces the processing of js static resource file requests in detail. It has certain reference value. Interested friends can refer to it.
The example in this article shares js static resources with everyone. The processing of file requests is for your reference. The specific content is as follows
html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css" type='text/css' charset='utf-8'> </head> <body> <p class='box' id='box'></p> <script charset='utf-8' src='index.js'></script> </body> </html>
css file
*{
margin:0;
padding:0;
}
html,body{
font-size:14px;
color:#000;
}
.box{
margin:50px auto;
width:300px;
height:300px;
background:#e3bd83;
border:10px solid #e0f2be;
}JS file
var box = document.getElementById('box');
box.onclick = function(){
this.style.background = "red"
}server file
var http = require('http'),
fs = require('fs'),
url = require('url');
//创建一个服务
var server1 = http.createServer(function(req,res){
//解析客户端请求地址中的文件的目录名称以及传递给当前服务器的数据内容
var urlObj = url.parse(req.url,true),
pathname = urlObj["pathname"],
query = urlObj["query"];
//简写 try catch捕获异常 防止请求资源文件不存在 我们不加try catch服务会终止。这样不好，所以我们添加try catch捕获异常
//处理静态资源文件的请求(HTML/CSS/JS...) ->前端路由
var reg = /\.(HTML|JS|CSS|JSON|TXT|ICO)/i;
if(reg.test(pathname)){
//获取请求文件的后缀名
var suffix = reg.exec(pathname)[1].toUpperCase();
//根据请求文件的后缀名获取到当前文件的MIME类型
var suffixMIME = "text/plain";//TXT文本对应的
switch(suffix){
case "HTML":
suffixMIME = "text/html";
break;
case "CSS":
suffixMIME = "text/css";
break;
case "JS":
suffixMIME = "text/javascript";
break;
case "JSON":
suffixMIME = "application/json";
break;
case "ICO":
suffixMIME = "application/octet-stream";
break;
}
try{
//按照指定的目录读取文件中的内容或者代码（读取出来的内容都是字符串格式的）
var conFile = fs.readFileSync("."+pathname,"utf-8");
//重写响应头信息:告诉客户端的浏览器我返回的内容是什么样的MIME类型,指定返回的内容的格式是utf-8,避免出现乱码
res.writeHead(200,{'content-type':suffixMIME+';charset=utf-8'})
//服务端向客户端返回的内容也是字符串
res.end(conFile)
}catch(e){
res.writeHead(404,{'content-type':'text/plain;charset=utf-8'});
res.end("request file is not found")
}
/*
MIME类型:
每一种资源文件都有自己的标识类型，例如:HTML文件的MIME
类型是"text/html".css文件的MIME类型是"text/css"
浏览器会按照代码的MIME类型进行渲染
*/
}
// try{
// var con = fs.readFileSync("."+pathname,"utf-8");
// res.end(con);
// }catch(e){
// res.end("request file is not find")
// }
// if(pathname==="/index.html"){
// var con = fs.readFileSync("./index.html","utf-8");
// res.end(con);
// return;
// }
// if(pathname==="/index.css"){
// con = fs.readFileSync("./index.css","utf-8");
// res.end(con);
// return;
// }
// if(pathname==="/index.js"){
// con = fs.readFileSync("./index.js","utf-8");
// res.end(con);
// return;
// }
})
//为当前的这个服务配置端口
server1.listen(80,function(){
console.log("server is success,listening on 80");
})The above is the detailed content of JavaScript handles static resources for file requests. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1666
14
1426
52
1328
25
1273
29
1254
24
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
In-depth analysis of the role and usage of the static keyword in C language
Feb 20, 2024 pm 04:30 PM
In-depth analysis of the role and usage of the static keyword in C language. In C language, static is a very important keyword, which can be used in the definition of functions, variables and data types. Using the static keyword can change the link attributes, scope and life cycle of the object. Let’s analyze the role and usage of the static keyword in C language in detail. Static variables and functions: Variables defined using the static keyword inside a function are called static variables, which have a global life cycle
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
