Ajax------免刷新地前后端交互

本文略带PHP代码需要在PHP环境下使用

介绍

AJAX (Asynchronous JavaScript and XML) 是一种创建快速动态网页应用的开发技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。例如，在我们做爬虫的时候发现有些页面可以打开图片、视频等资源，但是无论我们怎么查找都无法查到资源的url到底在哪里，这就说明网页很有可能把资源的url藏在了javascript的代码中，通过XMLHttpRequest 对象向后端发送请求，在前端筛选处理信息并呈现出来。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

在这个html的代码中，我们设置了一个按钮，点击这个按钮就会触发函数ajax（），在ajax函数中，我们首先创建了一个XMLHttpRequest对象，接下来使用我们创建的对象向指定的url发送get请求，在加载完毕后（onreadystatechange）以后就会触发匿名函数，把请求的内容放到id为aj的标签里面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax</title><script>function ajax() {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {document.getElementById("aj").innerHTML = xhr.responseText;}}xhr.open("GET", "http://127.0.0.1:8000/a", true);xhr.send();}</script>
</head>
<body><button onclick="ajax()">click me</button><div id="aj"></div>
</body>
</html>

我们创建了一个服务器监听8000端口，并且设置这个网页的url为……/a，但是我们使用浏览器打开html文件以后发现，怎么点击按钮都打不开。

在束手无策的时候，我们不得已打开抓包工具，然后查看console(终端)发现它给我们的提示是：

这个报错给我们的提示大概内容是不允许我们的内容跨站加载（浏览器的同源策略），于是要想访问127.0.0.1：8000我们现在要做的就是把这个html文件也放到对应的url上。为了更快加载这些资源，我们这次选择php语言做服务端。

<?php$request_url = $_SERVER['REQUEST_URI'];$request_url = rtrim($request_url, '/');$request_url = ltrim($request_url, '/') ;switch($request_url){case 'a':echo "Hello from A";break;case 'b':if(file_exists("1.html")){include("1.html");                }else{echo "not found file 1.html";}break;default:echo "404 Not Found";break;}
?>

这个代码的大致思路是通过$_SERVER['REQUEST_URL']获得我们输入的url，在接下来的rtrim和ltrim函数中，我们把获得的url前后的'/'去掉，接下来通过switch根据不同的url向客户端返回不同的网页。之后我们在终端输入php -S 127.0.0.1:8000 filename.php这样我们的服务器就会运行在指定的端口。

再在终端打开测试即可。

接下来我们点击按钮后发现，浏览器没有刷新页面就给我们加载出来了想要的信息。

onkeyup

在上面的代码中，我们每次点击按钮都会给我们进行一次请求，但是这样使用起来显然有点麻烦，我们如果输入某些验证类的东西，每次都要重新点击会加重我们的负担，那么在html标签中给我们准备了onkeyup，让我们可以改变输入的值以后就会被浏览器检测到，进而让我们不再需要点击，而是直接输入改变值就可以和后端对接。

onkeyup 是一个HTML事件属性，用于在用户释放键盘上的某个键时触发指定的 JavaScript 函数或代码。这个事件通常用于捕获用户在输入框中输入的内容，并在用户停止输入时执行某些操作，例如实时搜索、验证输入或动态更新页面内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sub</title><script>function showHint(str) {if (str.length == 0) {document.getElementById("hint").innerHTML = "";return;} else {var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("hint").innerHTML = this.responseText;}};xmlhttp.open("GET", "http://127.0.0.1:8000/sub?id=" + str, true);xmlhttp.send();}}</script>
</head>
<body><input type="text" onkeyup="showHint(this.value)"><div id = "hint"></div>
</body>
</html>

在测试的过程中，我做了这样的一个前端代码，有一个文本输入的input我们每次输入数据都可以触发函数showHint()。接下来我们看一下服务端怎么构造。

<?php$request_url = $_SERVER['REQUEST_URI'];$request_url = rtrim($request_url, '/');$parsed_url = parse_url($request_url);$path = $parsed_url['path'] ?? '';$query = $parsed_url['query'] ?? '';$path = ltrim($path, '/');switch($path){case 'a':echo "Hello from A";break;case 'b':if(file_exists("1.html")){include("1.html");                }else{echo "not found file 1.html";}break;case 'sub':parse_str($query, $query_params);$id = $query_params['id'] ?? '';if(!isset($id) || empty($id)){include("2.html");}else if($id === '1'){echo "这是１";}else if($id === '2'){echo "这是２";}else{echo "not found";}break;default:echo "404 Not Found";break;}
?>

在这个代码中，我们输入的url为……/sub时就会呈现html文件，里面是一个输入框。我们可以传入参数，html文件会给我们的服务端发送带着id参数的请求，而不同的id则会触发不同的提示。

fetch函数

Fetch API 是一种现代的、功能强大的网络请求工具，它允许你通过 JavaScript 异步地请求资源，而不需要使用传统的 XMLHttpRequest 对象。Fetch API 可以简洁地发起 HTTP 请求，并处理服务器的响应。Fetch API 基于 Promise 设计，使得异步操作更加简洁和易于理解。

fetch函数的使用会让你的代码更加易读，使用它处理url会让代码更加优雅。它的基本使用方法是：

fetch(url).then(response => response.json()) // 解析 JSON 数据.then(data => console.log(data))   // 处理数据.catch(error => console.error('Error:', error)); // 错误处理

我们按照这种方法修改一下2.html的代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sub</title><script>function showHint(str) {if (str.length == 0) {document.getElementById("hint").innerHTML = "";return;} else {fetch("http://127.0.0.1:8000/sub?id=" + str).then(response => response.json()).then(data => {document.getElementById("hint").innerHTML = data.result;}).catch(error => console.log(error));}}</script>
</head>
<body><input type="text" onkeyup="showHint(this.value)"><div id = "hint"></div>
</body>
</html>

注意：一定要按照1.加载数据2.处理数据3.捕获异常的顺序，1和2不能合并在一起，因为js没有多线程的编程方法，这就导致了它的异步工作处理非常发达，如果1和2写在一起，就会导致，数据还没有从服务器发过来就被开始处理，这通常会导致报错。

测试后发现和之前相同，能正常使用