javascript sends get request parameters

JavaScript is a commonly used scripting language that can be used for both front-end and back-end development. During the front-end development process, it is often necessary to send requests to the back-end server through AJAX and obtain response data. Among them, GET request is the most commonly used request method. This article will introduce how to use JavaScript to send GET requests and how to send GET request parameters.

1. JavaScript sends GET request

In JavaScript, you can use the XMLHttpRequest object (XHR object for short) to send HTTP requests. The following is a simple example of using an XHR object to send a GET request:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

In the above code, an XHR object is first created, and the request method is GET, and the request address is /getUserInfo. Then an onreadystatechange event handler is registered, and when the response status is 4 (indicating that the request has been completed) and the response code is 200, the response text is printed. Finally, send the request through the send method.

It should be noted that XMLHttpRequest has compatibility issues. In IE6 and 7, ActiveXObject objects need to be used instead. For details, please refer to relevant documents.

2. JavaScript sends GET request parameters

In actual applications, it is often necessary to send request parameters to the back-end server. In a GET request, request parameters are usually passed through the URL's query string. JavaScript can be used to append request parameters to the URL by splicing the URL, as shown below:

var username = 'Tom';
var age = 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo?username=' + username + '&age=' + age, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

By splicing the URL, the two request parameters username and age are appended to the URL. It should be noted that if the request parameters contain non-ASCII characters such as Chinese, URL encoding needs to be performed, otherwise garbled characters may occur. You can use the encodeURI function for encoding, as shown below:

var username = '小明';
var age = 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo?username=' + encodeURI(username) + '&age=' + age, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

In the above code, use the encodeURI function to URL encode the Chinese string to ensure that the request parameters are passed correctly.

In addition to splicing URLs, you can also use the setRequestHeader method of the XHR object to append request parameters to the request header. As shown below:

var params = 'username=' + encodeURI('小明') + '&age=' + 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(params);

In the above code, the request parameters are first spliced ​​in the form of "parameter name = parameter value", and the result is stored in the params variable. Then use the setRequestHeader method to set the request header Content-type to application/x-www-form-urlencoded to inform the server of the request parameter format. Finally, send the request through the send method and pass the request parameters.

Through the above introduction, we learned how to use JavaScript to send GET requests and how to send GET request parameters. In actual applications, the appropriate method can be selected to pass request parameters according to specific needs, thereby realizing front-end and back-end data interaction.

The above is the detailed content of javascript sends get request parameters. For more information, please follow other related articles on the PHP Chinese website!