Ajax研究

最新推荐文章于 2024-11-17 10:20:34 发布

禧哥

最新推荐文章于 2024-11-17 10:20:34 发布

阅读量88

点赞数

分类专栏：笔记文章标签： ajax html js 前端

本文链接：https://blog.csdn.net/xigedd/article/details/116029820

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨Ajax的基本概念，其在减少页面刷新上的优势，通过实例展示如何利用SpringMVC和jQuery实现Ajax通信。重点讲解了使用jQuery进行Ajax操作的方法，并总结了Ajax与JSON在前后端分离中的关键作用。

摘要由CSDN通过智能技术生成

Ajax研究

文章目录

- Ajax研究

1、什么是Ajax

无需重新加载整个网页的情况下，能够更新部分网页的技术。
并非一种编程语言
和国内百度的搜索框一样

2、为什么使用Ajax？

不使用Ajax，想要更新内容或者提交一个表单，需要重新加载整个网页。
可以实现异步局部更新。

3、伪造Ajax

编写一个springmvc框架

web.xml
- DispatcherServlet
- contextConfigLocation
- load-on-startup
- filter
- encoding
springmvc.xml
- 需要加入<mvc:default-servlet-handler />，不然找不到js资源
- component-scan
- annotation-driven
- InternalResourceViewResolver
controller
- RestController
- RequestMapping

编写一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skr</title>
    <script>
        function a(){
            var url = document.getElementById("url").value;
            document.getElementById("iframe").src = url;

        }

    </script>
</head>
<body>

<div>
    <p>请输入地址</p>
    <p>
    <input type="text" id="url" value="https://www.baidu.com/">
    <input type="button" value="查找" onclick=a()>
    </p>
</div>

<div>
    <iframe style="width: 100%;height: 500px" id="iframe"/>
</div>

</body>
</html>

4、使用jQuery.ajax

jQuery是一个js库，有很多js的函数
使用jQuery，搜索框失去焦点产生请求

1、下载jQuery

这里下载源码版（可以查看源码）
右键连接另存为
目录结构，不要把js放在WEB-INF下面，会找不到

2、编写AjaxController

@RequestMapping("/a1")
    public void test2(String name, HttpServletResponse httpServletResponse) throws IOException {
        System.out.println("a1.name=>"+name);
        if ("kuangshen".equals(name)){
            httpServletResponse.getWriter().print("true");
        }else {
            httpServletResponse.getWriter().print("fales");
        }

    }

3、编写index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--引入js文件--%>
      <script src="${pageContext.request.contextPath}statics/js/jquery-3.6.0.js"></script>
      <script>
        function a(){
          $.post({
            url:"${pageContext.request.contextPath}/a1",
            /*pageContext.request.contextPath请求资源的方式*/
            data:{"name":$("#username").val()},
            /*回调函数*/
            success: function (data) {
              alert(data)
            }
          })
        }
      </script>


  </head>
  <body>

  <%--失去焦点时，发起一个请求到后台--%>
  用户名：<input type="text" onblur=a() name="username">
  </body>
</html>