AJAX(4)——XMLHttpRequest

A阳俊yi

于 2024-08-24 21:59:22 发布

阅读量261

点赞数 6

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_74386799/article/details/141500722

版权

XMLHttpRequest

定义：XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用于操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用

关系：axios内部采用XMLHttpRequest与服务器交互

使用XMLHttpRequest

步骤：

创建XMLHttpRequest对象
配置请求方法和请求URL地址
监听loadend事件，接收响应结果
发起请求

<body>
  <script>
    const xhr = new XMLHttpRequest()
    //配置请求地址
    xhr.open('GET', 'http://hmajax.itheima.net/api/province')
    //监听loadend，接收响应结果
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response);   获取响应数据
      const data = JSON.parse(xhr.response)    //转换为对象
      console.log(data.list);

    })
    //发起请求
    xhr.send()
  </script>

查询参数

语法：

http://xxx.com/xxx/xxx?参数名=值1&参数名=值2

    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response);
    })
    xhr.send()

XMLHttpRequest数据提交

请求头设置Content-Type:application/json

请求体携带JSON

    //XHR数据提交
    document.querySelector('.btn').addEventListener('click', () => {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response);

      })

      //设置请求头
      xhr.setRequestHeader('Content-Type', 'application/json')
      const obj = {
        username: 'itheima908',
        password: '765421'
      }
      const str = JSON.stringify(obj)
      //设置请求体,发送请求
      xhr.send(str)
    })

A阳俊yi

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX(4)——XMLHttpRequest

定义：XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用于操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用关系：axios内部采用XMLHttpRequest与服务器交互使用XMLHttpRequest。
复制链接

扫一扫