ajax 上传文件和json

AJAX（异步JavaScript和XML）是一种用于在前端和后端之间传输数据的技术。除了支持传输XML数据，现在AJAX也可以支持JSON（JavaScript对象表示）数据。

AJAX能够异步请求数据并直接写入页面上，这种特性可以更好地优化用户体验和页面性能。在AJAX中，上传文件和传输JSON数据是两种常见的用例。

// AJAX 上传文件
function uploadFile() {
  var fileInput = document.getElementById('file');
  var file = fileInput.files[0];
  var formData = new FormData(); 

  // 添加文件到formData对象
  formData.append('file',file);

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            alert('上传成功');
          } else {
            alert('上传失败');
          }
      }
  };

  xhr.open('POST','/upload');
  xhr.send(formData);
}

// AJAX 传输JSON数据
function sendJSON() {
  var data = {
    "name": "张三","age": 18,"city": "北京"
  };

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            alert('处理成功');
          } else {
            alert('处理失败');
          }
      }
  };

  xhr.open('POST','/json');
  xhr.setRequestHeader('Content-Type','application/json');
  xhr.send(JSON.stringify(data));
}

上述代码中，ajax上传文件的方法是通过FormData对象将文件数据添加到请求中。而上传JSON数据的方式则是将数据转换成字符串并使用XHR对象发送到服务器，服务器方面需要使用JSON.parse()方法将JSON字符串转为对象进行处理。

AJAX的强大功能极大地提高了前端工程师的开发效率和用户的使用体验。借助AJAX，可以在不刷新整个页面的情况下，完成数据的异步传输、处理和呈现。