HTTP and Ajax in-depth disclosure, do not use Ajax to implement page no refresh

What is the principle of Ajax?

is actually initiating an HTTP request, and since it is initiating an HTTP request, we can achieve the same effect without using Ajax as long as we can implement an HTTP request.

There are many ways to initiate HTTP requests on the front end, such as the src of the script tag and the src,css background image of the image, and so on.

Case 1: Page no refresh via HTTP status code 204

Here is a small case to implement a page without refreshing voting function.

Html:

<div id= "box" >
<p>0</p>
<a href= "http://127.0.0.1:3000" > Voting </a>
</div>

Nodejs

var http = require (' http ');
Http.createserver (function (req, res) {
Res.writehead (204);
}). Listen (3000);

When we click on the poll to send an HTTP request, but the page does not jump, mainly using the HTTP204 status code implementation.

204: I have received, but I have no data to return to you, please do not refresh the page. Do not jump to a new page.

Case 2: Using the image SRC implementation

Html:

<div id= "box" >
<p>0</p>
<a href= "javascript:gethttp (); > Voting </a>
</div>

<script>
function Gethttp () {
var img = new Image ();
IMG.SRC = ' http://127.0.0.1:3000 ';
}
</script>

Nodejs

var http = require (' http ');
Http.createserver (function (req, res) {
Res.writehead (200,{' content-type ': ' text/html ');
Res.end (' OK ');
}). Listen (3000);

If we need to send data we can add parameters to the SRC, which is exactly the same as the Ajax get method.

Through script tags and CSS to achieve, and here the picture implementation of a similar way here is no longer demonstrated.

However, there are a few of the above features that can only send data to the server, but the client cannot receive the data returned by the server, and can not use the Post method, so although the previous method is possible, but the use of the scene is relatively small.

Here's another way to solve the problem above.

Use IFRAME tags to implement page no refresh.

Html:

<div id= "box" >
<p>0</p>
<a href= "http://127.0.0.1:3000" target= "tou" > Voting </a>
</div>
<iframe name= "tou" frameborder= "0" ></iframe>

Nodejs

var http = require (' http ');
Http.createserver (function (req, res) {
Res.writehead (200,{' content-type ': ' text/html ');
Res.end (' OK ');
}). Listen (3000);

In fact, this way is refreshed, but the content of the framework of the IFRAME is refreshed, all of us have the opportunity to take advantage of it, we just need to set the IFRAME's wide height frame to 0.

You may ask, although you can now return data, but how to operate it, you can actually return a section of JS code to manipulate the DOM.

Html:

<div id= "box" >
<p id= "Content" >0</p>
<a href= "HTTP://127.0.0.1:3000/1" target= "tou" > Voting </a>
</div>
<iframe name= "tou" frameborder= "0" ></iframe>

Nodejs

var http = require (' http ');
var fs = require ("FS");

var count = 0;
Http.createserver (function (req, res) {
if (req.url=== "/favicon.ico") return;
if (req.url=== '/index.html ') {
Res.writehead (200,{' content-type ': ' text/html ');
Res.end ((Fs.readfilesync (' index.html ')). toString ());
}else{

count++;
Res.writehead (200,{' content-type ': ' text/html ');

　　　　var jscode = ' <script> ';
Jscode + = ' parent.document.getElementById ("content"). InnerHTML = ' + count;
Jscode + = ' </script> ';
Res.end (Jscode);
}

}). Listen (3000);

The core code is bold, that is, to return a section of JS code, through the parent to manipulate the previous process of the IFRAME.

We then use the IFRAME + form to implement the post submission.

Html:

<form id= "Form" action= "/1" target= "Reg" >
Name: <input type= "Text" >
Age: <input type= "Text" >
<input type= "Submit" value= "Submission" >
</form>
<iframe name= "Reg" frameborder= "0" ></iframe>

Nodejs

var http = require (' http ');
var fs = require ("FS");

Http.createserver (function (req, res) {
if (req.url=== "/favicon.ico") return;
if (req.url=== '/index.html ') {
Res.writehead (200,{' content-type ': ' text/html ');
Res.end ((Fs.readfilesync (' index.html ')). toString ());
}else{

Res.writehead (200,{' content-type ': ' text/html ');

　　　　var jscode = ' <script> ';
Jscode + = ' Parent.document.body.removeChild (parent.document.getElementById ("form")); Parent.document.body.innerhtml= "Registered successfully! ";‘;
Jscode + = ' </script> ';
Res.end (Jscode);
}

}). Listen (3000);

OK, here's the case.

From these cases, it can be seen that the so-called Ajax is to initiate an HTTP request, of course, the above way and Ajax is somewhat different, Ajax internal still do some other things, such as we receive data, the client is not refreshed, And the Ajax we're simulating actually has a refresh (except using SRC), but it's just a little bit of a trick. So in the actual development process, it is better to use Ajax, because the client and the server inside or do a lot of things, and these we can not be simulated.

HTTP and Ajax in-depth disclosure, do not use Ajax to implement page no refresh