PHP教程学习09：PHP与Ajax

最新推荐文章于 2024-04-20 05:15:00 发布

宝怡

最新推荐文章于 2024-04-20 05:15:00 发布

阅读量112

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/weixin_41360604/article/details/97101368

版权

PHP 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

学习教程来源于:
PHP中文网教程 PHP与Ajax极速入门
 PHP官网PHP手册(简体中文)链接

什么是客户端

在这里插入图片描述

什么是Ajax

在这里插入图片描述

同步与异步

同步与异步：
客户端与服务端是否处理的是同一个请求，是则同步，否则异步。

同步：用户发出url请求，服务器接收请求并处理，处理过程中，客户端用户需要等待请求响应完成后才会进行下一步的工作(开始下一个请求)。等待响应返回的过程也是请求的一部分

异步：用户发出请求后不必等待请求的响应，就可以发出下一个请求，此过程中，他还会不断的监听第一个请求是否响应成功，若第一个响应成功，就立刻处理这个响应。

Ajax脚本的结构：
1.创建Ajax对象
2.设置onreadystatechange事件回调，处理响应返回的数据
3.初始化一个请求：执行xhr的open()方法
4.设置请求头信息(可选):get请求可略过，post请求需要设置请求头信息(文档类型
5.发送请求：send()

var xhr = new XMLHTTPRequest();	//创建Ajax对象
xhr.onreadystatechange=function(){//检测请求状态的变化
//如果请求完成并成功返回
	if(this.redyState==4 && this.status==200){
		doucment.getElementById('res').innerHtml = xhr.responseText;

	}
}
xhr.open('get','test.txt',true);//true异步
xhr.send(null);//不传任何参数，有的浏览器依赖参数null

XMLHTTPRequest

在这里插入图片描述

虽然responseText返回的是json，却是json的字符串格式

Ajax:GET

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
</head>
<body>
	<div align="center">
		<h3>用户登录</h3>
		<form action="" method="get">
			<p>账号：<input type="text" name="name" id="name"/></p>
			<p>密码：<input type="password" name="password" id="password"></p>
			<p><input type="submit" id="submit" value="提交"></p>
			<p id="tips"></p>
		</form>	
	</div>



	<script>
		var submit = document.getElementById('submit');	//获取提交按钮
		submit.onclick = function(){
			//1.创建Ajax对象
			var xhr = new XMLHttpRequest();
			//2.创建请求监听事件
			xhr.onreadystatechange = function(){
				if (xhr.readyState==4 && xhr.status==200) {
					console.log(typeof xhr.responseText);
					//解析返回的json字符串
					var json = JSON.parse(xhr.responseText);
					var tips = document.getElementById('tips');
					tips.innerHTML = '欢迎用户'+json.name+'再次回来';
				}
			}
			//3.初始化一个URL请求
			var user = document.getElementById('name').value;
			var password = document.getElementById('password').value;
			var url = 'check.php?name='+user+'&password='+password;	//生成url地址
			xhr.open('get',url,true);	//请求类型为get，交互方式为异步
			//4.发送URL请求
			xhr.send(null);	//get请求需要传递null
			return false;	//禁止提交按钮的默认行为
		}
	</script>
</body>
</html>

Ajax:POST

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
</head>
<body>
	<div align="center">
		<h3>用户登录</h3>
		<form action="" method="get">
			<p>账号：<input type="text" name="name" id="name"/></p>
			<p>密码：<input type="password" name="password" id="password"></p>
			<p><input type="submit" id="submit" value="提交"></p>
			<p id="tips"></p>
		</form>	
	</div>



	<script>
		var submit = document.getElementById('submit');	//获取提交按钮
		submit.onclick = function(){
			//1.创建Ajax对象
			var xhr = new XMLHttpRequest();
			//2.创建请求监听事件
			xhr.onreadystatechange = function(){
				if (xhr.readyState==4 && xhr.status==200) {
					console.log(typeof xhr.responseText);
					//解析返回的json字符串
					var json = JSON.parse(xhr.responseText);
					var tips = document.getElementById('tips');
					tips.innerHTML = '欢迎用户'+json.name+'再次回来';
				}
			}
			//3.初始化一个URL请求
			var user = document.getElementById('name').value;
			var password = document.getElementById('password').value;
			var data = 'name='+user+'&password='+password;	//生成post请求数据
			var url = 'check.php';	//生成url地址
			xhr.open('post',url,true);	//请求类型为get，交互方式为异步
			//4.设置请求头
			xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
			//5.发送URL请求,需要传入参数
			xhr.send(data);	//get请求需要传递null
			return false;	//禁止提交按钮的默认行为
		}
	</script>
</body>
</html>

check.php

<?php 
// echo '<pre>';
// print_r($_GET);
// echo '</pre>';
// echo json_encode($_GET);
$userLsit = ['peter','jack','mike'];	//已注册用户列表
$user = isset($_POST['name']) ? $_POST['name'] : '';
echo in_array($user, $userLsit) ? 1 : 0;//如果用户名不在列表中返回0，否则返回1
// echo json_encode($_POST);
?>

小例子：检查用户名是否存在

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
</head>
<body>
	<div align="center">
		<h3>用户登录</h3>
		<form action="" method="get">
			<p>账号：<input type="text" name="name" id="name"/></p>
			<span id="warning" style="color: red"></span>
			<p>密码：<input type="password" name="password" id="password"></p>
			<p><input type="submit" id="submit" value="提交"></p>
			<p id="tips"></p>
		</form>	
	</div>



	<script>
		var user = document.getElementById('name');	//获取用户控件
		user.onblur = function(){//当用户离开当前文本框时进行验证
			//1.创建Ajax对象
			var xhr = new XMLHttpRequest();
			//2.创建请求监听事件
			xhr.onreadystatechange = function(){
				if (xhr.readyState==4 && xhr.status==200) {
					console.log(xhr.responseText);
					if (xhr.responseText == 0) {//用户名不存在
						var warning = document.getElementById('warning');
						warning.innerHTML = '新用户请先注册再登录~~';
						document.getElementById('submit'),disable = true;

					}
				}
			}
			//3.初始化一个URL请求
			var user = document.getElementById('name').value;
			var password = document.getElementById('password').value;
			var data = 'name='+user+'&password='+password;	//生成post请求数据
			var url = 'check.php';	//生成url地址
			xhr.open('post',url,true);	//请求类型为get，交互方式为异步
			//4.设置请求头
			xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
			//5.发送URL请求,需要传入参数
			xhr.send(data);	//get请求需要传递null
			
			var submit = document.getElementById('submit');
			submit.onclick = function(){
				var tips = document.getElementById('tips');
				tips.innerHTML = '验证通过，正在跳转~~';
				return false;
			}
		}
	</script>
</body>
</html>