In-depth understanding of Ajax functions and their parameter usage

Master the detailed explanation of commonly used Ajax functions and their parameters

Ajax (Asynchronous JavaScript and XML) is a method used to asynchronously transmit data between the client and the server. technology. It can update part of the content without refreshing the entire page, improving user experience and performance. This article will introduce commonly used Ajax functions and their parameters in detail, with specific code examples.

1. XMLHttpRequest object
The core of Ajax is the XMLHttpRequest object, which is a built-in object provided by the browser. By creating an XMLHttpRequest object, we can interact with the server data.

Sample code:

let xhr = new XMLHttpRequest();

2. Basic operations of Ajax

1. Send a request
   Use the open() method to configure the request type, URL, and whether Asynchronous processing, etc.
   Syntax: xhr.open(method, url, async);
   Among them, method is the type of request (GET or POST), url is the address of the request, and async is a Boolean value indicating whether to process the request asynchronously.

Sample code:

xhr.open('GET', 'http://example.com/api', true);

2. Send data
   If the request type is POST, you can also use the setRequestHeader() method to set the request header, and the send() method to send data.

Sample code:

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John', age: 18 }));

3. Listening to status changes
   You can use the onreadystatechange event to monitor changes in request status.

Sample code:

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

3. Encapsulation of Ajax functions
In order to simplify the use of Ajax, we can encapsulate a general Ajax function.

Sample code:

function ajax(options) {
  let xhr = new XMLHttpRequest();
  xhr.open(options.method, options.url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      options.success(xhr.responseText);
    } else {
      options.error(xhr.status);
    }
  };
  xhr.send(options.data);
}

4. Detailed explanation of the parameters of the Ajax function
The Ajax function can accept an options object containing various configurations as a parameter.

1. method: The type of request, which can be GET or POST. The default is GET.
2. url: The requested URL address.
3. async: Whether to process requests asynchronously, the default is true.
4. data: The data sent is only valid when the request type is POST, and is empty by default.
5. success: The callback function executed when the request is successful, accepting the returned data as a parameter.
6. error: The callback function executed when the request fails, accepting the returned HTTP status code as a parameter.

Sample code:

ajax({
  method: 'POST',
  url: 'http://example.com/api',
  data: JSON.stringify({ name: 'John', age: 18 }),
  success: function(response) {
    console.log(response);
  },
  error: function(statusCode) {
    console.error('Error:', statusCode);
  }
});

By mastering commonly used Ajax functions and their parameters, we can interact with data more flexibly and improve user experience and performance. I hope that the detailed explanations and examples in this article can help readers deeply understand the working principle and application method of Ajax.

The above is the detailed content of In-depth understanding of Ajax functions and their parameter usage. For more information, please follow other related articles on the PHP Chinese website!