Let's look at a code example in an HTML5 page to obtain data returned by HTTP server through AJAX request. Since we specify the server's port as 1337 and will run HTML5 pages from a website with port 80, this is a cross-domain operation. It requires adding the Access_Control_Allow_Origin field to the HTTP response header, and specifying the parameter to allow requesting data from the server to the domain name + port number (when omitting the port number, any port under the domain name is allowed to request data from the server).
Static page: index.html (Note: It must be placed in the server environment. If it is a win7 system, you can enable IIS service and run the page directly after the page test.)
The code copy is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ajax request in node (html5 page)</title>
<script type="text/javascript">
function GetData(){
var xhr=new XMLHttpRequest();
xhr.open("GET","http://localhost:1337/",true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("res").innerHTML=xhr.responseText;
}
}
}
xhr.send(null);
}
</script>
</head>
<body>
<input type="button" value="get data" onclick="GetData()" />
<div id="res">dsdf</div>
</body>
</html>
node code:
The code copy is as follows:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost"});
res.write("Hello!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("Start listening...");
});
First enable the service: node server.js
Start a static page:
Click the button "Get Data"
If you think it's too troublesome to configure a server environment, you can borrow the advantages of the editor to do it.
For example, I am using webstrom 8.0;
When I start the page, this path is displayed in the browser:
The port is 63342. At this time, our team's code has been modified:
Node's server.js code:
The code copy is as follows:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
//res.setHeader();
res.write("Hello!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("Start listening...");
});
Modified the value of "Access-Control-Allow-Origin".
Re-run the demo and you will find that the same effect will be achieved
You can also set the response header separately through res.seetHeader.
You can change the above res.writeHead() to res.setHeader();
The code copy is as follows:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
//res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
res.setHeader("Content-Type","text/plain");
res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
res.write("Hello!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("Start listening...");
});
Careful students may have discovered that when using the setHeader method, a status code is missing, such as 200. So when we use res.setHeader, how do we set the status code? Let's go to the code later.
Ajax returns on the server side date:
We can delete this field when returning on the server side.
Set res.sendData=false;
The code copy is as follows:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
//res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
res.statusCode=200;
res.sendDate=false;
res.setHeader("Content-Type","text/plain");
res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
res.write("Hello!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("Start listening...");
});
The status code is set and the date information is blocked.
res.getHeader(name) gets the response header information we set
res.removeHeader(name); deletes our header information. It must be called when the data is sent in our write method.
The res.headersSent property is a boolean value. When the response header has been sent, the property value is true; when the response header has not been sent, the property value is false.
Server.js code:
The code copy is as follows:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
if(res.headersSent)
console.log("Response header sent");
else
console.log("Response header not sent");
res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
if(res.headersSent)
console.log("Response header sent");
else
console.log("Response header not sent");
res.write("Hello!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("Start listening...");
});
Run the demo to view the results:
The res.write() method sends data to the client, and it actually has a return value.
When the amount of data sent to the client is small or the network speed is fast, node always sends the data directly to the kernel cache area of the operating system, and then fetches the data from the kernel cache area and sends it to the other party. At this time, write will return true.
When the network speed is slow or the amount of data is large, the http server will not necessarily send the data to the client immediately. The node will cache the data in memory and send the data in memory to the other party through the operating system kernel when the other party can accept the data. At this time, write returns false.
You can set the content of test.txt to test the results.
A simple node+ajax effect is realized. Isn’t it very simple? Of course, if we want to create more complex functions, we still need to learn further, and we will take the initiative to update them in the future.