从零开始学习 AJAX：超详细！15 分钟搞定 AJAX 原理和使用方法_ajax学习教程-程序员宅基地

文章目录

一、AJAX是什么？
二、工作原理
三、应用
四、安全性
五、项目代码示例
总结

一、AJAX是什么？

AJAX（Asynchronous JavaScript and XML）是一种用于向服务器异步发送 HTTP 请求并接收响应的技术。在传统的 Web 应用程序中，用户与服务器进行交互时必须刷新整个页面才能显示新的内容。而 AJAX 技术通过在后台发送异步 HTTP 请求并接收响应，使得用户能够在不刷新整个页面的情况下获取更新后的数据。因此，AJAX 技术可以减少网络带宽的占用，并提高用户交互的效率和流畅度，使得 Web 应用程序更加灵活和可靠。

二、工作原理

1.发送请求

客户端通过 JavaScript 发送 AJAX 请求，可以是 GET 或 POST 方式，也可以发送 JSON 或其它格式的数据。
例如：

$.ajax({
    
  url: "/api/getUserInfo",
  type: "GET",
  data: {
     userId: 123 },
  dataType: "json",
  success: function(result) {
    
    console.log(result);
  },
  error: function(xhr, status, error) {
    
    console.log(error);
  }
});

2.处理请求

HTTP 请求被发送到服务器，并被后端代码处理。后端代码可以使用 Java、PHP、Python 等多种编程语言来实现，返回数据通常是 JSON 或其它格式的字符串。
例如：

$userId = $_GET["userId"];
$userInfo = getUserInfo($userId);
echo json_encode($userInfo);

3.处理响应

前端 JavaScript 代码接收到后端返回的数据，根据数据类型进行解析和处理。对于 JSON 格式数据，通常使用 JSON.parse() 方法将字符串转换为对象。
例如：

success: function(result) {
    
  var userInfo = JSON.parse(result);
  // ...
}

4.更新页面

最终，前端 JavaScript 代码使用 DOM 操作更新页面内容，以此实现无需刷新页面即可更新数据的效果。
例如：

success: function(result) {
    
  var userInfo = JSON.parse(result);
  $("#name").text(userInfo.name);
  $("#age").text(userInfo.age);
  $("#sex").text(userInfo.sex);
  // ...
}

三、应用

AJAX 技术被广泛应用于各种动态Web 应用程序中，包括创建动态网页、自动填充表单、无刷新上传文件、实时搜索、交互式快速响应等功能。同时，AJAX 技术也可以处理和显示各种格式的数据，如 JSON 和 XML 等。许多流行的 JavaScript 框架，如 jQuery、AngularJS 和 React 等，都提供了丰富的 AJAX 功能，方便开发者使用。例如;

1.数据加载

AJAX 可以通过异步请求后端服务器获取数据并将其显示在网页上，让页面变得更加动态和用户友好。比如下面的代码演示了如何使用 AJAX 请求一个 JSON 格式的数据，并将其渲染到网页上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX Demo</title>
</head>
<body>
  <h1>User Info</h1>
  <ul id="user-info-list"></ul>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $.ajax({
      
      url: "/api/getUserInfo",
      type: "GET",
      data: {
       userId: 123 },
      dataType: "json",
      success: function(result) {
      
        var userInfoList = $("#user-info-list");
        $.each(result, function(i, user) {
      
          var item = $("<li>").text(user.name + ": " + user.age);
          userInfoList.append(item);
        });
      },
      error: function(xhr, status, error) {
      
        console.log(error);
      }
    });
  </script>
</body>
</html>

代码解释：上面的代码中，我们使用了 jQuery 提供的 $.ajax 方法发送了一个 GET 请求，请求地址是 /api/getUserInfo。服务器返回的数据是一个 JSON 数组，每个元素代表一个用户对象。我们使用 $.each 方法遍历这个数组，将每个用户的名称和年龄显示在网页上。

2.表单提交

