Javascript---AJAX get post 请求的区别

男娘i 2024-04-08 12:43 93阅读 0赞

**目录**

ajax 中 get和post的区别：

1 语义化的区别:

2 携带给后端的信息位置不一样

3 携带的数据格式不一样

4 携带的数据大小不一样

5 安全性能

6 浏览器缓存

使用get发送有参请求

post 有参数请求

--------------------

## ajax 中 get和post的区别： ##

#### 1 语义化的区别: ####

get偏向于获取,post偏向于提交数据

#### 2 携带给后端的信息位置不一样 ####

get直接在地址后面拼接查询[字符串][Link 1]  
post在请求体内进行信息的查询

#### 3 携带的数据格式不一样 ####

get:因为携带的数据是直接拼接在地址后面,只能使用url编码  
post:因为在请求体内,所以可有多种形式,但是需要提前说明

####    4 携带的数据大小不一样 ####

get:因为拼接在地址后面,大小在2kb左右  
post:因为在请求体内,数据大小不受限制,除非服务器有显示

####    5 安全性能 ####

get:明文发送,不安全  
post:相对安全

####    6 浏览器缓存 ####

get: 浏览器会主动缓存  
post:浏览器不会主动缓存

![de48be2d39784c689b65a7c130678078.png][]

#### 使用get发送有参请求 ####

第一种方式：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      
      <script src="./qs.js"></script>
    </head>
    <body>
      
      <input type="text" name="" id="inp">
      
      <button onclick="getWeatherData()">获取天气数据</button>
      <script>
        // 获取用户输入的值
        var inp = document.getElementById('inp')
        var cityName;
        inp.oninput = function () {
          cityName = this.value
        }
        // https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5
        function getWeatherData() {
          var request = new XMLHttpRequest()
          // 第一种方式 拼接字符串
          request.open('get','https://api.muxiaoguo.cn/api/tianqi?city=' + cityName + '&type=1&api_key=779d7e46708290a5')
          
          request.send()
          request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
              console.log(request.responseText);
              var res = JSON.parse(request.responseText);
              console.log(res);
              alert(`${res.data.time}————${cityName}的温度是${res.data.temp}摄氏度`)
            }
          }
        }
      </script>
    </body>
    </html>

第二种方式

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      
      <script src="./qs.js"></script>
    </head>
    <body>
      
      <input type="text" name="" id="inp">
      
      <button onclick="getWeatherData()">获取天气数据</button>
      <script>
        // 获取用户输入的值
        var inp = document.getElementById('inp')
        var cityName;
        inp.oninput = function () {
          cityName = this.value
        }
        // https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5
        function getWeatherData() {
          var request = new XMLHttpRequest()
          
          // 第二种方式 封装参数对象
          var params = {
            city: cityName,
            type: 1,
             api_key:'779d7e46708290a5'
           }
          
          request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params))
          request.send()
          request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
              console.log(request.responseText);
              var res = JSON.parse(request.responseText);
              console.log(res);
              alert(`${res.data.time}————${cityName}的温度是${res.data.temp}摄氏度`)
            }
          }
        }
      </script>
    </body>
    </html>

#### post 有参数请求 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <button onclick="toLogin()">登录</button>
      <script>
    
        function toLogin() {
          var request = new XMLHttpRequest()
          request.open('post','http://xxx.x.xx.xx:xxxx/user/login')
          // 配置参数
          var params = {
            username: 'admin1',
            password: '123321'
          }
          // 设置请求头
          request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
          request.send(JSON.stringify(params))
          request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
              console.log(request.responseText);
            }
          }
        }
      </script>
    </body>
    </html>

[Link 1]: https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E4%B8%B2&spm=1001.2101.3001.7020
[de48be2d39784c689b65a7c130678078.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/33ec38445d024934bf82020e1f5ed621.png