Ajax免刷新地前后端交互功能实例

Written by

in

文章目录

AJAX (Asynchronous JavaScript and XML) 是一种创建快速动态网页应用的开发技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。例如，在我们做爬虫的时候发现有些页面可以打开图片、视频等资源，但是无论我们怎么查找都无法查到资源的url到底在哪里，这就说明网页很有可能把资源的url藏在了javascript的代码中，通过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这样我们的服务器就会运行在指定的端口。再在终端打开测试即可。接下来我们点击按钮后发现，浏览器没有刷新页面就给我们加载出来了想要的信息。

在上面的代码中，我们每次点击按钮都会给我们进行一次请求，但是这样使用起来显然有点麻烦，我们如果输入某些验证类的东西，每次都要重新点击会加重我们的负担，那么在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 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写在一起，就会导致，数据还没有从服务器发过来就被开始处理，这通常会导致报错。测试后发现和之前相同，能正常使用

到此这篇关于Ajax免刷新地前后端交互功能的文章就介绍到这了,更多相关Ajax免刷新前后端交互内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！您可能感兴趣的文章: JQuery+Ajax无刷新分页的实例代码 jQuery+AJAX实现无刷新下拉加载更多 php+ajax实现无刷新动态加载数据技术 php ajax无刷新上传图片实例代码

AJAX (Asynchronous JavaScript and XML) 是一种创建快速动态网页应用的开发技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。例如，在我们做爬虫的时候发现有些页面可以打开图片、视频等资源，但是无论我们怎么查找都无法查到资源的url到底在哪里，这就说明网页很有可能把资源的url藏在了javascript的代码中，通过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这样我们的服务器就会运行在指定的端口。

再在终端打开测试即可。

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

在上面的代码中，我们每次点击按钮都会给我们进行一次请求，但是这样使用起来显然有点麻烦，我们如果输入某些验证类的东西，每次都要重新点击会加重我们的负担，那么在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 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写在一起，就会导致，数据还没有从服务器发过来就被开始处理，这通常会导致报错。

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

到此这篇关于Ajax免刷新地前后端交互功能的文章就介绍到这了,更多相关Ajax免刷新前后端交互内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！

您可能感兴趣的文章:

JQuery+Ajax无刷新分页的实例代码

jQuery+AJAX实现无刷新下拉加载更多

php+ajax实现无刷新动态加载数据技术

php ajax无刷新上传图片实例代码

华夏福临门盛世加强版怎么样？产品责任是重中之重

国寿福庆典版值得买吗？附投保建议

理财中低风险是几级？中低风险理财会亏吗

瑞泰泰安心防癌险优缺点是什么？这份分析不容错过

2020最新自助免费申请Office365教育版，免费5TOneDrive云盘详细图文教程

MacBook怎么绕过BootCamp安装Win10双系统？

国内知名的前端博客

域名为什么会被墙？如何检测域名是否被墙？域名被墙如何处理？

最新的windows xp sp3产品密匙 xp sp3序列号 xp sp3激活码

Ajax免刷新地前后端交互功能实例

目录

More posts

站内搜索

标签云

热门文章

友情链接