AJAX 可以用于表单提交，提高用户交互效率，同时避免页面的刷新导致不必要的页面闪烁。比如下面的代码演示了如何通过 AJAX 提交一个表单，并根据服务器返回的数据提示用户注册成功或失败：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Demo</title>
</head>
<body>
  <h1>Register</h1>

  <form id="register-form">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>

    <input type="submit" value="Register">
  </form>

  <div id="message"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $("#register-form").submit(function(event) {
      
      event.preventDefault();
      var form = $(this);
      var username = form.find("input[name='username']").val();
      var password = form.find("input[name='password']").val();

      $.ajax({
      
        url: "/api/register",
        type: "POST",
        data: {
       username: username, password: password },
        dataType: "json",
        success: function(result) {
      
          $("#message").text("Registration succeeded.");
        },
        error: function(xhr, status, error) {
      
          $("#message").text("Registration failed: " + xhr.responseText);
        }
      });
    });
  </script>
</body>
</html>

代码解释：上面的代码中，我们使用了 jQuery 提供的 submit 方法监听表单的提交事件，通过 preventDefault 方法取消默认的表单提交行为。然后，我们使用 $.ajax 方法发送一个 POST 请求，请求地址是 /api/register，并将表单的用户名和密码数据作为请求参数。服务器会根据这些数据判断是否注册成功，并将结果以 JSON 格式返回。根据返回结果，我们可以在网页上提示用户注册是否成功。

3.数据可视化

AJAX 可以用于将大量数据可视化展示，从而给用户带来更好的阅读体验。比如下面的代码演示了如何通过 AJAX 获取 GitHub 上某个用户的仓库列表，并将列表绘制成柱状图：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
  <h1>My Repositories</h1>
  <div id="chart"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $.ajax({
      
      url: "https://api.github.com/users/binjie09/repos",
      type: "GET",
      dataType: "json",
      success: function(result) {
      
        var labels = [];
        var data = [];
        $.each(result, function(i, repo) {
      
          labels.push(repo.name);
          data.push(repo.stargazers_count);
        });
        renderChart(labels, data);
      },
      error: function(xhr, status, error) {
      
        console.log(error);
      }
    });

    function renderChart(labels, data) {
      
      var options = {
      
        chart: {
      
          type: 'bar'
        },
        series: [{
      
          name: "Stars",
          data: data
        }],
        xaxis: {
      
          categories: labels
        }
      };
      var chart = new ApexCharts(document.querySelector("#chart"), options);
      chart.render();
    }
  </script>
</body>
</html>

代码解释：上面的代码中，我们使用了 ApexCharts JavaScript 库将数据绘制成柱状图。首先，我们使用 $.ajax 方法获取 GitHub 上某个用户的仓库列表，并将仓库名称和星标数分别保存在 labels 和 data 数组中。然后，我们调用 renderChart 函数将这些数据绘制成柱状图，并显示在网页上。

四、安全性

在使用 AJAX 技术时，需要注意一些安全性问题。因为 AJAX 请求是异步的，所以它们不会像普通的 Web 请求那样受到浏览器的“同源策略”限制。这意味着，如果 AJAX 请求的 URL 中包含有用户敏感信息，或者 AJAX 响应中包含有恶意脚本，就可能会导致安全问题。为了防止这种情况发生，应该对 AJAX 请求进行验证，并且只向可信任的服务器发送请求。同时，还需要对 AJAX 响应进行过滤和处理，以确保它们不包含任何恶意代码。
在使用 AJAX 时，需要注意以下安全性问题：

1.跨域请求

为了增强站点的安全性，浏览器会阻止对不同域名的资源进行访问。因此，如果你的网页和后端 API 不在同一个域名下，就会遇到跨域请求的限制。可以通过设置 CORS（跨域资源共享）来允许跨域请求。

例如，假设你的前端页面在 http://example.com 下，而后端 API 在 http://api.example.com 下，可以在后端 API 的响应头中设置 Access-Control-Allow-Origin 字段来允许跨域请求：

// 后端 API 的响应头中设置跨域访问
response.setHeader('Access-Control-Allow-Origin', 'http://example.com');

2.XSS 攻击

