ajax遍历的方法例子
时间: 2023-05-31 16:03:36 浏览: 37
下面是一个使用Ajax遍历的简单示例:
HTML代码:
```
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
```
JavaScript代码:
```
// 获取ul元素
var ul = document.getElementById("myList");
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 将响应文本解析为JSON对象
var data = JSON.parse(xhr.responseText);
// 遍历JSON对象中的数据
for (var i = 0; i < data.length; i++) {
// 创建新的li元素
var li = document.createElement("li");
// 设置li元素的文本内容
li.appendChild(document.createTextNode(data[i]));
// 将li元素添加到ul元素中
ul.appendChild(li);
}
}
};
// 发送Ajax请求
xhr.open("GET", "data.json", true);
xhr.send();
```
上面的代码首先获取了id为myList的ul元素,然后创建了一个XMLHttpRequest对象。在设置了回调函数之后,使用open()和send()方法发送了一个GET请求,请求的数据来源是data.json文件。
当服务器返回响应时,回调函数会被调用。在回调函数中,我们将响应文本解析为JSON对象,然后遍历JSON对象中的数据并将它们添加为新的li元素,最后将这些li元素添加到ul元素中。