If you're just starting to learn Web Development , You might think you know how the Internet works —— Basically, at least .
…… But when you try to explain how a simple website works , The mind is blank .IP What does address mean ?“ client —— Server side ” How does it work ?
in fact , In today's world of powerful development frameworks , For some beginners, it's easy to ignore the right Web Basic knowledge of .
That's true. , I used to be like this , There's nothing to be ashamed of .Web It's complicated , Only when you start a career as a back-end Engineer , You will realize the importance of these foundations .( If you want to write something that works Web Program .)
therefore , I put the basic knowledge that everyone should master into a four part guide article , Whether you are in Web Develop into a career , Or are you just interested in learning , You can have a look :
The first part :Web How it works
The second part :Web Program structure
The third part :HTTP and REST
Part four : Example code for interaction between client and server

A basic web search

Let's start with what we've all done : You type in the address bar of your browser “www.github.com” after , The page will load in the browser .
This operation looks very simple , A lot of amazing things happened behind it , Let's find out now .

Web The definition of components

understand Web It's hard , Because it contains a lot of terms .
Unfortunately , Some of the terms determine whether you can understand the following article .
If you want to know the secret of the World Wide Web , Here are some important terms you have to understand :
client : It's one running on a computer , Programs for connecting to the Internet , Like Google browser or Firefox . Its main role is to accept user input , And according to the user input to request another called web Server computer . Although we usually use browsers to access web pages , But you can use your entire computer as a client - In the server model “ client ”. Each client computer has a unique address ——IP Address , So that other computers can use IP Address to identify it .
The server : Machines that connect to the Internet , It also has a IP Address . A server is waiting for other machines ( For example, the client ) Request , And respond to them . It's not like you have IP The address of the computer ( For example, the client ), The server is installed and running special server software , These programs tell the server how to respond to requests from your browser .Web The main function of the server is storage 、 Processing and delivering web pages to clients . There are many types of servers , such as Web The server 、 database server 、 File servers and application servers and so on .( In this article , We are talking about Web The server .)
IP Address : Internet protocol address , stay TCP/IP In the network , It's a device ( The computer 、 The server 、 The printer 、 Router, etc ) The digital ID of . Every computer on the Internet has a IP Address , It's used to identify communications with other computers .IP The address is made up of four groups of numbers , Strings separated by dots ( such as This is also called “ Logical address ”. In order to locate the device in the network , adopt TCP/IP Protocol software puts logic IP Address to a physical address , This physical address is burned in your hardware .
ISP: Internet service provider .ISP It's a middleman between the client and the server . For a typical family ,ISP Usually “ Cable company ”. When your browser accepts www.github.com The request of , It doesn't know where to look www.github.com Of , So this is ISP The job of ,ISP adopt DNS Find the site you're trying to visit IP Address .
DNS: The domain name system .DNS It's a distributed database , It is used to follow up the computer domain names on the Internet and their corresponding IP Address record . Don't worry about it at the moment “ Distributed database ” How it works , As long as you know DNS The existence of makes the user input www.github.com You can use a IP Address substitution .
domain name : Used to identify one or more IP Address . Users use domain names ( such as www.github.com) Visit a website on the Internet . But you type in the domain name in the browser ,DNS Find the corresponding IP Address .
TCP/IP: Transmission control protocol / Internet Interconnection Protocol .TCP/IP Is the most widely used communication protocol .“ agreement ” It's just a set of rules, a standard for what to do ,TCP/IP It's used as a standard protocol for transferring data between networks .
Port number : It's a 16 The integer number of bits , It is used to identify the specific port on the server , The port is usually connected to IP Address related . It's used as a way to identify specific processes on the server , Forward the network request to the server .
host : Computers connected to the Internet —— It enables the client to 、 Server or any kind of device . Every host has a unique IP Address . take www.google.com For this website , The host can be Web The server , Used to provide web services to the website . Hosts and servers are often confused , But notice that they are two different things . A server is one of the hosts —— They are a special kind of machine . On the other hand , One host may involve the whole organization , The organization provides a hosting service to maintain multiple Web The server . In this sense , You can run a service on a single host .
HTTP: Hypertext transfer protocol . The protocol is browser and Web The server is used for communication between the Internet .
URL: Uniform resource locator .URL It's used to identify a particular Web resources . take https://github.com/someone For this simple example , This URL Specifies the protocol to be used (“https”), Host name (github.com) And file name ( Someone's profile page ). A user can take this URL, adopt HTTP From a domain name to github Get this web resource on the host of .

The journey from code to web page

