current position:Home>JS Foundation: 16. Ajax principle, advantages and disadvantages

JS Foundation: 16. Ajax principle, advantages and disadvantages

2021-08-27 09:42:43 Little tear night

ajax brief introduction

Ajax Stage name Ajax Full name Asynchronous JavaScript and XML ( Asynchronous JavaScript and XML) It means that without refreshing the page . Technology of exchanging data with server and updating some web pages .

working principle

Ajax It works by XmlHttpRequest Object to send asynchronous requests to the server , Get the data from the server , And then use javascript To operate DOM And update the page

XmlHttpRequest object

XMLHttpRequest Object is used to exchange data with the server in the background . Provide for the right to HTTP Full access to the protocol , Including making POST and HEAD Requests and ordinary GET The ability to ask .XMLHttpRequest You can return... Synchronously or asynchronously Web Response from the server , And can be in text or a DOM The form of a document returns the content .

XmlHttpRequest Object compatibility

  • All modern browsers support XMLHttpRequest object .xmlhttp=new XMLHttpRequest();
  • stay IE 5 and IE 6 in , Must use specific IE Of ActiveXObject() Constructors .xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

understand XmlHttpRequest Object properties

readyState

To identify the current XMLHttpRequest What state is the object in . When one XMLHttpRequest Creation time , The value of this property is from 0 Start , Until complete HTTP Respond to , This value increases to 4.

Status code describe
0 uninitialized : Request not initialized ( Calling open() Before )
1 start-up :open() Method called , however send() Method not called . The request has not been sent .
2 send out :Send() Method called ,HTTP Request sent to Web The server . No response received
3 receive : Request processing ( Partial request received )
4 complete : Request completed ( You can access the server response and use it )

responseText

The text content of the server response

responseXML

The server responds XML object , It can be resolved into DOM object

Status Status code

Common status codes describe
200 success
204 The request was successful and did not return
301 Permanent redirection
302 Temporary redirection
304 With cache
400 Parameter error
401 No authority
403 The request was refused
404 Did not find
500+ Server error

statusText

Text information of status code

onreadystatechange

Trigger for state change , Each state change triggers , Usually call a javascript function

understand XmlHttpRequest Object method

abort();

Stop the current request ,XmlHttpRequest State return 0 Return to uninitialized state

open(methods,url,asyncFlag,username,password)

methods Corresponding request method get、post、put etc. ; url Request server address ; asyncFlag Asynchronous or not ,true asynchronous ,false Sync ; username,password Optional parameters , Provide http Authenticated user name and password .

send()

send out HTTP request , Use pass to open() Method parameters , And the optional request body passed to the method .

getAllResponseHeaders()

Return all response header information , The return value is a string , Contains all response header information , Key value pair form .

getResponseHeader()

Returns the information of the response header of the specified key name

setRequestHeader

Set the request header information

Ajax Workflow

  1. establish XMLHttpRequest object .
  2. Set request mode and parameters .
  3. Send a request .
  4. Response processing .
// 1.  establish XMLHttpRequest object .
var xhr=null;  
if (window.XMLHttpRequest){
  //  compatible  IE7+, Firefox, Chrome, Opera, Safari 
  xhr=new XMLHttpRequest();  
} else{//  compatible  IE6, IE5 
  xhr=new ActiveXObject("Microsoft.XMLHTTP");  
} 
// 2.  Set request mode and parameters .
xhr.open(method,url,async);  
//  If it is post The way   Set request header 
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
// 3. Send a request 
xhr.send();
// 4.  Response processing .
xhr.onreadystatechange=function() { 
  if (xhr.readyState==4 &&xhr.status==200)  { 
     console.log(' success ', responseText);
     //  Processing results 
  }
} 
 Copy code 

Ajax Advantages and disadvantages

advantage :

  1. The biggest advantage is that the page does not need to be refreshed , Communicate with the server within the page , Very good user experience .
  2. Communicate with the server asynchronously , There is no need to interrupt the operation .
  3. You can transfer the work of the previous server to the client , Reduce server and bandwidth , Can minimize redundant requests .
  4. Based on standardized and widely supported technologies , No need to download plug-ins or applets .

shortcoming :

  1. AJAX It's gone Back and History function , That is, the destruction of browser mechanism . Can't use the browser to move forward or backward .
  2. safety problem : Cross-site scripting attacks 、SQL Injection attack, etc .
  3. Weak support for search engines . If not used properly ,AJAX It will increase the flow of network data , So as to reduce the performance of the whole system .

copyright notice
author[Little tear night],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827094239694g.html

Random recommended