Javascript 使用Ajax更改网页内容

我正在寻找使用Javascript AJAX动态更新网页内容的最佳方法

我的第一个想法是将各种

div

布局存储在各种文件中，每个布局描述不同的页面，例如：

基本分类：

<div>
    <p>Some Text</p>
    <button> A Button </button>
</div>

一些文本

钮扣

-然后在主网页内创建一个空的

div

，该内容将被更新，然后我制作一个

XMLHttpRequest

，并使用从所需文件加载的数据更新

div.innerHtml

这是使用AJAX的好方法还是您有更好的建议？

jquery AJAX

$.ajax({
  url: "test.php",
  type: "POST",
  data : { var:'val1',var2:'val2' }
}).done(function() { 
  $("<div>").innerHTML("done");
});

$.ajax({
url:“test.php”，
类型：“POST”，
数据：{var:'val1'，var2:'val2'}
}).done（函数（）{
$（“”）。innerHTML（“完成”）；
});