Ajax usage in javascript

As Web applications become more and more complex, asynchronous JavaScript and XML (Ajax) technologies are increasingly used to implement dynamic Web pages. Ajax allows you to dynamically update web pages by sending asynchronous requests in the background without having to refresh the entire page. In this article, we will explore how to use Ajax in JavaScript.

1. Create XMLHttpRequest object

The XMLHttpRequest object is the core of Ajax. It is responsible for sending HTTP requests and receiving server responses. In JavaScript, you initiate an Ajax request by creating an XMLHttpRequest object.

var xhr = new XMLHttpRequest();

If the browser does not support XMLHttpRequest, you can consider using ActiveXObject, as shown below:

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Send HTTP request

When the XMLHttpRequest object is created After that, you can set the URL and method of the request, and then send the request.

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

In the above code, we use the xhr.open() method to open a URL in GET mode. The third parameter indicates an asynchronous request.

To indicate that the request is sent in POST mode, you can use the following code:

xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2');

In the above code, we use the xhr.setRequestHeader() method to set the HTTP header information, and use send() method to send a request.

3. Sending form data

If you need to send form data, you can use the FormData object.

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');

xhr.open('POST', 'http://example.com/login');
xhr.send(formData);

In the above code, we use the FormData object to send the form data, and then use the send method to send the request.

4. Handling server response

When the readyStateChange event of XMLHttpRequest is triggered, you can determine whether the request was successful by checking the HTTP response code and response text. Here are some common status codes:

• 200: OK
• 404: Page not found
• 500: Server Error

The following is a simple handler function:

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

In the above code, we use the xhr.readyState property, which returns the status of the XMLHttpRequest object. If readyState is 4, the response is complete.

xhr.status property returns the HTTP status code. A status code of 200 indicates success.

xhr.responseText property contains the text of the server response.

5. Handling Errors

If the server responds with an HTTP status code other than 200, the request is considered failed. When an error occurs, you can retry the operation after being prompted.

xhr.onerror = function() {
  alert('请求失败，请重试');
};

In the above code, we use the xhr.onerror attribute and the alert() method to give an error message.

6. Cancel request

If you need to cancel the Ajax request, you can use the xhr.abort() method.

xhr.abort();

In the above code, we use the xhr.abort() method to cancel the request.

Summary

The above is the basic usage of Ajax in Javascript. Ajax allows you to dynamically update web pages, making web applications easier to use and more responsive. When using Ajax, remember to use asynchronous requests.

The above is the detailed content of Ajax usage in javascript. For more information, please follow other related articles on the PHP Chinese website!