AJAX 请求可以将用户输入的数据发送到服务器端，但同时也可能受到恶意攻击。特别是当使用 AJAX 获取到内容后，在将其插入到 DOM 中时，如果没有对内容进行过滤或转义，可能会导致 XSS（跨站脚本攻击）漏洞。

例如，在以下代码中，用户输入的内容被直接插入到网页中：

<input type="text" id="name">
<button id="submit">Submit</button>

<div id="result"></div>

<script>
  $("#submit").click(function() {
      
    var name = $("#name").val();
    $.ajax({
      
      url: "/api/hello",
      type: "POST",
      data: {
       name: name },
      dataType: "json",
      success: function(result) {
      
        $("#result").html("Hello, " + result.message);
      },
      error: function(xhr, status, error) {
      
        console.log(error);
      }
    });
  });
</script>

如果用户输入的名称中包含恶意脚本，比如 <script>alert('XSS attack!');</script>，那么它会直接显示在网页中，导致 XSS 攻击。为了防止 XSS 攻击，需要对插入到 DOM 中的内容进行过滤或转义。可以使用 jQuery 提供的 text 方法对内容进行转义：

$("#result").text("Hello, " + result.message);

这样就能够将内容中的标签和特殊字符进行转义，从而预防 XSS 攻击。

3.CSRF 攻击

AJAX 请求也容易受到 CSRF（跨站请求伪造）攻击。CSRF 攻击是指攻击者通过在其他站点上技术合法用户的身份信息来伪造请求，达到冒充该用户向目标站点发送请求的目的。攻击者可以通过 JS 注入等方式，让用户在不知情的情况下发起请求。

为了防止 CSRF 攻击，可以使用 Token 或 Referer 等方式进行认证。Token 方式是在提交表单或发送 AJAX 请求时，将一个随机生成的 Token 值写入到响应体中，并将其存储在 Session 或 Cookie 中。每次请求时，校验提交的数据中是否包含此 Token 值，以此判断是否是合法请求。

以下代码演示了如何使用 Token 防止 CSRF 攻击：

<form id="user-form">
  <input type="text" name="name" placeholder="Your name">
  <button type="submit">Submit</button>
</form>

<script>
  // 获取 cookie 中的 CSRF Token
  function getCSRFToken() {
      
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
      
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
      
            var cookie = cookies[i].trim();
            // 判断是否为 CSRF Token 的 Cookie
            if (cookie.substring(0, 'csrftoken'.length + 1) === ('csrftoken' + '=')) {
      
                cookieValue = decodeURIComponent(cookie.substring('csrftoken'.length + 1));
                break;
            }
        }
    }
    return cookieValue;
  }

  $("#user-form").submit(function(event) {
      
    event.preventDefault();
    var form = $(this);
    var csrfToken = getCSRFToken();
    var name = form.find("input[name='name']").val();
    $.ajax({
      
      url: "/api/addUser",
      type: "POST",
      data: {
       name: name },
      headers: {
      "X-CSRFToken": csrfToken}, // 将 CSRF Token 放到请求的头信息中
      dataType: "json",
      success: function(result) {
      
        console.log(result);
      },
      error: function(xhr, status, error) {
      
        console.log(error);
      }
    });
  });
</script>

在以上代码中，我们使用了一个名为 getCSRFToken 的函数来获取 Cookie 中的 CSRF Token 值，然后将其放到请求头信息中。在 Django 框架中，可以通过 csrftoken 这个 Cookie 来获取 CSRF Token 值，每次表单提交时都会将此 Token 值传到服务器端进行校验。如果 Token 值不匹配，说明该请求可能是伪造的，需要返回错误提示。

五、项目代码示例

前端利用ajax获取服务器后端代码中的数据：
代码示例：

const datas = {
    
     a: axx,
     b: bxx,
     c: cxx,
};
const options = {
    
     method: "POST",
     headers: {
     "Content-Type": "application/json" },
     body: JSON.stringify(datas),
};
fetch("url", options)
     .then((response) => response.json())
     .then((data) => {
    
        Datas = data;
});  
//Datas={a1: a1xx,b1: b1xx,c1: c1xx,}
setTimeout(function () {
    
      var a1 = Datas.a1;
      var b1 = Datas.b1;
      var c1 = Datas.c1;
      //调用script中的函数，此时this是window
      this.outFunction(a1,b1,c1);
}, "3000");

