原生JS封装Ajax插件(同域、jsonp跨域)

下面就来详细讲解一下如何用原生JS封装Ajax插件，支持同域和jsonp跨域请求。

1. 目标功能

我们的目标是封装一个通用的 Ajax 插件，能够支持同域和跨域请求（使用 Jsonp 技术），并兼容各种浏览器。

根据我们的需求，我们需要实现以下两个功能：

发送 HTTP 请求并获取返回数据。
支持跨域请求。

2. 发送 HTTP 请求并获取返回数据

我们需要实现一个函数，能够向指定 URL 发送 HTTP 请求，并获取服务器返回的数据。

2.1 发送请求

我们可以使用原生的 XMLHttpRequest 对象来发送 HTTP 请求。在发送请求时，我们需要注意以下几点：

设置请求方法、请求 URL、请求头等。
发送请求数据（如果有的话）。
注册回调函数，处理服务器返回的数据。

以下是一个示例请求函数代码：

function ajax(options) {
  var xhr = new XMLHttpRequest();

  // 处理 url
  var url = options.url;
  var params = options.params || {};

  // 处理 method
  var method = options.method || 'GET';

  // 处理 timeout
  var timeout = options.timeout || 0;

  // 处理 responseType
  var responseType = options.responseType || '';

  // 处理 headers
  var headers = options.headers || {};

  // 处理 withCredentials
  var withCredentials = !!options.withCredentials;

  // 处理 data
  var data = null;
  if (method === 'POST') {
    data = new FormData();
    for (var key in params) {
      data.append(key, params[key]);
    }
  } else if (method === 'GET') {
    url += '?' + encodeURI(Object.keys(params).map(key => `${key}=${params[key]}`).join('&'));
  }

  // 初始化请求
  xhr.open(method, url, true);
  xhr.responseType = responseType;
  xhr.timeout = timeout;
  xhr.withCredentials = withCredentials;
  for (var key in headers) {
    xhr.setRequestHeader(key, headers[key]);
  }

  // 注册事件处理函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        options.success && options.success(xhr.response);
      } else {
        options.error && options.error(xhr.statusText);
      }
    }
  };

  // 发送请求
  xhr.send(data);
}

上面代码中，我们设置了默认的请求参数，包括 URL、请求方法、请求参数、请求头、超时时间、返回数据类型、是否跨域等。

在初始化请求时，我们根据不同的请求方法处理请求数据。对于 GET 方法，我们将参数拼接在 URL 上；对于 POST 方法，我们使用 FormData 对象发送请求数据。

在注册事件处理函数时，我们监听了 XMLHttpRequest 对象的 readyStateChange 事件。当 readyState 的值变为 4 时，表示请求已经结束。如果请求成功，我们调用 success 回调函数；否则，调用 error 回调函数。

2.2 发送 GET 请求

以下是一个发送 GET 请求的例子：

ajax({
  url: '/api/user',
  method: 'GET',
  params: {
    id: '123'
  },
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

在这个例子中，我们向 /api/user 发送了一个 GET 请求，参数为 id=123。如果请求成功，控制台会输出服务器返回的数据。

2.3 发送 POST 请求

以下是一个发送 POST 请求的例子：

ajax({
  url: '/api/user',
  method: 'POST',
  params: {
    name: '张三',
    age: 20
  },
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

在这个例子中，我们向 /api/user 发送了一个 POST 请求，参数为 name=张三&age=20。如果请求成功，控制台会输出服务器返回的数据。

3. 支持跨域请求

在 Web 开发中，跨域请求是一个非常普遍的需求。为了支持跨域请求，我们可以使用 JSONP（JSON with Padding）技术。

3.1 JSONP 原理

JSONP 的原理很简单，就是通过添加一个