javascript http method

JavaScript is an important programming language in front-end development, used to handle various interactive operations in web pages. Among them, the http method is a commonly used request method, which can send a request to the server and obtain the response result. This article will explore the http method in JavaScript and its related usage.

1. http method overview

The http method refers to a method of sending requests to the server over the network. Currently commonly used http methods include GET, POST, PUT, DELETE, etc. Among them, GET and POST are the two most widely used methods.

Four actions in the HTTP protocol:

GET: Used to request access to resources that have been identified by the URI to perform a "read" operation. The GET method requires the server to return the resource located by the URL in the body of the response message, and specify the format and character set of the response header information to describe the content.

POST: Will submit data to the specified resource and request the server for processing (such as submitting a form or uploading a file). POST requests may result in the creation of new resources and/or modification of existing resources.

PUT: Used to upload files to the server, or to update existing resources.

DELETE: Request the server to delete the specified resource.

2. http method in JavaScript

In JavaScript, you can use the XMLHttpRequest object to implement http requests. The XMLHttpRequest object provides the following common methods:

(1) open() method: The function of this method is to create a new http request. The parameters of this method include http method, requested URL address and whether to use asynchronous request mode, etc.

XMLHttpRequest.open(method, url, async, user, password);

Method parameter description:

method: represents the http method, such as GET, POST, PUT, DELETE etc.

url: Indicates the requested URL address.

async: Indicates whether to use asynchronous request mode. false indicates synchronous mode, true indicates asynchronous mode.

user: Indicates the user name, optional.

password: Indicates password, optional.

(2) send() method: This method is used to send http requests to the server. The parameters of this method can be the requested data content (for POST method), or empty (for GET method).

XMLHttpRequest.send(data);

(3) setRequestHeader() method: This method is used to set the attributes and values ​​in the request header. The attributes in the request header include Content-Type, Accept, etc.

XMLHttpRequest.setRequestHeader(name, value);

Method parameter description:

name: Specify the attribute name in the request header.

value: Specify the attribute value in the request header.

(4) onreadystatechange attribute: This attribute defines a callback function to handle the status change of the server response.

XMLHttpRequest.onreadystatechange = function() {};

• readyState: Indicates the status of the XMLHttpRequest object, ranging from 0 to 4.

0: Indicates that it is not initialized (the open() method has not been called yet).
1: Indicates that it is being initialized, that is, the open() method has been called, but the send() method has not yet been called.
2: It means that the request has been sent out (the send() method has been called), but the response message from the server has not yet been received.
3: The server's response message has been received, but all response data has not been read.
4: All response data has been read.

status: Indicates the status code returned by the server, such as 200 indicating success, 404 indicating that the requested resource does not exist, etc.

responseText: Indicates the response text returned by the server.

3. Example Demonstration

The following is an example of sending an http request using the GET method and asynchronous request method:

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://www.example.com/", true);
    xhr.send();
}

In the above code, we define A function named sendHttpRequest() uses the XMLHttpRequest object in the function to send a GET request to the address "https://www.example.com/" and sets the asynchronous request mode to true. When the server successfully returns the response result and the status code is 200, the response text will be printed on the console.

The following is an example of sending an http request using the POST method and synchronous request method:

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.example.com/", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=John&age=25");
    console.log(xhr.responseText);
}

In the above code, we define a function named sendHttpRequest(), and use XMLHttpRequest in the function The object sent a POST request to the address "https://www.example.com/" and set the synchronous request mode to false. At the same time, we also called the setRequestHeader() method to set the Content-Type attribute in the request header, indicating that the type of request data is "application/x-www-form-urlencoded". Finally, we called the send() method to send Request data, the data content is "name=John&age=25". When the server successfully returns the response result, the response text is printed to the console.

4. Summary

This article introduces the http method in JavaScript and its related usage. Through the demonstration of the above example, we can see that using the XMLHttpRequest object can easily implement http requests. At the same time, different request types and formats can also be implemented by setting request headers and request parameters. Therefore, mastering the http method in JavaScript is very necessary for front-end developers.

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