Question

我刚刚开始使用AJAX，我想知道是否可以指定应该从AJAX调用返回的对象数量。

为了测试，我从here创建了一个JSON.db文件。

我的代码看起来像这样（使用Polymer web-component）：

HTML：

<body>
  <h1>Object-list</h1>
  <template is="dom-bind">
    <evo-object_list>
    </evo-object_list>
  </template>
  <h1 id = 'loadInHere'></h1>
  <button onclick = 'loadDoc()'>Load</button>
  <script>
    function loadDoc(){
      var element = document.querySelector('evo-object_list');
      element.loadDoc();
    }
  </script>
</body>

网络组分

loadDoc: function(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("loadInHere").innerHTML = xhttp.responseText;
     }
   }
   xhttp.open("GET", "db.json", true);
   xhttp.send();
 },

JSON

{ 
  "fathers" : [ 
    { 
      "id" : 0,
      "married" : false,
      "name" : "Ronald Taylor",
      "sons" : null,
      "daughters" : [ 
        { 
          "age" : 9,
          "name" : "Barbara"
        }
      ]
    },
  { 
    "id" : 1,
    "married" : false,
    "name" : "Kevin Lopez",
    "sons" : null,
    "daughters" : [ 
      { 
        "age" : 6,
        "name" : "Angela"
        }
      ]
    },
  { 
    "id" : 2,
    "married" : true,
    "name" : "Matthew Harris",
    "sons" : null,
    "daughters" : [ 
      { 
        "age" : 19,
        "name" : "Helen"
        }
      ]
    },
  { 
    "id" : 3,
    "married" : true,
    "name" : "Thomas Lewis",
    "sons" : null,
    "daughters" : [ 
      { 
        "age" : 16,
        "name" : "Michelle"
        },
      { 
        "age" : 8,
        "name" : "Dorothy"
        }
      ]
    },
  { 
    "id" : 4,
    "married" : true,
    "name" : "John Martin",
    "sons" : null,
    "daughters" : [
      ]
    }
  ]
}

etc.....

我的文件可能很长，我不想加载整个文件，是否可以定义文件中的哪些对象以及应该返回多少。例如，只有前三个父亲，然后重新点击按钮后接下来的三个？

我现在只是使用JSON进行测试，但可能还有其他我现在不知道的文件。

请仅提供纯javascript答案我不想使用jQuery

Answer 1

正如其他人所说，这主要是应该在服务器端实现的功能，但是为了向您提供一些指导，我们的想法是从JS端发送参数，例如：

// Note the limit parameter sent to the server
xhttp.open("GET", "db.json?limit=5", true);

// Note the page parameter sent to the server
xhttp.open("GET", "db.json?page=1", true);

// You can even set custom paginations!
xhttp.open("GET", "db.json?page=5&per_page=50", true);

此实现的一个示例是堆栈溢出问题列表，请注意URL中的参数

https://stackoverflow.com/questions?page=2&sort=newest

AJAX只加载和返回有限数量的对象

1 个答案: