了解Ajax、语法以及如何使用

乐幼

已于 2024-05-09 11:26:36 修改

阅读量829

点赞数 19

文章标签： ajax 前端

于 2024-05-09 11:20:53 首次发布

本文链接：https://blog.csdn.net/leyou921/article/details/138606297

版权

Ajax

1、什么是Ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互更强的Web应用程序的技术。

Ajax的核心是XMLHttpRequest对象，也就是XHR，XHR向服务器发送请求和解析服务器的响应，能够以异步的方式从服务器获取新数据。

jQuery提供多个与AJAX有关的方法，能够使用HTTP Get 和 HTTP Post从远程服务器上请求数据，同时能够把这些数据直接载入到网页的元素中展示。

jQuery不是生产者，而是大自然的搬运工。

jQuery Ajax本质就是XMLHttpRequest，对他进行了封装，方便调用。

增强B/S的体验性

2、Ajax可以做什么

注册时，输入用户名自动检测用户是否已经存在
登陆时，提示用户名密码错误

3、H5中使用Iframe理解Ajax（局部刷新）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造Ajax</title>
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>

<div>
    <p>请输入要加载的地址</p>
    <input type="text" class="linkAddress" value="https://www.baidu.com/">
    <input type="button" id="addIframe" onclick="btnClick()" value="加载链接放入iframe">
</div>

<div>
    <h3>加载页面地址</h3>
    <iframe style="width: 100%; height: 500px" id="iframe"></iframe>
</div>

</body>

<script>
    function btnClick(){
        //获取text文本框中的值
        const targetURL = $('.linkAddress').val();
        //将text中指赋值给iframe的src路径
        $('#iframe').attr('src', targetURL);
        // 下面通过原生js也可以给iframe的src路径赋值
        // document.getElementById("iframe").src = targetURL;
    }
</script>
</html>

4、简单应用

页面有个文本框，输入文字后，文本框失去焦点，ajax会向url接口路径发起请求，后端处理后返回结果

1、编写页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.7.1.js"></script>
</head>
<body>
<%--onblur：鼠标失去焦点触发的事件--%>
<input type="text" id="txtVal" οnblur="pd()" placeholder="请输入文字">

<script>
    function pd() {
        <%--$.ajax默认是get请求--%>
        $.post({
            url:"${pageContext.request.contextPath}/ajax/a1",
            // data为封装的参数，键值对的形式，key：value
            data:{"txtVal":$('#txtVal').val()},
            success: function (returnData) {
                // returnData是接口返回的数据
                alert(returnData);
            }
        });
    }
</script>
</body>

</html>

2、编写后端

package com.smbms.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String txtVal = req.getParameter("txtVal");
        resp.getWriter().print("您好，" + txtVal);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

3、效果

在这里插入图片描述

5、公式

原始写法

$.post({
    url:"${pageContext.request.contextPath}/ajax/a1",
    // data为封装的参数，键值对的形式，key：value
    data:{"txtVal":$('#txtVal').val()},
    success: function (returnData) {
        // returnData是接口返回的数据
        alert(returnData);
    }
});

简写

$.post(
    "${pageContext.request.contextPath}/ajax/a1",
    {"param1":"value1","param2":"value2"},
    function (returnData){方法体},"json"
);

6、实际应用

前端页面js编写

<script>
$.ajax({
            url: "/mk/sendInfoToLowCodeAndFile",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(contractInfo),
            success: function (returnData) {
                console.log(returnData);
                if(returnData.code === 200){
                    alert(returnData.msg);
                    window.location.href = "/index/success"
                }else {
                    alert(returnData.msg);
                }

            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error("Error: " + textStatus, errorThrown);
                alert("请求失败，请稍后再试。");
            }
        });
</script>

后端接口接收

@RequestMapping("sendInfoToLowCodeAndFile")
    public Result sendInfoToLowCodeAndFile(@RequestBody Contract contract) throws JsonProcessingException {
        return sendInfoToLowCodeService.sendInfoToLowCodeAndFile(contract);
    }