SpringMVC(四)——Ajax技术

最新推荐文章于 2024-05-21 10:41:09 发布

VIP文章 Easonnzz

最新推荐文章于 2024-05-21 10:41:09 发布

阅读量362

点赞数

分类专栏： SpringMVC 文章标签： ajax

本文链接：https://blog.csdn.net/nzzynl95_/article/details/104762831

版权

文章目录

1. 什么是Ajax技术
2. 伪造Ajax
3. Ajax相关测试

1. 什么是Ajax技术

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

利用Ajax可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
…等等

2. 伪造Ajax

可以使用前端的iframe标签来伪造一个ajax的样子
1、新建一个项目，构建web模块
2、编写一个 ajax-frame.html 使用 iframe 测试，感受下效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>zz</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function(){
   
        let myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getTime();
    };

    function LoadPage(){
   
        let targetUrl =  document.getElementById('url').value;
        console.log(targetUrl);
        document.getElementById("iframePosition").src = targetUrl;
    }

</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.pku.edu.cn/"/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
<