Ajax学习笔记

最新推荐文章于 2025-12-02 09:54:47 发布

原创最新推荐文章于 2025-12-02 09:54:47 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

前端学习专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何使用Ajax进行异步数据请求，通过点击事件触发XMLHttpRequest对象，设置请求方法和URL，处理响应状态。示例中展示了从PHP后端获取JSON数据，解析并遍历JSON数组，打印出成员的name属性。PHP部分则通过file_get_contents读取JSON文件并返回数据。

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
	}
]