Now we have a certain understanding of the main terms in this journey , Let's go through github Search to see , How do we enter a URL To the corresponding page :
1、 Enter... In your browser URL
2、 The browser parses this URL The information contained . This URL Contains the protocol used (“https”), Host name (github.com) And resources (“/”). In this case ,“.com” There's nothing behind to point to a specific resource , So the browser knows to just retrieve the home page .
3、 Browser and ISP signal communication , adopt DNS Look up the hostname as www.github.com Of Web Server corresponding to IP Address .DNS The service will first contact the root domain name server , The server will look for https://www.github.com, And get “.com” The domain name server of the top-level domain name corresponds to IP Address , And then put this IP The address is returned to you DNS service .DNS The service is right “.com” Do extended queries https://www.github.com Corresponding IP Address .
4、 once ISP Received the corresponding IP Address , It will put this IP Send the address to your browser .
5、 Your browser will take this IP Address and URL Port number in (HTTP The default port number of the protocol is 80,HTTPS The default port number is 443), Open one TCP socket connection . At this time , Your browser is connected to the server .
6、 Your browser sends a HTTP Request to Web The server , To get www.github.com The home page of .
7、Web Server receives request , And find HTML page . If the page exists , The Web The server is ready to respond and send it back to your browser . If the server can't find the page you requested , It will send a 404 Error message ,404 Express “ Page not found ”
8、 What your browser receives HTML Scan the page from beginning to end , And look for other related resources , Such as images 、CSS file 、JavaScript Script files and so on .
9、 Other resources involved in the web page , The server will repeat the above steps to initiate HTTP Request each corresponding resource .
10、 Once the browser is loaded HTML All the resources involved , The page will eventually load into the browser form , And close the connection to the server .

Across the abyss of the Internet

