xhr的网络请求手写简单ajax

Posted 2023-02-20 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.