原生Ajax之全面了解xhr的概念与使用

什么是Ajax？

Ajax是指使用JavaScript、XMLHttpRequest对象、DOM、CSS等技术在不刷新页面的情况下实现异步更新页面数据的一种技术。我们通常使用Ajax来实现动态加载数据、实时交互等功能。

XMLHttpRequest对象

XMLHttpRequest对象是Ajax的核心之一。它是浏览器提供的一个对象，使用该对象可以和服务器进行异步通信。

XMLHttpRequest对象的创建和使用

我们可以使用以下代码创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

接下来，我们需要给XMLHttpRequest对象设置一些参数和事件监听器，然后向服务器发送请求。

常见的XMLHttpRequest对象的API：

open(method, url, async): 设置请求方式、请求URL和请求是否异步。
setRequestHeader(name, value): 设置请求头信息。
send(data): 发送请求数据。

以下是一个完整的使用XMLHttpRequest对象向服务器发送请求并获取响应的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    console.log(response);
  }
};
xhr.send();

在此示例中，我们向服务器发送了一个GET请求，请求的URL为/api/user，请求方式是异步的。同时，我们设置了一个请求头信息，即Content-Type为application/json。当服务器返回响应后，触发onreadystatechange事件，我们通过判断状态码（readyState为4表示请求已完成，status为200表示请求成功）来获取响应数据。

使用Promise封装XMLHttpRequest对象

为了避免代码嵌套过深而难以阅读，我们可以使用Promise封装XMLHttpRequest对象。

以下是一个使用Promise封装XMLHttpRequest对象的示例：

function request(method, url, data = null, headers = {}) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    Object.keys(headers).forEach(function(name) {
      xhr.setRequestHeader(name, headers[name]);
    });
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.response);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network Error'));
    };
    xhr.send(data);
  });
}

我们封装了一个request方法，该方法接受method、url、data和headers作为参数。在方法体内部，我们创建了一个XMLHttpRequest对象，同时设置了一些请求参数和响应事件监听器。当请求完成后，如果响应状态码在200到299之间，我们将响应数据通过Promise的resolve方法返回；否则，我们将请求错误通过Promise的reject方法返回。

示例一：使用Ajax实现动态加载列表数据

假设我们有一个列表页面，需要通过Ajax从后端获取数据并动态地渲染到页面上。

首先，我们需要创建一个接口用于获取数据。我们将使用Node.js创建一个基于Express框架的简单服务器，返回一个JSON格式数据。

var express = require('express');
var app = express();

app.get('/api/list', function(req, res) {
  var data = [
    {name: 'Alice', age: 20},
    {name: 'Bob', age: 21},
    {name: 'Charlie', age: 22}
  ];
  res.json(data);
});

app.listen(3000, function() {
  console.log('Server listening on port 3000.');
});

接着，我们可以在前端页面中使用Ajax发送请求，获取数据，然后动态地渲染到页面上。

<!DOCTYPE html>
<html>
<head>
  <title>Ajax示例一</title>
</head>
<body>
  <ul id="list"></ul>
  <script>
    function getList() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/api/list', true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText);
          var html = '';
          data.forEach(function(item) {
            html += '<li>' + item.name + ', ' + item.age + '</li>';
          });
          document.getElementById('list').innerHTML = html;
        }
      };
      xhr.send();
    }
    getList();
  </script>
</body>
</html>

在该示例中，我们创建了一个GET请求，请求URL为/api/list。当获取到响应数据后，我们将数据动态地渲染到页面上。

示例二：使用Ajax实现图片上传

假设我们有一个上传图片的功能，需要通过Ajax上传图片并实时地将上传进度显示到页面上。

首先，我们需要在HTML页面中添加一个上传文件的表单，并添加一个用于显示上传进度的进度条。

<!DOCTYPE html>
<html>
<head>
  <title>Ajax示例二</title>
</head>
<body>
  <form enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">上传</button>
    <progress id="progress" value="0" max="100"></progress>
  </form>
  <script>
    var form = document.querySelector('form');
    var progress = document.getElementById('progress');

    form.addEventListener('submit', function(event) {
      event.preventDefault();

      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/api/upload', true);
      xhr.setRequestHeader('Content-Type', 'multipart/form-data');
      xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
          progress.value = (event.loaded / event.total) * 100;
        }
      };
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          alert('文件上传成功！');
        }
      };
      xhr.send(new FormData(form));
    });
  </script>
</body>
</html>

在该示例中，我们创建了一个POST请求，请求URL为/api/upload。同时，我们使用FormData对象将文件数据和表单数据一起发送到服务器端。当上传进度发生变化时，我们将进度实时地显示到页面上。

接着，我们需要在Node.js服务器端接收请求，并存储上传的文件。

var multer = require('multer');
var upload = multer();

app.post('/api/upload', upload.single('file'), function(req, res, next) {
  var file = req.file;
  console.log(file);
  res.send('文件上传成功！');
});

我们使用了Node.js的multer库来处理文件上传。当上传完成后，我们将返回一个简单的成功消息。

注：在实际开发中，为了保证上传的安全性，可以对上传的文件做一些文件类型、文件大小等方面的限制。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生Ajax之全面了解xhr的概念与使用 - Python技术站

原生Ajax之全面了解xhr的概念与使用

原生Ajax之全面了解xhr的概念与使用

什么是Ajax？

XMLHttpRequest对象

XMLHttpRequest对象的创建和使用

使用Promise封装XMLHttpRequest对象

示例一：使用Ajax实现动态加载列表数据

示例二：使用Ajax实现图片上传

相关文章