我无法理解AJAX与普通HTTP方法的区别在于什么？

我知道AJAX仅重新加载网页的某些部分而不刷新整个页面的所有东西，不像HTTP必须重新刷新。

我创建了一个TODO应用程序来尝试两种不同的方法：

这是我的HTML有两个按钮submit用于HTTP方法发布，click button用于AJAX调用

<form id="todos" action='/addTodo' method='POST'>
  <input id="inputTodo" name='todo' />
  <input type="submit" value="Add Todo" />
  <input id="button" type="button" name="todoAjax" value="Add Todo Using AJAX" />
</form>

这是我的AJAX电话

$(document).ready(function() {
  $("#button").click(function(e) {
    e.preventDefault();

    let todo = {
      'todo': $('#inputTodo').val()
    };

    $.ajax({
      type: "POST",
      url: "/addTodo",
      data: todo,
      success: function(todo) {
        location.reload();
      }
    });
  });
});

这是post请求的后端处理程序

app.post('/addTodo', function(req, res) 
{
  var todo = req.body.todo;

  userModel.update({
    _id: req.user._id
  }, {
    $push: {
      todos: todo
    }
  }, function(err, done) {
    if (err)
      return err;
    return done;
  });
  res.redirect('/profile');
});

在这两种方法中，我用来刷新整个页面以查看在常规http方法中使用res.redirect和在AJAX方法中使用location.reload()添加的TODO，不应该AJAX方法添加TODO而不刷新页面吗？

而不是在Ajax中执行location.reload()，您可以在内部添加div，您可以在其中使用/ profile放置内容

$('#todos').before('<div id="profile"></div>');

然后使用隐藏表单

$('#todos').hide();

最后呢

$('#profile').load(todos.body.loc + '#idOfContentInProfilePage');

你的app.post而不是res.redirect（'/ profile'）在哪里，你可以做res.end({"loc": "/profile"});

如果个人资料页面是一个完全不同的页面，内容和样式有完全变化，那么您可能需要重定向。