Ajax和jQury实现Aajx

  • 时间:
  • 浏览:
  • 来源:互联网

Ajax和jQury实现Aajx

  • 1、js实现Ajax
  • 2、jQury实现Aajx
  • 3、结果

所请求的页面 test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
${param.msg}测试${param.msg2}!!
</body>
</html>

1、js实现Ajax

虽然这里用到了jQuery,不过Ajax的实现还是用javascript

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript">
      // 该函数创建一个通用的XMLHTTP对象
      function getHTTPObject() {
        if (typeof XMLHttpRequest == 'undefined') {
          XMLHttpRequest = function () {
            try { return new ActiveXObject('Msxml2.XMLHTTP.6.0');}
            catch (e) {}
            try { return new ActiveXObject('Msxml2.XMLHTTP.3.0');}
            catch (e) {}
            try { return new ActiveXObject('Msxml2.XMLHTTP');}
            catch (e) {}
            return false;
          }
        }
        return new XMLHttpRequest();
      }

      $(document).ready(function (){
        $("#button").click(function (){
          // 实例化XMLHTTP对象
          var xmlHttp = getHTTPObject();
          // 指定异步提交的目标和提交方式
          // 参数1表示请求方式,参数2表示请求目标,参数3为true表示异步请求,否者非异步请求
          xmlHttp.open("get","${pageContext.request.contextPath}/test.jsp?msg=ajax&msg2=success",true);
          // 指定当xmlHttp状态改变时需要的操作
          xmlHttp.onreadystatechange = state;
          function state() {
            if (xmlHttp.readyState == 4) {
              // 获取请求返回的值
              infoDiv.innerHTML = xmlHttp.responseText;
            }
          }
          // 发出请求
          xmlHttp.send();
        })
      })
    </script>
  </head>
  <body>
    <form>
      <div id="infoDiv"></div>
      <input id="button" name="button" type="button" value="点击">
    </form>
  </body>
</html>

2、jQury实现Aajx

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript">
      $(function (){
        $("#button").on("click",function (){
          $.get({
            url:"${pageContext.request.contextPath}/test.jsp",  // 请求目标
            data:{"msg":"ajax","msg2":"success"},		// 携带的参数
            success:function (data){					// 请求成功后执行的方法
              infoDiv.innerHTML = data;
            }
          })
        })
      })
    </script>
  </head>
  <body>
    <form>
      <div id="infoDiv"></div>
      <input id="button" name="button" type="button" value="点击">
    </form>
  </body>
</html>

3、结果

两种方法的结果是一样的。
在这里插入图片描述
在这里插入图片描述

本文链接http://smartadmin.com.cn/smartadmin/show-16569.html