Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the front and back end interaction mode of web". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the front and back end interaction mode of web".

As we know, a complete IT project is completed by many different positions, including UI design, front-end development, back-end development, testing, and so on. The front-end and back-end need to be connected through technical interaction, so what are the front-and back-end interaction technologies of web?

There are only two things that front-end developers need to do: 1. Create interface structure 2. Data interaction

In fact, data interaction can be divided into two types: 1. To the background technology II. The data from the background

What is the purpose of data interaction?

Take: render the data to the dom document to: after submitting the data to the background, the backend will continue to return one of our data, get the data, and then render the page.

1. Using cookie

For example, the front desk stores cookie by logging in

The background uses req.cookies () to obtain the stored cookie information

two。 Using Ajax

The most commonly used front-and back-end interactions before learning NodeJS use the encapsulated $.ajax, $.post, and $.getJSON in ajax and JQuery to create a XMLHttpRequest object for front-and-back interaction.

After learning NodeJS, we also use the _ http built by the $http service to complete get, post and jsonp for front-end interaction.

3. Jsonp

Jsonp combines the front and back end with cross-domain mode. Because the data requested by the front end needs to be used in the callback function, the back end has to put the data back into the callback function.

Does jsonp belong to AJAX? Ajax refers to the technology of asynchronous data exchange through the use of xmlhttpquest objects. Jsonp is obtained by relying on the scriptsrc attribute and does not belong to ajax.

4. Server rendering

In fact, the content requested by the browser can be processed by the back end, render the data directly for a while, and then give it to the browser.

Implement server rendering in php:

You can put html code in the php language file, and accessing the php file is equivalent to accessing the corresponding html file, because in the php file, you can write some php code to render the data.

Implement server rendering in Node:

Using the template engine, node passes data to the template when it renders the template, so that you can use specific syntax to render dom in the template, for example: ejs,jade

Note: the routes in express are divided by the request path, and the previous self-built route is divided according to the request type.

5. WebSocket and Socket.io

Two programs on the Internet exchange data through a two-way communication connection, and one end of the connection becomes a scoket.

By establishing a two-way socket connection, the client and the server can communicate directly in both directions.

A simple small case: the idea of socket.io chat

1. Server-side established server, var wss=require ("socket.io") (server)

two。 Create a client connection socket var wsc = io.connect ('ws://')

3. Client connection wsc.on ("connect", function (e) {})

4. The server receives the client connection message wss.on ("connection", function (socket) {})

5. Wsc.on ("meaasge", function (msg) {}) is triggered when the client sends a message

6. The client receives the server-side send message wsc.on ("message", function (e) {})

Thank you for reading, the above is the content of "what is the interaction between the front and back of web". After the study of this article, I believe you have a deeper understanding of what the interaction between the front and rear of web is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.