要点:
1.ajax主要体会异步思想,跟多线程的概念有些近似。原来的js执行是单线程的,也就是从上到下执行,不会等待,而ajax遇到是多线程的,不是按照代码从上到下顺序执行,是简单的代码先执行完,复杂的或者耗时长的最后执行完。所有在这个例子中,我们为list的多个li标签分别绑定事件需要在异步操作中执行,并且注意顺序。
2.ajax状态码信息共有5个,我们只关心ajax请求完成之后的状态信息 readyState == 4,这时再拿到 请求的结果来完善业务功能。
php文件
<?php
$data = array(
array(
'id' => 1,
'name' => 'chenxiaoshuai',
'qq' => '2323010676'
),
array(
'id' => 2,
'name' => 'chendashuai',
'qq' => '3199578835'
),
array(
'id' => 3,
'name' => 'chenshuaishuai',
'qq' => '2323010676'
)
);
if(empty($_GET['id'])){
//没有传递id,传入全部值,并将数据转换成http约定格式(一般是json)的内容
$json = json_encode($data);
echo $json;
}else{
foreach($data as $item){
if($item['id'] != $_GET['id']) continue;
$json = json_encode($item);
echo $json;
}
}
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GET请求并传递参数</title>
</head>
<body>
<ol id="list"></ol>
<script type="text/javascript">
var listElement = document.getElementById('list')
var xhr = new XMLHttpRequest()
// 创建请求代理对象
xhr.open('GET','shuaiges.php')
// 请求行,设置请求方式和请求页面
xhr.send(null)
// 请求体,get方式一般不设置
xhr.onreadystatechange = function(){
if(this.readyState == 4) {
// 如果状态码等于4,则表明响应体已经下载完成,才能继续执行下面的操作
var data = JSON.parse(this.responseText)
// 将文本格式响应体转换成JSON格式
for(var i=0; i<data.length; i++){
var liElement = document.createElement('li')
liElement.innerHTML = data[i].name
// 将获取到的json格式文件,直接通过.name可以获取其中一个属性
liElement.id = data[i].id
listElement.appendChild(liElement)
// 注意先要将li标签添加到list伪数组对象中
listElement.children[i].addEventListener('click',function(){
var xhr2 = new XMLHttpRequest()
xhr2.open('GET','shuaiges.php?id=' + this.id)
// 将查询字符串中添加查询条件
xhr2.send(null)
xhr2.onreadystatechange = function(){
if (this.readyState == 4){
var idObj = JSON.parse(this.responseText)
alert(idObj.qq)
}
}
})
// 注意为创建的事件注册绑定事件,不能在这个异步操作结束后执行,因为异步操作是需要一段时间
// 来进行代码的执行的
}
}
}
// 上面一段代码,是为动态创建与shuaiges.php中数据相匹配的li标签
</script>
</body>
</html>
结果: