AJAX请求PHP文件

1.AJAX 简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
2.AJAX 是什么?
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种用于创建快速动态网页的技术。
AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。
3.AJAX 如何工作
在这里插入图片描述
AJAX 基于因特网标准
AJAX 基于因特网标准,并使用以下技术组合:
XMLHttpRequest 对象(与服务器异步交互数据)
JavaScript/DOM(显示/取回信息)
CSS(设置数据的样式)
XML(常用作数据传输的格式)
lamp AJAX 应用程序与浏览器和平台无关的!
AJAX 被用于创建交互性更强的应用程序。
实例:在这里插入图片描述
页面代码:
通过 JavaScript 调用的服务器页面是名为 “DOM2.php” 的 PHP 文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2</title>
		<script type="text/javascript">
			window.onload=function(){
				var btn = document.querySelector('#btn');
				var namep = document.querySelector('#p');
				var nameValue= document.getElementById('name').value;
				var passwordValue  = document.querySelector('#password').value;
				//btn添加点击事件
				btn.onclick = function() {
					//创建一个XMLHttpRequest异步对象
					var xmlHttp = new XMLHttpRequest();
					//设置请求方式和请求地址
					xmlHttp.open('GET','DOM2.php?username='+nameValue+'&userpassword='+passwordValue,true)
					// 用send发送请求
					xmlHttp.send(null);
					// 监听状态变化
					xmlHttp.onreadystatechange = function() {
						if(xmlHttp.readyState == 4 &&  xmlHttp.status == 200){
							//接收返回的数据
							console.log(xmlHttp.responseText);
							if(xmlHttp.responseText == 1){
							//页面p标签中显示
								namep.innerText = '成功';
							}
						}
					}	 
				}
			}

		</script>
	</head>
	<body>
		<form>
			<label>姓名:</label>
			<input type="text" name="username"  id="name" value=""/><br>
			<label>密码:</label>
			<input type="password" name="userpassword" id="password" value="" /><br>
			<input type="button"  value="提交" id="btn"/><br>
		</form>
		<p id="p"></p>
	</body>
</html>

对应PHP文件代码:

<?php
	$username = $_GET["username"];
	$userpassword = $_GET["userpassword"];
	if($username == 'admin' && $userpassword == '123' ){
		echo "1";
	}else{
		echo "2" ;
	}
?>

get和post请求的区别?
(1)post更安全(不会作为url的一部分,不会被缓存、保存在服务器日志、以及浏览器浏览记录中)
(2)post发送的数据更大(get有url长度限制)
(3)post能发送更多的数据类型(get只能发送ASCII字符)
(4)post比get慢
(5)post用于修改和写入数据,get一般用于搜索排序和筛选之类的操作(淘宝,支付宝的搜索查询都是get提交),目的是资源的获取,读取数据
.html文件中代码区别
//get方式

//创建一个XMLHttpRequest异步对象
					var xmlHttp = new XMLHttpRequest();
					//设置请求方式和请求地址
					xmlHttp.open('GET','DOM2.php?username='+nameValue+'&userpassword='+passwordValue,true)
					// 用send发送请求
					xmlHttp.send(null);
					// 监听状态变化
					xmlHttp.onreadystatechange = function() {
						if(xmlHttp.readyState == 4 &&  xmlHttp.status == 200){
							//接收返回的数据
							console.log(xmlHttp.responseText);
							if(xmlHttp.responseText == 1){
								namep.innerText = '成功';
							}
						}
					}	 
				}

//post方式

	var userBean = "userName=" + unValue +"&userPassword="+ pdValue
		//创建JSON对象
		var xmlHttp = new XMLHttpRequest();
		//准备发送请求
		xmlHttp.open('POST','DOM5(xmlphp).php',true);
		//设置请求头
		xmlHttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
		//发送请求
		xmlHttp.send(userBean);
		//事件监听
		xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				if(xmlHttp.responseBody== 1){
					hh.innerHTML = "成功";
				}else{
					hh.innerHTML = "失败";
				}
			}
		}

对应PHP文件代码:
//get方式

$username = $_GET["username"];
$userpassword = $_GET["userpassword"];

//post方式

$username = $_POST["username"];
$userpassword =$_POST["userpassword"];
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页