一些请求发送方式

我的GIS
88 阅读1分钟

Ajax 全称是 Asynchronous JavaScript And XML（异步 JavaScript 和 xml）利用 XMLHttpRequest 对象和服务器进行数据交互的方式

Axios 是一个基于promise的可用在浏览器和node.js中的异步通信框架；主要作用是实现AJAX异步通信

先简单创建一个服务器吧：

data = [
    {
        id:1,
        name:'jack'
    },
    {
        id:2,
        name:'kevin'
    },
]
const http = require('http');
const app = http.createSrver();
app.on('request', (req, res) => {
    res.setHeader("Contest-type", "text/html;charset=utf-8");
    if (req.url === "/news") {
        res.end(JSON.stringify(data));
    } else {
        res.end(res.end("404 出错啦！"));
    }
})；
app.listen(8080, () => {
    console.log("服务器开启成功！")
});

发送Ajax的三种方法:

第一种：JQuery发送请求:

1.发送不带参数的GET请求

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">GET请求</button>
  <script>
    $(function () {
      $('#btn').on('click', function () {                   
        $.get('请求的URL地址', function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>

2.发送带参数的GET请求

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">GET请求</button>
  <script>
    $(function () {
      $('#btn').on('click', function () {
        $.get('请求的URL地址', {
          id: 1
        }, function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>

3.使用$.ajax发送GET请求

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">发起GET请求</button>
  <script>
    $(function () {
      $('#btn').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://www.xxx:8080/api/getInfo',
          data: {
            id: 1
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

4.发送不带参数的POST请求

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">发起POST请求</button>
  <script>
    $(function () {
      $('#btn').on('click', function () {
        $.post('发送请求的URL地址', {
          name: '',
          age: ,
        }, function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>

5.使用$.ajax发送POST请求

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">发起POST请求</button>
  <script>
    $(function () {
      $('#btn').on('click', function () {
        $.ajax({
          type: 'POST',
          url: '发送请求的URL地址',
          data: {
              name: '',
              age: ,
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

第二种：原生JS发送Ajax请求:

1.使用xhr发起GET不带参数的数据请求

<script>
    // 1.创建XHR对象
    var xhr = new XMLHttpRequest();
    //  2.调用open函数
    xhr.open('GET', '请求的URL地址');
    // 3.调用send函数
    xhr.send()
    // 4.监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) {
                if(xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response);
                } else {
                    reject(xhr.status);
                }
            }
    }
 </script>

2.使用xhr发起GET带参数的数据请求

<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 发送请求的URL地址?id=1&name='');
    xhr.send();
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if(xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.response);
            } else {
                console.log(xhr.status);
            }
        }
    }
</script>

3.使用xhr发送POST请求

<script>
    // 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('POST', '请求的URL地址')
    // 3. 设置 Content-Type 属性
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数
    xhr.send(name=''&author=''&publisher='')
    // 5. 监听事件
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            if(xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.response);
            } else {
                console.log(xhr.status);
            }
        }
    }
 </script>

第三种：axios发送请求:

1.axios发送GET请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
  <button id="btn">axios发起GET请求</button>
   <script>
     document.querySelector('#btn1').addEventListener('click', function () {
      var url = '请求的URL';
      var paramsData = {
        name: '',
        age:
       };
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        res = res.data;
        console.log(res)
      })
    })
    </script>
</body>

// 简写：
axios.get('./carList.json').then(value => {
    console.log(value.data)
})

2.axios发送POST请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
    <button id="btn2">axios发送POST请求</button> 
<script>
document.querySelector('#btn').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'URL地址',
        data: {
          name: '',
          age: ,
        }
      }).then(function (res) {
        res = res.data
        console.log(res)
      })
    })
 </script>

Promise封装

function get(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.response);
        } else {
          reject(xhr.status);
        }
      }
    };
  });
}
get('发送请求的URL地址?id=1&name=')
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.error(error);
  });
avatar
文章
阅读
粉丝