JavaScript红宝书17-网络请求

传统请求的缺点

传统请求，会刷新整个web页面，使用户体验不连贯，比如看视频点击登录，视频看了一半，传统请求，一登录，整个页面刷新视频又要从头播放而AJAX，AJAX可以异步处理网络请求，进行局部刷新。

AJAX(Asynchronous Javascript And XML)

AJAX概述

AJAX不能称为一种技术，它是多种技术的综合产物，可以发送异步请求，可以在同一个页面中同时启动多个请求。

AJAX技术发送网络请求，通过XMLHttpRequest对象发送网络请求，通过readyState属性判断当前请求对象的状态：

0：请求未初始化

1：服务器连接已建立

2：请求已收到

3：正在处理请求

4：请求已完成且响应已就绪

readyState的属性值发生改变，会调用onreadystatechange回调函数。

发送一个AJAX的get请求

javascript 复制代码

//get请求

let btn = document.getElementById('myBtn')

let div = document.getElementById('myDiv')

btn.addEventListener('click', () => {
  // 发送AJAX get请求
  console.log('发送AJAX get请求');
  // 第一步：创建AJAX核心对象XMLHttpRequest
  let xhr = new XMLHttpRequest()
  // 第二步：注册回调函数
  xhr.onreadystatechange = () => {
    console.log(xhr.readyState);

    if (xhr.readyState == 4) {
      console.log('响应结束');
      // 响应结束会有Http状态码
      console.log(xhr.status);
      if (xhr.status == 404) {
        console.log('资源未找到');
      } else if (xhr.status == 500) {
        console.log('服务器内部错误');
      } else if (xhr.status == 200) {
        console.log('响应成功');
        //进行简单渲染
        div.innerHTML = xhr.responseText
      } else {
        console.log('未知错误');
      }
    }
  }
  // 第三部：开启通道
  // xhr.open(method, url, async, user, pwd)
  // method：请求方法
  // url：请求地址
  // async：布尔类型，true代表异步请求，false代表同步请求
  // user：用户名  pwd：密码  用于身份认证，请求服务器资源可能需要
  xhr.open('get', 'http://localhost:3000/artist/list', true)
  // 第四步：发送请求
  xhr.send()
  
})

发送一个AJAX的post请求

注意设置请求头的时机，设置请求头必须在开启通道之后，发送请求之前，send还按照get请求的URL格式，send里面的内容会自动放到请求体中。

typescript 复制代码

let btn = document.getElementById('postBtn')
let div = document.getElementById('postDiv')


btn.addEventListener('click', () => {
  let xhr = new XMLHttpRequest()

  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        div.innerHTML = xhr.responseText
      } else {
        alert(xhr.status)
      }
    }
  }

  xhr.open('POST', 'http://localhost:3000/artist/list', true)

  //ajax模拟form表单需要设置请求头，必须在开启通道之后，发送请求之前设置请求头
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  
  let type = document.getElementById('singerType').value
  let area = document.getElementById('singerArea').value
  //send里面的会自动放到请求体中提交
  xhr.send('type='+type+'&area='+area)
})