xhr的网络请求手写简单ajax

Posted 2021-10-12 cuter、

xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对 xhr的封装。

XMLHttpRequest

XMLHttpRequest是window的内置对象，因此可以用new创建xhr实例:

var xhr=new XMLHttpRequest()

XMLHttpRequest 对象用于和服务器交换数据，如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

手写请求demo

<button>获取资源</button>
  <img class="imgs">

  <script>
    const button = document.querySelector('button')
    const img = document.querySelector('img')

    function ajaxPromise() {
      let promise = new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.open('get', './xhr.jpg', true)
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
              resolve(xhr.responseURL)
            } else {
              reject(new Error(xhr.statusText))
            }
          }
        }
        xhr.send(null)
      })
      return promise
    }

    button.addEventListener('click', () => {
      ajaxPromise().then(res => {
        img.src = res
      }).catch(stat => {
        console.log(stat);
      })
    })
  </script>

• 参考文档: https://www.runoob.com/ajax/ajax-tutorial.html.