代码解释：这里以POST请求为例
（1）第一，需要设置向服务器传递的参数datas对象，即后端接收并处理的对象。
（2）第二，需要设置options对象，其中包括method(请求方法)、headers(请求头)、body(请求体)等。
（3）使用fetch()函数，其中url就是服务器中的请求地址，从服务器收到的数据为response，赋给data，最后赋给了Datas，方便对接收到的数据进行处理。
（4）由于ajax请求是异步的，因此需要把对接收到的数据进行处理相关操作放到setTimeout(function () {相关操作....}, time)；中，以便于在接收完数据后，再进行操作的执行，也可以使用回调函数处理响应结果。以下是一个使用 jQuery 实现的 AJAX 示例代码：
$.ajax({
     
   url: "/api/getData",
   type: "GET",
   dataType: "json",
   success: function(result) {
     
       // 在请求成功后更新页面内容
      console.log(result);
   },
   error: function(xhr, status, error) {
     
       // 在请求失败时显示提示信息
       console.log(error);
   }
});
其中设置了 success 和 error 回调函数来处理响应结果。
（5）如果要把接收到的数据a1，b1，c1传入自定义的<script></script>中的outFunction()函数，则需调用this.outFunction(a1,b1,c1)，其中this指的是window对象，如下图：

总结

以上就是今天要分享的有关ajax的内容，作者也在学习中，如有讲解不清楚或有误的地方，还请指正，谢谢。

本文链接：https://blog.csdn.net/weixin_56242678/article/details/130900070

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【easyui】datagrid复合表单-程序员宅基地

