javascript requests server and waits for response

In web application development, it is often necessary to obtain data from the server and then display it on the client. JavaScript is one of the most popular languages ​​in modern web development, and using JavaScript on the client to request a server and wait for a response is a common operation. This article explains how to use JavaScript to send an HTTP request and wait for the server to respond.

1. Send HTTP request

The XMLHttpRequest object is used in JavaScript to send HTTP requests. The XMLHttpRequest object is the most commonly used asynchronous data exchange technology in modern web applications. It allows us to create asynchronous requests from JavaScript and interact with the server. Here is a simple example:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

The above code uses the GET method to request data from the http://localhost:8080/data endpoint. When the send() method is called, the request is sent to the server. The method is asynchronous and therefore does not block the execution of subsequent code.

2. Waiting for server response

After sending the request, we need to wait for the server response. We can use listeners to handle responses. Here is a simple example:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Error occurred');
    }
};
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

The code above sends a request to the server and handles the response when the server responds. The load event listener fires when the application receives a response. If the response status is 200, print the response to the console. Otherwise, an error message will be output.

3. Use Promise to handle asynchronous requests

The above example uses a callback function to handle the server response. However, callback functions can lead to nested and confusing code, so we can use Promise to handle asynchronous requests. The following is an example of using Promise to handle asynchronous requests:

function makeRequest(method, url) {
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function() {
            reject(xhr.statusText);
        };
        xhr.send();
    });
}

In the above code, the makeRequest function accepts the HTTP method and URL as parameters and returns a Promise object. This object has two handler functions: resolve and reject. When the server responds successfully, the resolve handler function prints the response to the console. When an error occurs, the reject handler function will output an error message.

Here's how to use the function:

makeRequest('GET', 'http://localhost:8080/data')
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.error(error);
    });

The above code will make an HTTP GET request and call the handler function if the processing succeeds or fails. Writing asynchronous code using Promise style is easier to understand and maintain than using callback functions.

Conclusion

Using JavaScript to send HTTP requests and wait for server responses is an essential skill in web applications. JavaScript provides the XMLHttpRequest object to handle this operation and does not restrict developers from using third-party libraries to simplify the code. This article presents an example of using native JavaScript to send an HTTP request and wait for a server response, and shows how to write asynchronous code using Promise style.

The above is the detailed content of javascript requests server and waits for response. For more information, please follow other related articles on the PHP Chinese website!