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

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

介绍

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

XMLHttpRequest 对象

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

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

html 复制代码

<!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 复制代码

<?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 函数或代码。这个事件通常用于捕获用户在输入框中输入的内容，并在用户停止输入时执行某些操作，例如实时搜索、验证输入或动态更新页面内容。

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 {
                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 复制代码

<?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会让代码更加优雅。它的基本使用方法是：

javascript 复制代码

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

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

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写在一起，就会导致，数据还没有从服务器发过来就被开始处理，这通常会导致报错。

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