Ajax technical details

  ajax, http, javascript

Ajax status code,xhr.readyState

0: unsent not sent, Ajax object created, default value 0
1: Opened Executionxhr.open
2: headers _ received the current ajax request has been sent and the corresponding header information returned by the server side has been received
3: Loading Response Body Content Returning
4: Done’s corresponding subject content has been returned to the client

Http network status code

HTTP network status codeTo record the status of the information returned by the current serverxhr.status

200: Identify Success Status

In order to3The beginning also indicates success, but the server side has done special treatment

301: Permanent Transfer (permanent redirect), Applied to Domain Name Transfer
302: Temporary Transfer (Temporary Redirection, 307 in the new version of Http is Temporary Redirection) for server load balancing
304: Obtain data from the browser cache and cache infrequently updated data into the browser

In order to4First, identify the failure status, mostly at the client

400: request parameter error
401: No access
404: Access address does not exist

In order to5First, identify the failure status, mostly on the server side

500: internal serverrerror unknown server error
503：Service Unavailable Server Overloaded

Ajax Common Attributes and Methods

Topic: How many methods are supported in Ajax?

state

  1. readyState: Stores the current Ajax status code

  2. response/responseText/responseXML: Receive the corresponding subject content returned by the server

    • responseTextMost commonly, the received results are in string format (the data returned by the general server are JSON format strings)
    • responseXMLReceiving XML document data
  3. status: Record the HTTP status code returned by the server side
  4. statusText: Description of the return status code
  5. timeout: Sets the timeout for the current Ajax request

Method

  1. abort(): Forcibly Interrupt Ajax Requests
  2. getAllResponseHeaders(): Get all response header information (the result is string text)
  3. getResponseHeader(key): Gets the corresponding header information for the specified attribute name
  4. open(): Opens a URL address
  5. overrideMimeType(): Overwrite MIME Type of Data
  6. send(): Send Ajax Request
  7. setRequestHeader(key,value): Set request header information

Events

  1. onabort(): When Ajax is interrupted, the request triggers this event
  2. onreadystatechange: Ajax state changes, triggering this event
  3. ontimeout: Triggers this event when the Ajax request times out

JS encoding and decoding

(unencrypted) normal encoding and decoding

  1. escape/unescape: Encode and decode Chinese characters (JS support only)
  2. encodeURI/decodeURI: All programming languages are supported
  3. encodeURIComponent/decodeURIComponent

Encoding and decoding

URL question mark pass parameter,encodeURISome special characters cannot be encoded, only can be usedencodeURLComponentTo deal with

  1. Reversible encryption
  2. Irreversible encryption (based on MD5 encryption, the result of MD5 encryption may be encrypted twice)

Synchronization and Asynchronous of Ajax

Ajax Task: Send Request to Receive Corresponding Subject Content (Full HTTP Transaction)

  • xhr.send(): Task End
  • xhr.readyState===4: Task End

Encapsulation of Ajax Class Library

  • url: request API address
  • method: request method GET/POST
  • dataTpye: Presets the result type and does not affect the return of the server (the server normally returns JSON format strings). If the preset isjsonThe class library converts the string returned by the server into a json object
  • cache: Set whether to clear the cache, valid only for GET series requests, default isTRUEDo not clear cache, manually set toFALSE, JQ class library appends a random number at the end of the request URL to clear the cache
  • data: Pass some information to the server through DATA (GET request splices the content in DATA at the end of URL and passes it to the server through greeting and parameter passing, POST request passes the content to the server in the request body) (DATA can be set in two formats: string and object)
  • async: Set synchronous or asynchronous, the default is TRUE, which means asynchronous and FALSE is synchronous.
  • success: Request the callback function to be executed successfully and pass the obtained result to the callback function as an argument
  • error: request error triggers callback function
  • complete: done, triggering callback function