Ajax学习笔记

Ajax学习笔记

初识PHP

<?php
header('Content-type:text/html; charset=utf-8');

echo 'Hello World!';
$name = 'Pianpianluoye';
echo $name;
?>

php中拼接字符串用点’.’

Ajax

document.querySelector('input').onclick = function () {
	// 1. 创建异步对象
	var xhr = new XMLHttpRequest();
	// 2. 设置请求行
	xhr.open('post', 'backJSON.php');
	// 3. 设置请求头(get方法时可以省略，post方法如果不发送数据也可以省略)
	
	// 4. 注册状态改变事件（回调函数）
	xhr.onreadystatechange = function () {
		// 4.1 判断状态&请求是否成功并使用函数
		if (xhr.readyState == 4 && xhr.status == 200) {
			// JSON的载体是字符串，用即responseText可获取
			console.log(xhr.responseText);
			var arrObj = JSON.parse(xhr.responseText);
			for (var i =0; i<arr.length;i++) {
				var currentObj = arr[i];
				console.log(currentObj.name);
			}
		}
	}
	// 5. 发送请求
	xhr.send(null);
}

PHP代码

<?php

$jsonString = file_get_contents('data/stars.json');

echo $jsonString;

?>

JSON 文件

[
	{
	"name":"Pianpianluoye",
	"age":25
	},
	{
	"name":"Kevin",
	"age":24
	},
	{
	"name":"Ajax",
	"age":29
	}
]