GET请求
通常在一次 GET 请求过程中,参数传递都是通过 URL 地址中的 ? 参数传递
var xhr = new XMLHttpRequest()
// 这里任然是使用URL中的问号参数传递数据
xhr.open('GET', 'users.php?id=2')
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState !== 4 && this.state !== 200) return
console.log(this.responseText)
}
练习: 发送请求, 获取列表数据, 呈现在页面
//获取ul
var ulList = document.getElementById('list')
// 发送请求获取列表数据呈现在页面
// =======================================
var xhr = new XMLHttpRequest()
xhr.open('GET', 'users.php')
xhr.send()
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
var data = JSON.parse(this.responseText)
// data => 数据
//遍历循环,动态创建li, 把li添加到ul里面
for (var i = 0; i < data.length; i++) {
//动态创建li
var liElement = document.createElement('li')
//设置li的名字为接收到数据data的名字 name
//设置li的id为接收到数据data的id
liElement.innerHTML = data[i].name
liElement.id = data[i].id
//把li添加到ul里面
ulList.appendChild(liElement)
//给li添加点击事件
liElement.addEventListener('click', function () {
// TODO: 通过AJAX操作获取服务端对应数据的信息
// 如何获取当前被点击元素对应的数据的ID
// console.log(this.id)
var xhr1 = new XMLHttpRequest()
xhr1.open('GET', 'users.php?id=' + this.id)//获取当前被点击元素对应的数据的ID
xhr1.send()
xhr1.onreadystatechange = function () {
if (this.readyState !== 4) return
var obj = JSON.parse(this.responseText)
alert(obj.age)
}
})
}
}