Technology Sharing

What is AJAX? What is the native syntax format? What is the difference between the AJAX packages provided by jQuery?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

ajax Full name Asynchronous JavaScript and XML (asynchronous JavaScript and XML) 

AJAXIt is a web development technology for creating interactive web applications.The core dependency is the XMLHttpRequest object provided by the browser, which enables the browser to issue HTTP Request and receive HTTP Response. It enables interaction with the server without refreshing the page.

Native AJAX syntax format:

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('get','js/index.json',true);
  3. xhr.send();
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState == 4 && xhr.status == 200) {
  6. let text = xhr.responseText;
  7. console.log(text);
  8. let data = JSON.parse(text);
  9. console.log(data);
  10. }
  11. };
How to use ajax:
1. Create an XMLHttpRequest object
2. Use the open method to specify the address, type, and method to be requested.
3. Use the send method to send a request. If you need to pass parameters:
The get method requires concatenating the parameters to the end of the URL, and separating them with &. Example: 'index.php?name=张三&age=18'
The post method can put parameters in send(). Example: send('name=张三&age=18')
4. Bind the onreadystatechange event to determine the status of readyState and status.
5. Receive data and convert it into json.

 

The packaged AJAX provided by jQuery is faster and suitable for use in development projects. Native AJAX is easier to understand and easy to understand.

jQuery syntax format:

  1. $.ajax({
  2. type: "GET",
  3. url: 'js/exercise.json',
  4. data: {},
  5. headers:'',
  6. datatype:'',
  7. async:'',
  8. success: function(result) {
  9. console.log(result);
  10. data = result;
  11. },
  12. Error: function(e) {
  13. console.log(e.status);
  14. console.log(e.responseText);
  15. },
  16. });