current position:Home>Differences, advantages and disadvantages between Ajax and Axios

Differences, advantages and disadvantages between Ajax and Axios

2022-04-29 05:25:12Brother Xiaogu

ajax:

1、 What is? ajax

Ajax It's about primordial XHR Encapsulation , In order to achieve our goal , Added a pair of JsonP Support for .

Asynchronous javascript and xml,ajax It's not a new technology , It's a combination of technologies , Used to quickly create dynamic pages , It can update data without refresh, so as to improve the user experience .
   attribute :url、method、dataType、beforeSend、success、error…

web Front end full set of video learning materials :http://www.atguigu.com/download.shtml

2、ajax Principle ?

Requested by the client ajax engine , Again by ajax The engine requests the server , After the server makes a series of responses, it returns to ajax engine , from ajax The engine decides where to write this result to the client . Realize no refresh and update data on the page .

3、 The core object ?

XMLHttpRequest

4、ajax Advantages and disadvantages ?

advantage :

1、 No refresh update data

2、 Asynchronous communication with the server

3、 Front end and back end load balancing

4、 Standards based is widely supported

5、 Interface and application separation

shortcoming :

1、ajax Out of commission Back and history function , That is, the destruction of browser mechanism

2、 safety problem ajax Exposed the details of the interaction with the server

3、 Support for the retrieval engine is weak

4、 Break the exception handling mechanism of the program

5、 Violation URL And the original intention of resource positioning

6、ajax Can't support mobile devices well

7、 Too much client code costs development

5、Ajax Applicable scenario
  1、 Form driven interaction
  2、 Deep tree navigation
  3、 Fast user to user communication and response
  4、 Similar to vote 、yes/no And so on
  5、 The scene of filtering and manipulating data
  6、 Ordinary text input prompt and automatic completion scene
6、Ajax Not applicable to the scene
  1、 Some simple forms
  2、 Search for
  3、 Basic navigation
  4、 Replace a lot of text
  5、 Manipulation of presentation

7、 Code

$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});

8、ajax The five steps to request

1、 establish XMLHttpRequest Asynchronous object

2、 Set the callback function

3、 Use open Method to establish a connection with the server

4、 Send data to the server

5、 Handle different response states in the callback function

axios:

1、axios What is it?

Axios It's based on Promise Of HTTP library , Can be used in the browser and node.js in ; Is the module that requests resources ; adopt promise Yes ajax Encapsulation .
   attribute :url、method、data、responseType、.then、.catch…
2、axios What are the characteristics ?

1、 Create in browser XMLHttpRequests

2、 stay node.js Create http request

3、 Support Promise API

4、 Support intercepting requests and responses

5、 Transform the request and response data

6、 Cancel the request

7、 Auto convert to JSON data format

8、 The client supports defense XSRF

3、 perform get request , There are two ways

// The first way Write the parameters directly in url in
axios.get('/getMainInfo?id=123')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
// The second way Write the parameters directly in params in
axios.get('/getMainInfo', {
params: {

id: 123

}
})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})

4、 perform post request , Pay attention to the implementation of post The requested input parameter , It doesn't need to be written in params Field , This place should pay attention to get The second way to make a request .

axios.post('/getMainInfo', {
id: 123
})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})

axios and ajax The difference between :

axios It's through Promise Realize to ajax A kind of encapsulation of Technology , It's like jquery Yes ajax It's the same as packaging .

In a nutshell ajax Technology to achieve local data refresh ,axios Realized with ajax Encapsulation ,axios yes , we have ajax There are ,ajax yes , we have axios Not necessarily .

key word : Front end training

copyright notice
author[Brother Xiaogu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261057363138.html

Random recommended