使用原生js封装的ajax实例(兼容jsonp)

以下是使用原生JS封装的AJAX实例（兼容JSONP）的完整攻略。

一、为什么需要封装AJAX？

原生AJAX虽然使用较为广泛，但在使用过程中，代码复杂度和耦合度较高，也存在兼容性问题，同时缺乏统一的错误处理机制。因此，封装AJAX有利于减少代码复杂度和耦合度，提高代码可读性，同时也可以提供统一的错误处理机制，同时兼容更多的浏览器。

二、AJAX封装的要求

• 兼容GET/POST两种请求方式
• 支持同步/异步请求
• 支持数据序列化
• 支持错误处理
• 兼容JSONP

三、AJAX封装的步骤

1. 创建AJAX对象

function createXHR() {
  if ('XMLHttpRequest' in window) {
    return new XMLHttpRequest();
  } else {
    return new ActiveXObject('Microsoft.XMLHTTP');
  }
}

2. 绑定事件处理程序

function bindEvent(xhr, callback) {
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback(JSON.parse(xhr.responseText));
      } else {
        console.log('Error: ' + xhr.status);
      }
    }
  }
}

3. 发送请求

function ajax(options) {
  var xhr = createXHR();
  options.type = (options.type || 'GET').toUpperCase();
  options.async = options.async || true;
  var params = serialize(options.data);
  if (options.type === 'GET') {
    xhr.open(options.type, options.url + '?' + params, options.async);
    xhr.send(null);
  } else if (options.type === 'POST') {
    xhr.open(options.type, options.url, options.async);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(params);
  }
  bindEvent(xhr, options.callback);
}

4. 序列化数据

function serialize(data) {
  var arr = [];
  for (var name in data) {
    if (data.hasOwnProperty(name)) {
      arr.push(name + '=' + data[name]);
    }
  }
  return arr.join('&');
}

5. 错误处理

function handleError(xhr, error) {
  console.log('AJAX error: ' + error)
}

6. JSONP兼容

function jsonp(options) {
  var params = [];
  for (var key in options.data) {
    params.push(key + '=' + encodeURIComponent(options.data[key]));
  }
  var callbackName = 'jsonp_' + Date.now();
  var script = document.createElement('script');
  script.src = options.url + '?' + params.join('&') + '&callback=' + callbackName;
  document.body.appendChild(script);
  window[callbackName] = function (data) {
    options.callback(data);
    document.body.removeChild(script);
    delete window[callbackName];
  };
}

四、AJAX封装的示例

以GET和POST请求为例：

1. GET请求

ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  callback: function (data) {
    console.log(data);
  }
});

2. POST请求

ajax({
  url: 'https://jsonplaceholder.typicode.com/posts',
  type: 'POST',
  data: {
    title: 'foo',
    body: 'bar',
    userId: 1
  },
  callback: function (data) {
    console.log(data);
  }
});

以上就是使用原生JS封装的AJAX实例（兼容JSONP）的完整攻略，希望能对你有所帮助。