11.Ajax

陆源东

于 2021-07-03 23:49:22 发布

阅读量344

点赞数

分类专栏： SpringMVC

本文链接：https://blog.csdn.net/m0_53509974/article/details/118446921

版权

SpringMVC 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了Ajax技术在前后端交互中的应用，包括使用iframe模拟Ajax和jQuery的Ajax实现，以及其核心原理和常用jQuery函数。通过实例展示了如何在不刷新页面的情况下，实现实时数据更新和异步请求处理。

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

11.Ajax

不需要刷新网页情况下实现局部更新的一种技术 例如：

在这里插入图片描述

11.1.使用iframe标签模拟Ajax弹窗（只是模拟，网址会刷新）

一个固定的弹窗

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>体验页面无刷新</title>
</head>
<body>
<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px" height="500px"></iframe>
</body>
</html>

在这里插入图片描述

用户输入加载地址，动态更新页面内容

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>体验页面无刷新</title>
</head>
<body>
<p>请输入地址：</p>
<p>
    <input type="text" id="url">
    <input type="button" value="提交" onclick="f()">
</p>
<script>
    function f(){
        var text = document.getElementById('url');
        var iframe = document.getElementById('iframe');
        var test = text.value;
        iframe.src = test ;
    }
</script>
<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px" height="500px" id="iframe"></iframe>
</body>
</html>

在这里插入图片描述

11.2. Ajax

原生Ajax为JavaScript实现，下面使用jQuery中的Ajax

11.2.1.Ajax的核心

Ajax的核心是XMLHttpRequest对象（XHR），XHR为向服务器发送请求和解析服务器请求响应提供了接口，使得能够以异步方式从服务器获取到新的数据

//原生A
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

11.2.2 jQuey Ajax

jQuey提供了Ajax相关方法
通过相关方法，我们可以使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或、JSON，并加载到网页中
jQuey Ajax的核心仍然为XHR

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

//jQuery中的源码片段
jQuery.each(['get','post'],function(i,method){
    jQuery[method] = function (url,data,callback,type){
        if (isFunction(data)){
		type = type || callback;
         callback = data;
         data = undefined;
        }
        //显然对POST、GET的调用，都是调用jQuery.ajax方法，并返回请求的数据(callback)
        return jQuery.ajax(jQuery.extend({
            url : url,
            type : method,
            dataType : type,
            data : data,
            success : callback
        },jQuery.isPlainObject(url)&&url));
    };
});

代码实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>
  function a(){
    alert("hello");
    $.post({
      url: "${pageContext.request.contextPath}/ajax",//一个请求
      data: {"name":$("#username").val()},  //data是一个键值对 ， 可以省略  keyword是传递到后端的变量名
      success: function (data){
        alert(data);//成功之后的回调函数
      },
      error:function () {
        //失败的回调函数
      }
    })
  }
</script>
<p>
  用户名 ： <input type="text" id="username" onblur="a()"> <%--失去焦点事件--%>
</p>
</body>
</html>

@Controller
public class HelloController {  //实际上还是一个Servlet
    @RequestMapping("/ajax")
    public void hello(String name,HttpServletResponse response) throws IOException {
        System.out.println("a1:param=>" + name);
        if("陆源东".equals(name)) {
            response.getWriter().write("true");
        } else {
            response.getWriter().write("false");
        }
    }
}

Ajax的精髓是将页面控制的主动权交给了前端 ，后端只是传一个数据

陆源东

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.Ajax

11.Ajax不需要刷新网页情况下实现局部更新的一种技术例如：11.1.使用iframe标签模拟Ajax弹窗（只是模拟，网址会刷新）一个固定的弹窗<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>体验页面无刷新</title></head><body><iframe s
复制链接

扫一扫

专栏目录