Front and back end interaction flow

A server can start multiple services, which are distinguished by port numbers, but cannot start two services with the same port number at the same time. A service has multiple interfaces. The workflow is differentiated by URL address: The front-end sends requests, and the server responds

How many ways can the front end send a request to the server

1. Plan 1: Ajax 2. Plan 2: JSONP 3

How does Ajax send requests

Open Send and other apis are called based on XMLHttpRequest instance object to monitor the interaction process of event behavior processing

How does the browser send the request? 1

  • 404 Not found address error or not found

2. Connect the interface according to the interface requirements

  • Requirement 1: Specify get Post pull DELETE
  • Requirement 2; Request parameters Are in different data formats, such as JSON format, JSON string, and JSON object

After all the above is met: the interface is connected to the server to process the request — the work of the server developer

Browser how to receive the response 1. How to accept 1.1 response content, all in the XMLHttpRequest object in 1.2 through listening XMLHttpRequest. Respond to events 】 【 onreadystatechange within 1.3 in response to an event handler: Handle the response data – XMLHttpRequest. Status to obtain the response data – XMLHttpRequest. ReadyStatus retrieval status – XMLHttpRequest. Respose/resposeTest access to data in the response body 】 【 (JSON number or XML) 2. How to deal with it? 2.1 According to DOM structure: analyze the data structure required by the page 2.2 Add and process the response data to get the corresponding page [data structure] 2.3 Complete DYNAMIC JS interaction through event processing 3. Note that the interaction is an asynchronous event handler. Ajax request response processing needs to wait for the response to succeed. In the process;

  • 1 DOM processing is written inside the response handler
  • 2: either process the DOM in the callback function, and pass in the argument response data in the response handler.
  • The response data is received in the body of the callback function, and dom processing is performed

What do I do after receiving the response

How many ways ajax can send a request

get post

How to use ajax

Ajax details

  • Onprogress: May be called multiple times during the request and can be used to monitor file upload progress.

  • Onerror: This event handler is launched when an error occurs during the request.

  • Onabort: Request interruption triggers this event handler.

  • Onload: This event handler is triggered when the request is successfully executed.

  • Onloadstart: This event handler is triggered when the request starts.

  • Onloadend: This event handler is triggered when the request completes, and onload is called only if the request succeeds.

  • Onreadystatechange: Specifies the event handling handle when the readyState property changes

  • Ontimeout This property is the event handler for which the request has timed out.

  • ReadyState Read-only property that represents the state in the entire asynchronous request and has five possible values.

  • Response Read-only property that returns the content of the server’s response. The client can specify the type of the response content via xhr.responseType.

  • ResponseText read-only property, which is a special case of xhr.response and returns a response of type text. If XHR is specified.

  • ResponseType defined response content type (namely the XHR. Response), its value is enumerated types, respectively is: the arraybuffer, blob, document, json, the text. If the value passed is an empty string, the default is text.

  • ResponseURL returns the serialized responseURL.

  • ResponseXML returns the response content converted to XML format, or null in the following cases.

    • Request not successful
    • The xhr.send() method has not been executed
    • The response content cannot be converted to XML or HTML

  • Status Returns the status code of the response. The status code returned after the request is successful is 200. For a list of possible values of the status code, click status Code List.

  • Timeout Specifies the timeout milliseconds of a request. If the request duration exceeds the response milliseconds, the request is automatically interrupted. In Internet Explorer, this property needs to be set after the open() method and before the send() method.

  • Ontimeout This property is the event handler for which the request has timed out.

Communication problems

I think you should know the stages of ajax interaction in the following pages. What are they

  • [0] Request preparation before open()
  • [1] The client triggers onreadyStatechange after sending the request open() ~ send ()
  • [2] Server processing (What Java development does)
  • [3] The response is being issued (if the response is Java development work)
  • [4] The response was successful. The browser receives the response and the client triggers onreadyStatechange

0 1 4 Front-end development 2 3 Server development

Note: The above status code can be obtained from the XHR object xhr.redyState

The HTTP status code represents the communication in

  • 200 Interaction succeeded
  • 400 front-end bug
  • 404 address error 85% or no response 15%
  • 500 Server error

Data-driven view

1: Ensure that the data is obtained

  • See if the request is sent from Network. See if there is a response message in Preview

Common error without data

  • 404 request not sent, this is a front-end problem; Incorrect URL
  • Cross-domain interception. The solution, JSOP, is to implement the same origin policy and get the server to give you a request header
  • If the server does not receive the request, there must be a front-end problem. Possible problem: Yes
  • Url error
  • Parameter error, data format problem (1.form-data 2.x-www.form-urlencoded 3. File format data)
  • Incorrect request mode
  • Request header problem, rare
  • Solution: Find the source of these things; Check one by one; Pour the wrong

The request is sent; But there is no data response

  • The error must occur on the server side. Find a server developer; Let him sort it out for you

1: Check whether the response event handler function is executed – output content in the event handler function at will 2: check whether the number can be obtained in the browser – directly output data to view 3: check whether the data processing is determined; Converting JSON numbers – Viewing output data 4: After the request is successful. Business processing of data; Whether the function is executed – depends on whether the request succeeds or fails. 5

  • Related to js data handling if for DOM

The above experienced can debug interrupt points

Encounter do not understand the error; Baidu query Google query

Interview questions

Ajax request mechanism

Three handshakes and four waves

Ajax Request Principles

Three-way handshake and four-way wave handling based on the xmlHttpRequest attribute