One thing to note is , When you make a request , How the information you requested was transmitted . When you make a request , This information is broken down into many small pieces , We call it a bag , Each bag contains TCP Head , This header contains the port numbers of the source and destination hosts , as well as IP The header contains the IP Address . And then this packet goes over Ethernet 、WiFi And cellular network transmission , And allow transmission on any path , And get as many jumps as you can when you get to your final destination .
( In fact, we don't care how the bag gets to its destination , Our concern is that these packets can be safely delivered to the destination host ), Once the packets arrive at the destination host , They're going to come together again , Transmit as a whole .
So how do all these packages know how to get to the destination host , Without losing any packets ?
The answer is TCP/IP.
TCP/IP It's two parts , Its function is to serve as a basic part of the Internet “ Control system ”.IP Internet protocol , Its main task is through each package of IP Head ( for example IP Address ) To send and find paths to other computers . The second part is transmission control protocol (TCP), Its task is to split information or split files into small packages , adopt TCP The header routes the packet to the corresponding application of the destination computer , If a packet is lost , Just resend , Once they all get to the other end , Just assemble them in the right order .

Draw the final picture

wait , The task is not finished yet . Now your browser has got all the information of the home page of the website (HTML、CSS、JavaScript、 Pictures, etc. ), It also takes a few steps to present these resources as human readable web pages .
Your browser has a rendering engine , It's responsible for showing content . The rendering engine accepts the content of all resources in small chunks , And then through HTML The parsing algorithm tells the browser how to parse these resources .
Once the parsing is complete , It generates a DOM A structural tree of elements ,DOM Represents the document object model , It's in HTML A convention on how to render all object locations in a document . Objects or nodes in each document , You can use scripting languages , Such as JavaScript, To operate them .
To build the DOM After tree , The style sheet will be parsed , To learn how to style each node . Use the information above , Browser traverses from top to bottom DOM node , And calculate the CSS style 、 Location 、 Coordinates and so on .
Once the browser gets DOM Nodes and their styles , It's finally ready to draw pages based on your screen . The final page is the same page you saw on the Internet before .
Web It's complicated , But you've learned the hard part
That's all Web A summary of , Lost ? We are all lost , But you've read this , You've learned the hard part . I've obviously skipped some details here , Show you the whole picture in an interesting way , But if you can keep up with the basic sequence outlined above , Filling in the details will be a piece of cake .
In the next section , We're going to deal with basic web Structure of the application .

( translate )Web How it works : to Web More articles on developing beginner's primer

  1. Web How the server works

    Web How the server works Web Overview of server working principle A lot of times we want to know ,web Container or web The server ( such as Tomcat perhaps jboss) How it works ? How they deal with people from all over the world http Requested ? They did it behind the scenes ...

  2. Web Service How it works

    Web Service Basic concepts Web Service Also called XML Web Service WebService It's one that can receive from Internet perhaps Intranet Requests passed from other systems on , Lightweight ...

  3. RDIFramework.NET ━ .NET Framework of rapid information system development ━ Workflow components Web Business platform

    RDIFramework.NET ━ .NET Framework of rapid information system development   Workflow components Web Business platform Take the first two : RDIFramework.NET ━ .NET Framework of rapid information system development ━ Workflow components ...

  4. ASP.NET Web Service How to work (2)

    ASP.NET Web Service How to work (2) [ date :2003-06-26] source :CSDN  author :sunnyzhao( translate ) [ typeface : Big in Small ] HTTP Once the pipeline is called .asmx Handle , then ...

  5. ASP.NET Web Service How to work (3)

    ASP.NET Web Service How to work (3) [ date :2003-06-26] source :CSDN  author :sunnyzhao( translate ) [ typeface : Big in Small ] In order to make .asmx The handle may be deserialized SOA ...

  6. ASP.NET Web Service How to work (1)

    ASP.NET Web Service How to work (1) [ date :2003-06-26] source :CSDN  author :sunnyzhao( translate ) [ typeface : Big in Small ] Summary ASP.NET Web ...

  7. solve Crystal Report XI R2 Can't be in 64 The operating system is working properly -web Program

    original text :[ original ] solve Crystal Report XI R2 Can't be in 64 The operating system is working properly -web Program I replaced my computer with a new one , The operating system has changed from the original 32 Bit windows 2003 R2 Upgrade to windows 2 ...

  8. JavaScript How it works :Web Workers The building blocks of + 5 There's a scene that uses them

    Abstract : understand Web Workers. original text :JavaScript How it works :Web Workers The building blocks of + 5 There's a scene that uses them author : The front end little wisdom Fundebug Reprint by authorization , The copyright belongs to the original author . this ...

  9. SpringMVC-DispatcherServlet Workflow and web.xml To configure

    Workflow : Web in , It's just requests and responses : stay SpringMVC in , The first stop of the request is DispatcherServlet, Acting as a front-end controller : DispatcherServlet One or more processor mappings will be queried ( ...

Random recommendation

  1. HTTP A more robust way to ensure that the password is not obtained under the protocol

    When it comes to http How to ensure the password security of user login under the protocol :     Xiaobai's first thought may be , When a user enters a password on the login page to log in , The foreground page encrypts the password entered by the user , Then use the encrypted password as http The request parameters are sent through the network ...

  2. blender 2.6 Shortcut key

    Right click   Choose A  deselect / Future generations Middle drag   rotate Middle scroll zoom in / narrow Shift+ Middle drag   translation Right up diagonal triangle area drag   Create new windows Shift+c Sight reset Num1 Front view Ctrl+Num1 Back view ...

  3. iOS:Git Distributed version controller system

    Git Use 1.Git brief introduction : Git Is an open source distributed version control system . And SVN.CVS comparison Distributed     There's no need for a central warehouse Git The version number of is a generated hash value , such as :bbaf6fb5060b4875b1 ...

  4. Codeforces Round#344

    A What do you mean , Give two sequences , Find an interval , Make the sum of the interval or of the first sequence and the interval or of the second sequence maximum , Output Max sum Obviously , Or operation will make the answer more operation bigger . therefore , Directly all or up , Adding up is the answer . = = hit cf It's automatic brain tonic ...

  5. JavaWeb And Java Servlet Complete tutorial ( turn )

    Servlet It's some compliance Java Servlet API Of Java class , these Java Class can respond to requests . Even though Servlet Can respond to any type of request , But the most widely used of them is response web A request from . Servle ...

  6. Java Motion blur

    Java Motion blur code Want to use Java Write a motion blur effect , But my level is limited , No resources have been found in China , therefore Google There's a document , To share it ! This code comes from http://www.jhlabs.com/ip ...

  7. SQLite Additional database (http://www.w3cschool.cc/sqlite/sqlite-attach-database.html)

    SQLite  Additional database Suppose such a situation , When multiple databases are available at the same time , You want to use any of them .SQLite Of  ATTACH DTABASE  Statement is used to select a specific database , After using the command , be-all ...

  8. Gould map SDK Use experience

    Here's the Gaud map Android SDK edition , The detailed version is as follows : 2D Map :v2.3.1 location :v1.3.0 Navigation :v1.1.1 The problems found are as follows , Some of them are maps BUG, Some things you need to be careful about : 1 ...

  9. PowerDesin hold name Copied to the Comment, hold Comment Copied to the Name

    PowerDesin hold name Copied to the Comment, hold Comment Copied to the Name Methods : PowerDesigner->Tools->Execute Commands->Edit/ ...

  10. php export

    // export // Put it in model Class of layer <?phpnamespace frontend\models; use yii\base\model; /** * @copyright (c) 2014 a ...