文章浏览阅读864次。目的达到下图的效果：datagrid初始化html代码$(document).ready(function () { dataGrid = $('#dataGrid').datagrid({ fit: true, fitColumns: false, border: false, ..._复合表单

预处理指令_编译预处理指令是什么-程序员宅基地

文章浏览阅读448次。前言预处理指令的解释及介绍一、预处理指令程序员所编写的代码并不能被真正的编译器编译，需要一段程序把代码翻译一下翻译的过程叫做预处理指令，负责翻译的程序叫做预处理器，被翻译的代码叫做预处理指令，以#开头的代码都是预处理指令查看预处理过程gcc -E code.c 把预处理的姐夫哦显示到终端gcc -E code.c -o code.i把预处理结果存储到code.i的预处理文件中预处理指令的分类：#include 文件包含#include <> 从系统指定路径查找并导入头文件_编译预处理指令是什么

springboot快速构建mybatisplus项目+问题汇总_userandroleservice.getone-程序员宅基地

文章浏览阅读628次。对比现在常用的mybatis,mybatisPlus可以帮助我们更加专注业务的开发,减少sql文件的编码。下面就使用SpringBoot+ mybatisPlus 构建一个项目。1、构建过程中遇到的问题汇总（1）启动报错问题添加依赖<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId._userandroleservice.getone

卡车拆解不再难：可视化示意图的魔力-程序员宅基地

文章浏览阅读260次，点赞10次，收藏5次。随着科技的飞速发展和工业的不断进步，卡车作为物流运输的核心力量，承担着越来越多的运输任务。然而，当卡车出现故障或需要维护时，复杂的拆解流程往往让人头疼不已。这时，一份清晰易懂的卡车拆解示意图就显得尤为重要。

工厂方法模式--实现计算器_计算器简单工厂模式-程序员宅基地

文章浏览阅读5k次，点赞6次，收藏35次。前言：工厂方法模式名字上和前面第一个模式差不多，那就是简单工厂。其实这个计算器的例子，在前面使用简单工厂实现了一遍了。这次只是和使用相同的例子和工厂方法模式进行对比。在实现工厂方法模式的过程中发现了这个模式的优缺点！优点：是每一个类或者功能的独立性非常好。实现了可扩展，而不用修改其他的类。缺点：每增加一个产品就需要增加一个产品工厂的类。目录类图：代码： form窗..._计算器简单工厂模式

Vue mixins学习_mixin风险系数-程序员宅基地

文章浏览阅读166次。转载地址：https://shq5785.blog.csdn.net/article/details/111285248前言在开发前端项目的时候，经常会遇到这样一种开发场景：多个模板页中应用的组件或者页面布局非常相似，比如较为熟悉的el-dialog、el-tooltip和el-table等及页面布局。这时候就会考虑：是把它们拆分成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件，就不得不冒着如果功能变动你要在多个文件中更新它的风险_mixin风险系数

随便推点

python爬取网页乱码解决方案_python爬取网页特殊字符乱码怎么解决-程序员宅基地

文章浏览阅读199次。importchardetimportrequestsurl='http://www.100253.com/'d1=requests.get(url)codesty=chardet.detect(d1.content)a=d1.content.decode(codesty['encoding'])a.encode('utf-8')_python爬取网页特殊字符乱码怎么解决

单片机 MSP430 G2553 launchpad LCD1602 显示连线_msp430怎么连线-程序员宅基地

文章浏览阅读2.2k次。一般无特殊计划买的LCD1602显示屏是5V版本的，不是3.3特殊版本，这时候怎么连线。下图画正方形的2个孔，上面是5V，下面是板子的GND。下图右上角的VCC是3.3V.接线方式：成功：_msp430怎么连线

JAVA 解析 DXF 文件点线面圆_java dxf-程序员宅基地

文章浏览阅读3k次，点赞5次，收藏11次。一、DXF 文件简介1.人肉解析观察几个具有代表性的 dxf 文件，点、文本、线。使用文本工具直接打开 DXF 文件，可以看到很多字段，这里根据官方文档找规律，找到具有代表性的一些字段如下：点的特点：都是 POINT 开头8 下面对应的图层名称10 下面的是 x 坐标20 下面的是 y 坐标30 下面的是 z 坐标POINT 5668B3301F100AcDbEntity 8井号 6Continuous100AcDbPoint 10398266.5_java dxf

arm交叉编译器-程序员宅基地

文章浏览阅读768次。softfp : armel架构(对应的编译器为gcc-arm-linux-gnueabi)采用的默认值，用fpu计算，但是传参数用普通寄存器传，这样中断的时候，只需要保存普通寄存器，中断负荷小，但是参数需要转换成浮点的再计算。hard : armhf架构(对应的编译器为gcc-arm-linux-gnueabihf)采用的默认值，用fpu计算，传参数也用fpu中的浮点寄存器传，省去了转换, 性能最好，但是中断负荷高。ARM32、小端、Linux工程： arm-none-linux-gnueabihf。_arm交叉编译器

从供应链角度看SOA给软件行业带来的影响-程序员宅基地

文章浏览阅读4.5k次。上一篇文章从麦当劳两种不同的经营管理方式对比现在的软件开发过程和利用了SOA的软件开发过程的不同。从“一条龙运营模式”到“流水线运营模式”可以适应快速变化的市场，提供更加专业的、更高质量的服务，减少投资规模和成本，在产业链的一个环节提高生产率，更加有效的提升资源的利用率。同时，为产业链的并行生产提供了有利的保证，成为推动整个产业向前发展的动力。SOA做为“发动机”为软件行业提供了从一条龙向流水

数据级的权限管理和功能级的权限管理的区别,不使用框架(shiro,springsecurity)做权限设计的思考_不用springsecurity 实现权限-程序员宅基地

文章浏览阅读2.2w次，点赞2次，收藏46次。1 数据级的权限管理和功能级的权限管理引自:http://www.iteye.com/problems/97374功能级权限，有大有小。大的可以直接包括一个业务模块，小的可以是一个按钮。一般的功能级权限一般包括：菜单、url、按钮。数据级权限主要是针对访问数据的可见范围。一般包括以下几类：当前操作人可见、部门可见、部门及子部门可见……等。数据级权限目前常用的做法就是在业务模块的表中..._不用springsecurity 实现权限