用JS写的一个Ajax库(实例代码)

什么是Ajax？

Ajax全称为"Asynchronous Javascript And XML"（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax 使用了一些现有的技术，包括HTML、CSS、JavaScript、DOM等，以及XMLHttpRequest对象。它不需要重载整个页面，只是和服务器进行少量的数据交换，极大地提升了用户体验。

Ajax原理

浏览器在客户端发出异步请求，并不会阻塞用户的其他操作，向服务器拿到数据以后再自主决定如何处理，可以选择更新前台页面，也可以选择不做任何操作。

常用的做法是在页面中嵌入一个XMLHttpRequest（简称XHR）对象，在需要请求数据的地方生成该对象，然后给对象设置回调函数，在数据返回时执行回调函数。

Ajax库的作用

为了方便开发人员使用Ajax技术，各种开源的Ajax库纷纷问世，比如jQuery，Prototype，MooTools等等。

这些库的功能各有不同，但核心都是为了使得Ajax请求更加易用和便捷。

如何实现一个简单的Ajax库

以下是一个简单的Ajax库实例代码，可以在前端页面中发起Ajax请求，并获取后端数据。该库使用Promise对象，将异步的回调函数转换为同步的写法。

class Ajax {
  constructor(options) {    
    this.options = options
    this.xhr = new XMLHttpRequest()
  }
  send() {
    var self = this
    var {url, method, data} = this.options
    return new Promise(function(resolve, reject) {
      self.xhr.onreadystatechange = function() {
        if (self.xhr.readyState === 4) {
          if (self.xhr.status === 200) {
            resolve(JSON.parse(self.xhr.responseText))
          } else {
            reject(new Error(self.xhr.statusText))
          }
        }
      }
      self.xhr.open(method, url, true)
      self.xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
      self.xhr.send(JSON.stringify(data))
    })
  }
}

function ajax(options) {
  return new Ajax(options).send()
}

该代码的核心是Ajax类的send方法，其中通过Promise对象包裹回调函数，以实现同步的效果。

在下面的示例中，我们将演示如何使用该Ajax库完成两个不同的页面数据请求：

示例1：获取JSON数据

ajax({
  url: 'https://jsonplaceholder.typicode.com/posts/1',
  method: 'get'
}).then(function(data) {
  console.log(data)
}).catch(function(error) {
  console.log(error)
})

该示例中使用该Ajax库访问了"jsonplaceholder"网站的API，获取了某个特定的帖子。
具体来说，我们使用了get方法，传入对应url以及请求的数据。然后通过then方法，对响应的数据进行处理，若请求成功则输出数据，否则输出错误信息。

示例2：发送表单数据

ajax({
  url: '/user',
  method: 'post',
  data: {
    name: 'John',
    age: 20
  }
}).then(function(data) {
  console.log(data)
}).catch(function(error) {
  console.log(error)
})

该示例中，我们使用该Ajax库发送了一个表单数据，并且通过then方法获取服务器端返回的结果。注意，我们在该Ajax库中设置了请求数据的格式为JSON，因此我们需要使用JSON.stringify方法将数据序列化成为字符串。