AJAX 原理-day3

news2025/10/31 12:39:24

XMLHttpRequest

AJAX原理是 XMLHttpRequest对象

定义：

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

步骤：

1. 创建 XMLHttpRequest 对象

2. 配置请求方法和请求 url 地址

3. 监听 loadend 事件，接收响应结果

4. 发起请求

XMLHttpRequest - 查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx ? 参数名1=值1 & 参数名2=值2

 /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */

    document.querySelector('.sel-btn').addEventListener('click', () => {

      // console.log(21);
      const pname = document.querySelector('.province').value
      const cname = document.querySelector('.city').value

      // 查询参数对象
      const qObj = {
        pname,
        cname,

      }

      // URLSearchParams 查询参数
      const paramsObj = new URLSearchParams(qObj)
      const queryString = paramsObj.toString()// 参数对象  转成     字符串
      console.log(queryString)// pname=%E5%8C%97%E4%BA%AC&cname=%E5%8C%97%E4%BA%AC%E5%B8%82
      // %E5%8C%97%E4%BA%AC&   要进行url解码

      const xhr = new XMLHttpRequest()
      xhr.open('get', `http://hmajax.itheima.net/api/area?${queryString}`)
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response);// 服务器 返回的  响应结果
        const data = JSON.parse(xhr.response)
        const htmlStr = data.list.map(areaName => {
          return `
        <li class="list-group-item">${areaName}</li>        
        `
        }).join('')

        // console.log(htmlStr);

        document.querySelector('.list-group').innerHTML = htmlStr

      })

      xhr.send()// 发起这次请求
    })

XMLHttpRequest - 数据提交

需求：通过 XHR 提交用户名和密码，完成注册功能

核心：

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

请求体携带 JSON 字符串

  /**
     * 目标：使用xhr进行数据提交-完成注册功能
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      const xhr = new XMLHttpRequest()
      xhr.open('post', 'http://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response);

      })


      // xhr对象设置请求头      内容类型    是    json字符串
      xhr.setRequestHeader('Content-Type', 'application/json')

      const userObj = {
        "username": "黑2no1hello",
        "password": "123456"
      }
      const userStr = JSON.stringify(userObj)// 把对象转成字符串
      xhr.send(userStr)

    })