Ajax介绍和使用

最新推荐文章于 2024-03-10 11:15:00 发布

GuessHat

最新推荐文章于 2024-03-10 11:15:00 发布

阅读量196

点赞数

分类专栏： # javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Guesshat/article/details/107954364

版权

javaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Ajax介绍和使用

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。
主要的缺点是用户不能回退

依赖包：
链接：https://pan.baidu.com/s/1BcrWKSayjtKmiXbDhuOtng
提取码：60c2

1.原始的JS操作

案例实现：
两个按钮同步和异步实现
点击一个按钮后网页上一个h3标签内容进行改变
jsp文件代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <h3 id="h1">改变内容</h3>
<button type="button" onclick="Aclick()">异步改变内容</button>
  <button type="button" onclick="Bclick()">同步改变内容</button>
  </body>
<script type="text/javascript">
function Aclick() {
    var iable=new XMLHttpRequest();
    iable.open("GET","http://localhost:8080/A",true);
    iable.send();
    iable.onreadystatechange = function (ev) {
        var text = iable.responseText;
        document.getElementById("h1").innerText = text;
    }
}
function Bclick() {
    var iable=new XMLHttpRequest();
    iable.open("GET","http://localhost:8080/A",false);
    iable.send();
    iable.onreadystatechange = function (ev) {
        var text = iable.responseText;
        document.getElementById("h1").innerText = text;
    }
}

</script>
</html>

web.xml配置：

	<servlet>
        <servlet-name>demoAServlet</servlet-name>
        <servlet-class>servlet.DemoAServlet</servlet-class>
    </servlet>
     <servlet-mapping>
        <servlet-name>demoAServlet</servlet-name>
        <url-pattern>/A</url-pattern>
    </servlet-mapping>

DemoAServlet类代码

public class DemoAServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            Thread.currentThread().sleep(2000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        resp.setContentType("text/plain;charset=utf-8");
        resp.getWriter().write("A标签"+System.currentTimeMillis());
    }
}

实现结果：
未点击前：
在这里插入图片描述

单击异步后同步按钮可以点击
在这里插入图片描述

同步按钮点击后,异步按钮只能等待

网址并没有发生变化，但内容每次单击后都不一样

2.jQuery操作Ajax

在这里插入图片描述

2.1 $.get方式 /$.post方式

在这里插入图片描述
简单案例：
jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <button id="get">$get方式</button>
  <button id="post">$post方式</button>
  <button id="ajax">$ajax方式</button>

  </body>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.11.3.js"></script>
<script type="text/javascript">
 $(function () {
      $("#get").click(function () {
          $.get("${pageContext.request.contextPath}/d")
      })
      $("#post").click(function () {
          $.post("${pageContext.request.contextPath}/d")
      })
      $("#ajax").click(function () {
          $.ajax("${pageContext.request.contextPath}/d")
      })


  })
</script>
</html>

xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>demo</servlet-name>
        <servlet-class>com.example.servlet.DemoServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>demo</servlet-name>
        <url-pattern>/d</url-pattern>
    </servlet-mapping>
</web-app>

demo代码

public class DemoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get方式成功");

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post方式成功");
    }
}

显示结果：
在这里插入图片描述

post方式类似

分别点击后的结果：

2.1.1 参数传递

参数上传格式
在这里插入图片描述
ajax中参数名和数据对应的格式是：
大括号包裹，name：属性值,逗号分隔多个参数

var data = {
	name:"属性值",
}

例如将一个文本框的输入内容传递回来给h3标签
jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <input type="text" name="text" id="text">
  <h3 id="h3">内容改变</h3>
  <button id="get">$get方式</button>
  <button id="post">$post方式</button>
  <button id="ajax">$ajax方式</button>

  </body>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.11.3.js"></script>
<script type="text/javascript">
  $(function () {
      $("#get").click(function () {
          var data = {
              tet:$("#text").val()
          }
          $.get("${pageContext.request.contextPath}/d",data,function (backDate) {
              $("#h3").text(backDate);
              
          })
      })
      $("#post").click(function () {
          $.post("${pageContext.request.contextPath}/d")
      })
      $("#ajax").click(function () {
          $.ajax("${pageContext.request.contextPath}/d")
      })
  })
</script>
</html>

demo代码：

public class DemoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String backData = req.getParameter("tet");
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.write(backData);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post方式成功");
    }
}

显示结果：

在这里插入图片描述

在这里插入图片描述
如果不设置响应解析方式可能会早成乱码
resp.setContentType("text/plain;charset=utf-8");

2.2 $Ajax方式

Ajax方式相对灵活，格式：
在这里插入图片描述
这里注意的是ajax所有的设置一开始都是设置在一个({ })中的
代码：

      $("#ajax").click(function () {
          $.ajax({
            type:"GET",
            url:"${pageContext.request.contextPath}/d",
            data:{
                tet:$("#text").val()
            },
            success:function (backData) {
                $("#h3").text(backData);
            }
          })
      });

$ajax上传参数的格式是：

 data:{
          tet:$("#text").val(),
          .....
      },

type设置get/post方式结果显示：

在这里插入图片描述

GuessHat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax介绍和使用

AjaxAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。主要的缺点是用户不能回退1.原始的JS操作案例实现：两个按钮同步和异步实现点击一个按钮后网页上一个h3标签内容进行改变jsp文件代码：<%@ page contentType="text/html;charset=UTF-8" language="java" %><
复制链接

扫一扫

专栏目录