javascript發送get請求參數

JavaScript是一種常用的腳本語言，可用於前端開發和後端開發。在前端開發過程中，經常需要透過AJAX方式向後端伺服器發送請求並獲得回應資料。其中，GET請求是一種最常用的請求方式，本文將介紹如何使用JavaScript發送GET請求以及如何傳送GET請求參數。

1. JavaScript傳送GET請求

在JavaScript中，可以使用XMLHttpRequest物件（簡稱XHR物件）傳送HTTP請求。以下是一個簡單的使用XHR物件發送GET請求的範例：

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();

在上面的程式碼中，首先建立了一個XHR對象，並指定請求方式為GET，請求地址為/getUserInfo。然後註冊了一個onreadystatechange事件處理函數，在回應狀態為4（表示請求已完成）且回應碼為200時，列印出回應文字。最後透過send方法發送請求。

要注意的是，XMLHttpRequest有相容性問題，在IE6、7中需要使用ActiveXObject物件代替，具體可參考相關文件。

2. JavaScript發送GET請求參數

在實際應用程式中，經常需要向後端伺服器發送請求參數。在GET請求中，請求參數通常透過URL的查詢字串傳遞。利用JavaScript可以透過拼接URL的方式將請求參數附加在URL上，如下所示：

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();

透過拼接URL的方式，將username和age兩個請求參數附加在URL中。需要注意的是，如果請求參數中包含中文等非ASCII字符，則需要進行URL編碼，否則可能會出現亂碼問題。可使用encodeURI函數編碼，如下所示：

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();

在上述程式碼中，使用encodeURI函數對中文字串進行URL編碼，確保請求參數正確傳遞。

除了拼接URL的方式，也可以使用XHR物件的setRequestHeader方法將請求參數附加在請求頭中。如下所示：

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);

在上述程式碼中，首先將請求參數以「參數名稱=參數值」的形式進行拼接，並將結果存放在params變數中。然後使用setRequestHeader方法設定請求頭Content-type為application/x-www-form-urlencoded，告知伺服器請求參數格式。最後透過send方法發送請求，並傳遞請求參數。

透過上面的介紹，我們了解如何使用JavaScript發送GET請求以及如何傳送GET請求參數。在實際應用中，可以根據具體需求選擇合適的方式傳遞請求參數，從而實現前後端資料互動。

以上是javascript發送get請求參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！