Ajax - 使用 XMLHttpRequest 发起请求 - get / get带参 / post （原生）

最新推荐文章于 2024-12-21 14:15:09 发布

Henry_ww

最新推荐文章于 2024-12-21 14:15:09 发布

阅读量4.9k

点赞数 4

分类专栏：前端文章标签： ajax javascript html5

本文链接：https://blog.csdn.net/Henry_ID/article/details/120136261

版权

前端专栏收录该内容

19 篇文章 4 订阅

订阅专栏

1. 使用XMLHttpRequest发起get无参请求 (原生方法)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button>请求所有英雄列表数据</button>
    <script>
      document.querySelector('button').onclick = function() {
        // $.ajax({
        //   type:请求方式，
        //   url:请求地址,
        //   data:请求参数
        //   success:请求成功的回调，
        //   dataType:预期的数据类型
        // })
        // 1.创建一个异步对象
        let xhr = new XMLHttpRequest()

        // 2.发起异步请求： 以什么方式，向什么地址发起请求，要不要传递参数
        // 2.1 设置请求方式 和 请求url地址
        xhr.open('get', 'http://127.0.0.1:3001/getHeroList')
        // 2.2 发起请求
        xhr.send()

        // 3.接收响应：如果请求成功，就会自动的触发xhr的onload事件，在这个事件中可以获取后台所返回的数据
        xhr.onload = function() {
          console.log(xhr.responseText)
          console.log(typeof xhr.responseText)
          console.log(JSON.parse(xhr.responseText))
        }
        console.log('console.log(xhr.responseText)-----', xhr.responseText) // 没有结果
      }
    </script>
  </body>
</html>

2. 使用XMLHttpRequest发起get带参请求 (原生方法)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="heroname" />
    <button>查询指定名英雄数据</button>
    <script>
      document.querySelector('button').onclick = function() {
        // 获取英雄数据
        let heroname = document.querySelector('.heroname').value

        // 1.创建异步对象
        let xhr = new XMLHttpRequest()

        // 2.设置请求方式和请求url,get请求如果有参数，需要在url中进行拼接,否则相当于没有传递参数
        xhr.open('get','http://127.0.0.1:3001/getHeroList?heroName=' + heroname)
        // xhr.open('get','http://127.0.0.1:3001/getHeroList')
        // 发起请求
        xhr.send()

        // 3.接收响应，请求成功自动触发的事件
        xhr.onload = function() {
          console.log(xhr.response)
          console.log(xhr.responseText)
        }
      }
    </script>
  </body>
</html>

3. 使用异步对象发起 post 请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>post请求示例</title>
  </head>

  <body>
    英雄名: <input type="text" class="cname" /> <br />
    英雄皮肤名称: <input type="text" class="skin_name" /> <br />
    <button>添加英雄及皮肤</button>
    <script>
      document.querySelector('button').onclick = function(){
        // 获取-收集用户数据
        let cname = document.querySelector('.cname').value
        let skin_name = document.querySelector('.skin_name').value

        // 1.创建异步对象
        let xhr = new XMLHttpRequest()

        // 2.发起post请求
        // 2.1 设置请求方式和请求地址
        // 注意，post请求的参数不要在url中拼接，拼接了也没有用
        xhr.open('post','http://127.0.0.1:3001/addHeroSkin')
        // 2.2 设置请求头,作用是设置参数的编码格式，以便后台能够正确的接收所传递的参数
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        // 2.3 发起请求，post请求所传递的参数在send函数中传递，格式为key=value&key=value
        xhr.send(`cname=${cname}&skin_name=${skin_name}`)
        // xhr.send({cname,skin_name})//这里会错误

        // 3.接收响应
        xhr.onload = function(){
          console.log(xhr.responseText);
          
        }
      }
    </script>
  </body>
</html>