在开发Web应用的过程中，经常需要与服务器进行异步数据交互，而ajax（异步JavaScript和XML）是实现这一功能的重要技术之一。虽然现在有成熟的库如jQuery简化了ajax的使用，但在某些特殊情况下，可能需要直接使用原生JavaScript来封装ajax方法，以便更精细地控制请求过程。本篇内容将探讨如何原生JavaScript封装ajax方法，以支持不同类型数据（包括JSON、字符串和Excel文件）的上传和提交。
###ajax基础
ajax技术允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。使用ajax的通常流程包括创建一个XMLHttpRequest对象，配置必要的请求头，设置请求类型和数据，然后发送请求，最后根据服务器响应执行回调函数。
###原生JavaScript封装ajax
在原生JavaScript中封装ajax方法，可以根据不同的需求来实现，比如设置特定的header信息。在封装时，首先需要检查浏览器是否支持XMLHttpRequest对象，如果不支持，则需要使用ActiveXObject来兼容旧版IE浏览器。以下是一个封装示例：
```javascript
var ajaxFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
// 标准浏览器支持XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
// 旧版IE浏览器支持ActiveXObject
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功完成
var resJson = JSON.parse(xhr.responseText);
cb(resJson);
}
};
xhr.open("post", uri, true);
// 添加自定义header信息
xhr.setRequestHeader("DeviceCode", "56");
xhr.setRequestHeader("Source", "API");
xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
// 根据数据类型设置Content-Type
xhr.setRequestHeader("Content-Type", "application/json");
var dataStr = JSON.stringify(data);
xhr.send(dataStr);
};
```
###处理不同数据类型的ajax封装
####JSON数据类型
如上示例所示，当需要发送JSON数据类型时，需要将数据对象转换成JSON字符串，并设置`Content-Type`为`application/json`。
####字符串数据类型
如果要发送的是字符串数据，基本流程与JSON类似，但不需要将数据进行JSON字符串化处理，header中的`Content-Type`也相应地设置为`text/plain`。
####文件上传
上传文件则需要采用另外一种处理方式，利用FormData对象来封装文件数据。当是Excel文件上传时，可以按照以下方法封装：
```javascript
var ajaxFileFn = function(uri, fileInput, cb) {
var getXmlHttpRequest = function() {
// 同上
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
// 同上
};
xhr.open("post", uri, true);
// 通常文件上传不需要设置Content-Type，浏览器会根据文件类型进行设置
xhr.send(new FormData(fileInput));
};
```
在上述示例中，`fileInput`是一个指向文件输入元素的DOM对象，例如`document.getElementById('fileInput')`。
###回调函数
在封装的ajax方法中，通常会提供一个回调函数`cb`，该函数会在请求成功完成并且服务器返回数据之后被调用，从而可以对返回的数据进行处理。
###错误处理
在ajax封装中，通常还需要包括错误处理的逻辑，以便在请求失败时能够给出提示或其他处理措施。错误处理可以通过`xhr.onerror`或在请求完成后的`onreadystatechange`中检查`xhr.status`来实现。
###总结
通过原生JavaScript封装ajax方法，可以更加灵活地根据项目需求处理不同的数据类型和特定的请求头信息。掌握这种方法不仅能够帮助开发者更好地控制ajax的细节，还能在遇到一些特殊情况时提供合适的解决方案。上述内容涵盖了封装ajax的基础知识，不同数据类型的处理方式，以及如何添加错误处理和回调函数的处理。这些知识点对于任何前端开发者而言都是十分重要的。
