![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：想一下, 如果不用ajax,应该如何实现同样功能
Collection
Collection
AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
异步最常用的处理形式就是回调函数
XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequests 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。xhr=new XMLHttpRequest();IE5 和 IE6，可以检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xhr;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixhr = new XMLHttpRequest();} else {// code for IE6, IE5xhr = new ActiveXObject("Microsoft.XMLHTTP");}
async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：| 属性 | 状态 |
|---|---|
| onreadystatechange | 每当 readyState 属性改变时，就会调用该函数。 |
| readyState | - 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪 |
| status | 200: “OK”,404: 未找到页面 |
xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {document.getElementById("myDiv").innerHTML = xhr.responseText;}};
XMLHttpRequest 对象的 open()方法：open(method,url,async)
method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
XMLHttpRequest 对象的send()send(string),将请求发送到服务器。string：仅用于 POST 请求GET 简单也快，并且在大部分情况下都能用。无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//1.创建xhr对象var xhr = new XMLHttpRequest();//2.监听请求xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}};//3.初始化请求参数xhr.open("GET", "get.php", "true");//4.发送请求xhr.send(null);</script></body></html>
<?php$user['name'] = 'Nicola';$user['email'] = 'admin@aoebbs.cn';//将数组转为json字符串必须用echo不能用returnecho json_encode($user);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//1.创建xhr对象var xhr = new XMLHttpRequest();//2.监听请求xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}};//3.初始化请求参数xhr.open("POST", "post.php", "true");//4.设置请求头xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//准备请求参数var use = {email: "admin@nicola.com",password: "123456",};//把js对象转为json字符串var data = JSON.stringify(use);//5.发送请求xhr.send(data);</script></body></html>
<?php// print_r($_POST);$data = key($_POST);// echo $data;//$data转为可以处理的数据$user = json_decode($data);print_r($user);$user = json_decode($data, true);print_r($user);
xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");php://input
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//1.创建xhr对象var xhr = new XMLHttpRequest();//2.监听请求xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}};//3.初始化请求参数xhr.open("POST", "post2.php", "true");//4.设置请求头,这里变更为json，请求格式是utf-8xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");//准备请求参数var use = {email: "admin@nicola.com",password: "123456",};//把js对象转为json字符串var data = JSON.stringify(use);//5.发送请求xhr.send(data);</script></body></html>
<?php// print_r($_POST);$data = file_get_contents('php://input');// 用原始文件流的方式来接受// $data = key($_POST);// // echo $data;// //$data转为可以处理的数据$user = json_decode($data);print_r($user);$user = json_decode($data, true);print_r($user);
FormData的方式向服务器发送表单数据，服务器端会自动识别FormData对象，可以不用设置请求头,通过JSON.parse()；把服务器返回的 JSON 转为 JS 对象。判断用户输入的信息和服务器端的信息是否匹配。如果不匹配则向网页中输出相应的提示信息
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>// - 可直接序列化表单数据// - 可直接被 Ajax 识别,所以可以不设置请求头// - 除了表单数据外,也可用于普通数据//1.创建xhr对象var xhr = new XMLHttpRequest();//2.监听请求xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}};//3.初始化请求参数xhr.open("POST", "formdata.php", "true");//formdatavar data = new FormData();data.append("username", "admin");data.append("password", "admin8888");//5.发送请求xhr.send(data);</script></body></html>
<?phpprint_r($_POST);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>用户登录表单验证</title></head><body><p>用户登录表单验证</p><!-- onsubmit="return false": 禁用表单的默认提交,改为自定义的Ajax提交 --><formaction=""method="POST"style="display: grid; gap: 15px;"onsubmit="return false"><inputtype="email"name="email"placeholder="请输入你的邮箱"requiredautofocus/><inputtype="password"name="password"placeholder="请输入你的密码"required/><button>提交</button></form><script>// 1. 获取表单和按钮var form = document.querySelector("form");var btn = document.querySelector("form button");// 2. 给按钮绑定点击事件,进行Ajax请求btn.onclick = function () {// 1. 创建Ajax对象var xhr = new XMLHttpRequest();// 2. 监听请求xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);// 将jsonl转js对象var res = JSON.parse(xhr.responseText);console.log(res);switch (res.status) {case 0:case 1:error = res.message;break;default:error = "非法操作，请联系管理员";}// 将提示显示到表单中var span = document.createElement("span");span.innerHTML = error;span.style.color = "red";form.appendChild(span);}};// 3. 初始化请求参数xhr.open("POST", "formdata.php", true);// FormDatavar data = new FormData(form);data.append("login_time", new Date().getTime());// 5. 发送请求xhr.send(data);};// 清除提示信息var inputs = document.querySelectorAll("input");for (var i = 0; i < inputs.length; i++) {inputs[i].oninput = function () {if (btn.nextElementSibling !== null)form.removeChild(btn.nextElementSibling);};}</script></body></html>
FormData 的方式向服务器发送表单数据，服务器端会自动识别 FormData对象
// FormDatavar data = new FormData(form);data.append("login_time", new Date().getTime());// 5. 发送请求xhr.send(data);
php $sql = 'SELECT COUNT(`id`) FROM `user` WHERE `email`=? AND `password`=? LIMIT 1';
<?php// print_r($_POST);//pod方式连接数据库$pdo = new PDO('mysql:host=localhost;dbname=php', 'root', 'root123456');//sql语句从数据库查询已有的用户数据$sql = 'SELECT COUNT(`id`) FROM `user` WHERE `email`=? AND `password`=? LIMIT 1';// 预处理sql语句，防止sql注入$stmt = $pdo->prepare($sql);//传入参数，通过post方式获取用户提交的表单信息，核对邮箱和加密后的密文是否和数据库中储存的信息一致$stmt->execute([$_POST['email'], md5($_POST['password'])]);// 获取用户的信息$user = $stmt->fetch(PDO::FETCH_NUM);// 判断是否验证成功if ($user[0] == 1) echo json_encode(['status' => 1, 'message' => '验证通过']);else echo json_encode(['status' => 0, 'message' => '邮箱或密码错误']);
ajax不是新的编程语言，而是一种使用现有标准的新方法。在不重新加载整个页面的情况下，ajax是与服务器交换数据并更新部分网页的艺术。但是通过做一个登录验证的小案例，我也发现了ajax的一些缺点，比如，ajax不支持浏览器back按钮,AJAX暴露了与服务器交互的细节,涉及到了安全的问题，不容易调试等等。但是他的优点还是非常突出的，所以就看程序员怎么去使用了。