Ajax发送GET请求

要点：

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>

结果：

要点：

猜你喜欢