This is the fifth day of my participation in Gwen Challenge

Web knowledge is also a common interview question, and it’s important to make sure that the candidate only uses the $.ajax() method, or really understands how web requests work. Question list

  1. Get and POST

  2. Whether websocket understands

  3. What are the advantages of HTTP 2.0 over HTTP 1.x?

  4. What is the Ajax return value of JQ?

  5. Tell me what you know about HTTP status codes

  6. The principle of the json

  7. What are the ways to request resources across domains? What are their strengths and weaknesses?

  8. The difference between XML and JSON?

1. Differences between GET and POST

This seems like such a simple question that you can answer more than one, but interviewers often expect you to answer more and deeper questions. This article is write very detailed, everyone can look at – www.zhihu.com/question/28… Because the parameters of the GET method are placed at the request URL, it has the following obvious differences from POST:

  • GET requests can be bookmarked or saved in browser history; POST cannot
  • GET requests can be cached by the browser, POST can’t
  • GET requests receive URL length limits, so data length is also limited, POST is not
  • GET requests can only transfer ASCII characters, while POST is not limited to this and can also transfer binary data

There are also semantic differences between the two methods:

  • GET: obtains resources from a specified server
  • POST represents submitting data to be processed to a specified resource

The more advanced answer GET produces a TCP packet; POST generates two TCP packets. For GET requests, the browser sends both HTTP headers and data, and the server responds with 200 (return data). For POST, the browser sends a header, the server responds with 100 continue, the browser sends data, and the server responds with 200 OK (returns data). In other words, GET only needs to make one trip to deliver the goods, whereas POST has to make two trips. In the first trip, it goes to the server and says, “Hey, I’m going to deliver the goods later, you can open the door and meet me.” Then it goes back and delivers the goods. But here’s what needs a little more explanation:

  • According to research, under the condition of good network environment, the time difference between sending a packet and sending two packets can be ignored basically. In the case of poor network environment, the TCP of two packets has great advantages in verifying the integrity of packets.
  • Not all browsers send packages twice in POST, Firefox only sends them once.

2. Is websocket aware?

Typically, interviewers will ask you if you know anything about [B], and the typical answer is to cover the following points:

  • Do you know what it is?
  • Do you know what it is used for?
  • What are its advantages and disadvantages compared to an existing technology before it?

WebSocket, like HTTP, is an application-layer protocol. The most important function is to realize the full-duplex communication between the client and the server. When the server data changes, the client can be notified in the first time. In addition, it differs from THE HTTP protocol in other ways:

  • HTTP can only be initiated by the client, and webSocket is two-way.
  • WebSocket transmits packets that are relatively small compared to HTTP and are suitable for mobile use
  • Resources can be shared across domains without origin restrictions

For more details, go to see Ruan Yifeng’s tutorial – WebSocket tutorial – Ruan Yifeng’s weblog

3. What are the advantages of HTTP 2.0 over HTTP 1.x?

Advantages (What are the major improvements from HTTP/2.0 compared to 1.0?) :

  • Multiplexing: Multiplexing allows multiple request-response messages to be sent simultaneously over a single HTTP/2 connection. In the ERA of HTTP 1.x, the number of HTTP requests that a browser can send to a domain name is limited. When the number of HTTP requests exceeds the limit, the requests will be blocked, which greatly reduces the user experience. HTTP/2 multiplexing allows multiple request-response messages to be sent simultaneously over a single HTTP/2 connection.
  • Binary framing: HTTP/2 adds a binary framing layer between the application layer and the transport layer, ultimately allowing multiple data streams to share a single connection and use TCP connections more efficiently. Thus, the connection pressure of the server is reduced, the memory consumption is reduced, and the network throughput is increased.
  • Header compression: HTTP/2 introduces the HPACK algorithm for header compression, which greatly reduces the number of bytes sent.

4. What is the ajax return value of jQuery?

Many companies, especially those in finance or data analytics, have web apps that do a lot of data interaction with servers, so their interviewers often value a candidate’s understanding of web requests and asynchronous programming. Ajax in jQuery is so commonly used that most people take it for granted and ignore its underlying logic and implementation principles. The.ajax() method returns a delayed object, i.e. An instance of Deferred. So you can use the $.ajax() method as follows

/ / use the done () and fail () method to handle the ajax request $. Ajax ({url: "http://mydomain.com/memberInfo/get", async: False}).done(responseData =>{console. log(responseData)}).fail(()=>{console.error(' error! ')}) //$.get() You can also use then () callback $. Get (" http://mydomain.com/memberInfo/get "). Then (responseData = > {the console. The log (responseData); })Copy the code

If you want both requests to complete before processing, you can do the following:

var memberDef = $.get("http://mydomain.com/memberInfo/get"); var orderDef = $.get("http://mydomain.com/orderInfo/get"); $.when(memberDef, orderDef).then(( [memberInfo], [orderInfo])=>{console.log(' user info ',memberInfo); Console. log(' order information ',orderInfo); })Copy the code

