APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > Ajax >

收藏
分享到

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

Ajax 来源：互联网 作者：佚名 发布时间：2025-08-17 10:37:47 人浏览
摘要

介绍 AJAX (Asynchronous JavaScript and XML) 是一种创建快速动态网页应用的开发技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。例如，在我们做爬虫的时候

介绍

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

XMLHttpRequest 对象

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!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语言做服务端。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!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()。接下来我们看一下服务端怎么构造。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

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

1

2

3

4

fetch(url)

  .then(response => response.json()) // 解析 JSON 数据

  .then(data => console.log(data))   // 处理数据

  .catch(error => console.error('Error:', error)); // 错误处理

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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

测试后发现和之前相同，能正常使用
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

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

    Ajax免刷新地前后端交互功能
    介绍 AJAX (Asynchronous JavaScript and XML) 是一种创建快速动态网页应用的开发技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数
  • Django使用AJAX向服务器发起请求的操作方法
    AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术，它允许在不重新加载整个页面的情况下向服务器发送和接收数据

  • AJAX原理以及axios、fetch区别

    AJAX原理以及axios、fetch区别
    AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，

  • Ajax实现上传图像功能

    Ajax实现上传图像功能
    最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

  • Ajax的疑难杂症介绍

    Ajax的疑难杂症介绍
    跨域问题 如图所示，这是通过jquery封装的ajax请求了一个本地的php文件（无框架），console提示CORS策略已阻止来自来源的null：请求的资源上不

  • 前端实现滑动按钮AJAX与后端交互的代码

    前端实现滑动按钮AJAX与后端交互的代码
    html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1

  • AJAX实现省市县三级联动效果

    AJAX实现省市县三级联动效果
    （tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现） 效果图 首先准备两个服务端文件，另一个文件太长，这里就不

  • AJAX实现指定部分页面刷新效果的代码

    AJAX实现指定部分页面刷新效果的代码
    需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。 这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF

  • Ajax实现三级联动的代码

    Ajax实现三级联动的代码
    一、导入数据表和gson.jar 该表包括了中国所有的
  • AJAX实现注册验证用户名的代码
    功能说明 当用户在注册页面输入用户名并且鼠标焦点离开输入框时，到数据表中去验证该用户名是否已经存在，如果存在提示不可用，否则
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计