Front and back side interaction – Ajax

preface

• from<from>Submit, to theajax, the front and back end interactions become more flexible and comfortable, and then JQ’s$ajax 、axiosWe seem to be writing more and more easily
• But more and more, I forgetajaxWhat was it? What did he look like? I remember him, but I don’t really know what he is, exceptajax ，fetchWhat is it?
• This time, let me review the front and back side of the interaction
• If you want to see the Demo directly here ~ Demo
• Complete album Demo – album

ajax

What is the

• Ajax is “Asynchronous Javascript And XML”
• It is not a new language, but a new way of using existing technical standards
• It can exchange data with the server and update parts of a web page without reloading the entire page
• By exchanging a small amount of data with the server in the background,ajaxWeb pages can be asynchronously updated

The basic use

• Ajax is based on XMLHttpRequest objects
• Create an XMLHttpRequest object

let xhr = new XMLHttpRequest();
Copy the code

• Configure request Parameters
• Synchronization will cause code blocking, and the next operation can be carried out only after the data interaction is completed (success, timeout, failure, etc.). Users will feel sluggish, and the user experience is not good. Asynchronous is generally used (you can adjust the browser network speed to see the effect).

xhr.open('get'.'/checkUserName'.true); // True: asynchronous false: synchronous
Copy the code

• Receive returned value
• The return value will bexhr.responseTextpresent

xhr.onload = function () {
    console.log(this.responseText)
}
Copy the code

• Send to the server

xhr.send();
Copy the code

xhr.open(method, url, async)

• Specifies the configuration for sending requests to the server

  1. Method – The type of request; Get or post
  2. Url – location of the file on the server – address of the requested data
  3. Async – Whether asynchronous processing is adopted – true: synchronous; False: asynchronous

• Get and Post pay attention

  • Compared to POST, GET is simpler and faster, and works in most cases
  • However, use a POST request in the following cases:
    • Unable to use cached files (updating files or databases on the server)
    • Sending large amounts of data to the server (POST has no data limit)
    • POST is more stable and reliable than GET when sending user input that contains unknown characters

To send data

URL and the cords

1. queryString
   • The general form is? key=val
   • If there are multiple parameters, pass&Splicing, as in:? key1=val1&key2=val2
2. params
   • node - KoaRouterThe back-end is expressed as/get/:keyIn order to:said
   • The front end is appended to the URL/val 传
   • Such as multiple parameters, back end:/get/:key1/:key2; Front end:/val1/val2

• queryString 和 paramsPay attention to the point
  • Choose to usequeryStringorparamsIn fact, you can choose either route, depending on the route design
  • And it’s worth notingfunctionThe same as the passage of the
    • If it isparamsEven if the previous parameter is not needed, it needs to be occupied, for example:/val1/val2.val1Use placeholders when you don’t need them
    • whilequeryStringYou don’t have to say which parameter you want to pass, you just write the corresponding parameterkey=valIt is ok
  • paramsIf the dynamic route is configured without parameters, the request fails. For example:
  • The backend:get/:key
  • The front end must request:/get/valSuch as a direct request/getThe request fails
  • How the URL is transmitted to participate in the requestget 和 postRegardless, both request methods can carry parameters in the URL

xhr.send()

• Parameters can be carried when a request is sent to the server

• This method is only used for POST

• You need to set the HTTP header format when sending data

  • Request header type and<from>The form ofenctypeIs essentially the same
  1. text/plain– Does not write the body header format – tostringTo send
  2. application/x-www-form-urlencoded– Send with default encoding
     • It’s written like thisqueryStringBut no?In order to&To connect

  xhr.setRequestHeader('Content-Type'.'application/x-www-form-urlencoded');
  xhr.send(`key1=val1&key2=val2`); // -> { key1: 'val1', key2: 'val2' }
  Copy the code

  3. multipart/form-data– Send in binary code – Mostly used to send files and other contents:FromData
  4. application/json– tojsonEncode to send

  xhr.setRequestHeader('Content-Type'.'application/json');
  xhr.send(JSON.stringify({
      key1: 'val1'.key2: 'val2'
  }));
  // -> { key1: 'val1', key2: 'val2' }
  Copy the code

Return information -XMLHttpRequest.response

• Get return header information

  1. xhr.getAllResponseHeaders()– Get all the information
  2. xhr.getResponseHeader()– Obtain the specified information, for example:xhr.getResponseHeader('Content-Type')

• Get return text

  1. xhr.response– getArrayBuffer,Blob,Document,Object 或 DOMStringForm of response data
  2. xhr.responseText– Gets the response data in string form
  3. xhr.responseXML– Gets the response data in XML form
  4. xhr.responseURL– Get the serialized URL
     • Returns an empty string if the URL is empty
     • If the URL has an anchor, the content after the URL # is deleted
     • If the URL is redirected,responseURLThe value of will be the final URL after multiple redirects

• Note:

  • Retrieving the return body requires that the response header be properly written in the backgroundContent-Type
  • Such as the background response headerContent-TypeYou can rewrite the front end if it’s not written or if it’s written incorrectly

  xhr.overrideMimeType() / / rewrite the content-type
  Copy the code

FromData

• The FormData object is used to compile data into key-value pairs for useXMLHttpRequestTo send data
• It is mainly used to send form data, but can also be used to send keyed data independently of the form
• If the formenctypeAttribute is set tomultipart/form-data, forms will be usedsubmit()Method to send data, thus sending data in the same form

const form = new FormData();
// FormData object can add multiple keys, the first key is input[type=file] files[0]
form.append('img', file);
form.append('name'.'images');

const xhr = new XMLHttpRequest();
xhr.open('post'.'/upload'.true);
xhr.send(form); // Submit the text in send()
Copy the code

Ajax properties and event hooks

1. xhr.readyState(read only) – Returns an unsigned short integer (unsigned short) number representing the status code of the request

2. xhr.status– returnXMLHttpRequestNumeric status code in response

3. xhr.onreadystatechange– when thereadyStateTriggered when a property changes
   • This method should not be used for synchronized Requests objects
   • When aXMLHttpRequestThe request isabort()When the method is cancelled, its correspondingreadystatechangeThe event will not be triggered

const xhr = new XMLHttpRequest();
xhr.open('post'.'/demo'.true);
xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        console.log(this.responseText);
    }
}
xhr.send();
Copy the code

4. xhr.timeOut– Maximum request time (ms)
   • An unsigned long integer (unsigned long) digital
   • If this time is exceeded, the request is terminated automatically
5. XMLHttpRequestEventTarget.ontimeout– called when the request times outEventHandler
6. xhr.upload – Returns a XMLHttpRequestUploadObject that represents the progress of the upload

The sample

Demo

PS: I have been working recently ~ I will add other information when I am free