To learn more about delayed objects, visit Yifeng Ruan’s blog. In addition to the above question, you can also ask the following questions, which will not be answered here:

  • The difference between asynchronous and synchronous requests
  • There are several data formats for Ajax requests. How do I format the data
  • How do I avoid browsers caching GET requests so that every GET request gets the latest data
  • And so on…

5. Say what you know about HTTP status codes

I’ve seen an interviewer say that HTTP status codes shouldn’t be a concern for front-end development. But I’ve always felt that a front-end engineer’s knowledge of HTTP status codes is a proxy for how many mines he’s hit, and that an engineer with a deep knowledge of HTTP status codes can quickly locate problems.

The following are some basic ideas about HTTP status codes:

  • A status code starting with 1xx: 1 indicates a temporary response
  • 2xx: The request succeeded
  • 3xx: The request was redirected
  • 4xx: Request error, indicating that the request sent by the client is faulty
  • 5xx: server error, indicating that the server has an error in processing the request

If you know the pattern, when you see an error, you probably know if the problem is the pot on the back or the pot on the front. Besides, several common HTTP status code (if they are interested in understanding in detail or to find yourself, online a lot (tools.jb51.net/table/http_… * 301: Moved Permanently the client requested the document elsewhere, and the new URL is given in the location header * 304: The Not Modified client has a cached document and makes a conditional request (typically by providing an if-Modified-since header to indicate that the client only wants to update the document after a specified date). The server tells the client that the previously cached document can still be used. * 400: A syntax error occurs in the Bad Request. * 401: Unauthorized access is denied. Clients attempt to access the password-protected page without authorization. The server understands the client’s request, but refuses to process it. Usually due to server file or directory permission Settings. * 404: Not Found The resource at the specified location cannot be Found. * 405: Method Not Allowed Request methods (such as GET, POST, and PUT) do Not apply to the specified resource. HTTP methods used to access the resource are Not Allowed. * 500: Internal Server Error The Server encountered an unexpected condition and could not complete the client request. * 502: The Bad Gateway server received an invalid response when it acted as the NMS or agent. * 503: Service Unavailable The server cannot respond due to maintenance or overload. * 504: Gateway Timeout Indicates that the Gateway has timed out. The server acting as the proxy or Gateway cannot respond in time.

6.JSONP Principle JSONP is a method for sharing resources across domains.

JSONP, which stands for JSON with padding, is the JSON included in a function call, like this:

callback({“name”: “Chong”}); JSONP is via dynamic, document.body.firstChild); So to summarize the implementation of JSONP: 1. Dynamically insert one into the current page

JSONP can be cross-domain based on the following conditions: 1. Browser request scripts are not restricted by the same origin rule 2.

Note that JSONP requires server coordination because JSONP returns a piece of code. 7. What are the ways to request resources across domains? What are their strengths and weaknesses? Common cross-domain approaches are: * JSONP * Image Ping * CORS * Web Sockets

One by one: JSONP benefits: easy to use, good browser support. Disadvantages: 1. JSONP loads code from other domains and executes, so there are many security risks that can’t be prevented if other servers insert malicious code into their responses. 2. JSONP has difficulty determining a request failure. In HTML 5 to

Image Ping This refers to sending a request across domains by requesting a picture. Advantages: Simple, good compatibility, does not need the server to do specific processing. Disadvantages: 1. One-way communication is available, that is, the client sends signals to the server and cannot receive the reply from the server. 2. Only GET requests can be sent. 3. The request may be cached by the browser and cannot be sent.

CORSCORS is short for Cross-Origin Resource Sharing, which means cross-domain Resource Sharing. The basic idea of CORS is to use custom HTTP headers to let the browser communicate with the server to determine whether a request or response should succeed or fail. Advantages: Powerful features disadvantages: 1. Need to cooperate with the server to achieve (in fact, very simple ~) 2.

WebSocket is one of those technologies that you probably haven’t used and should hear about. Advantages: 1. Duplex communication: both the browser and the server can initiate requests. 2

Disadvantages: 1. Complex implementation, including client and server 2. Browser support issues

There are many other cross-domain approaches, but I won’t mention them here. XML is a subset of the standard General Markup Language (SGML), and tag languages such as HTML have the advantage of being easy to understand. Pros: Easy to get started, quick for non-developers (product managers love it). Disadvantages: 1. XML has a large amount of redundant data, which takes up more space during transmission. Parsing XML on both the client and server sides is cumbersome and requires a lot of code

JSON(JavaScript Object Notation) is a lightweight data interchange format. The emphasis is on lightness, and the structure is similar to Object in JavaScript. Advantages: 1. Small amount of data, facilitating network transmission 2

Cons: Slightly complex structure, not easy for non-developers to use (beginners need to go to the official website to study)

Welcome to supplement