实现ajax请求

hello！大家好，我是一名正在乱学前端技术的大学生，欢迎大家关注我，一起探讨前端技术

AJAX（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行异步通信。而传统的 Web 应用程序中，用户与服务器进行交互时必须刷新整个页面才能显示新的内容。因此，AJAX 技术可以减少网络带宽的占用，并提高用户交互的效率和流畅度，使得 Web 应用程序更加灵活和可靠。
                        
以下是较为常见的ajax请求方式

说明：XMLHttpRequest是 JavaScript 的内置对象，用于在Web应用程序中向服务器发送HTTP请求和接收响应。通过XMLHttpRequest对象，可以实现异步加载数据，无需刷新整个页面即可更新部分内容。常用的HTTP请求方法有GET、POST等。

  //创建一个XMLHttpRequest对象
  const XML = new XMLHttpRequest()
  //设置请求方法和请求地址
  XML.open("GET", "http://smart-shop.itheima.net/index.php?s=/api/page/detail")
  //设置请求头信息
  XML.setRequestHeader('Content-Type', '')
  //发送请求
  XML.send()

  //这是一个XMLHttpRequest对象的事件处理函数
  //当它的readyState状态为4（即数据传输完成）
  //并且HTTP状态码为200时（即请求成功）,打印出Response的响应内容。
  //其中XML是通过XMLHttpRequest对象定义的实例
  XML.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      console.log(XML.response)
    }
  }

请求地址使用的是黑马程序员的某个接口，能测试就行

做项目最常用的是通过axios发送请求，以下是axios原生实现,实际就是使用Promise函数异步封装了上文的XMLHttpRequest。Promise相关原生我是一点看不懂，分享一篇不错的文章点击这里跳转promise原生实现

<script>
  function myAxios (config) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open(config.method || 'GET', config.url)
      xhr.addEventListener('loadend', () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))
        } else {
          reject(new Error(xhr.response))
        }
      })
      xhr.send()
    })
  }
  //测试
  myAxios({
    url:"http://smart-shop.itheima.net/index.php?s=/api/page/detail",
    method: 'GET'
  }).then(result => {
    console.log(result)
  }).catch(error => {
    console.log(error)
  })

</script>

接下来看一下async函数和await关键字的作用

    //利用async和await取代了原生promise实现axios的回调函数，使代码更简洁可读性更高
    async function myAxios2 () {
    const res = await myAxios({ url: 'http://smart-shop.itheima.net/index.php?s=/api/page/detail' })
    console.log(res)
    myAxios2()

使用async和await对axios进行调用，取代了promise实现axios的回调函数，使代码更简洁可读性更高，一般我们在进行项目开发时使用的都是这一种，虽然我也没有做过项目，但是我猜测！