JQuery发送Ajax请求的5种简单使用方式，一看就会~

1、Ajax简介

1.1 什么是Ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的新方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

异步刷新：

如网页中某一个地方需要修改，只刷新需要修改的地方，其他地方不变。（比如网页点赞，只刷新赞的数量）

1.2 Ajax优缺点

优点：

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。

缺点：

它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。

2、如何使用Ajax

在JavaScript中使用Ajax，代码复杂，不推荐
在JQuery中使用Ajax，代码简单，推荐

2.1 用JavaScript方式使用Ajax

可以参考其他博主文章，这里不再赘述

2.2 使用jQuery使用Ajax

说明：

JQuery发送ajax请求共有四种方式：通用的方式、get、post、load
请求成功的函数返回值参数名可以自定义，异常的函数参数名是固定的

语法说明：

// 值均写在引号内，单引号和双引号都可以
$.ajax({
    url: '', 	// 请求的地址，即要给那里发送请求
    data: {		// 请求参数，有多个时以逗号分割
        name: 'zhangsan',
        pwd: '123'
    },
    type: 'get',		// 请求方式，get、post
    dataType: 'text',	// 返回值类型， json、text等
    success: function (res) { // 请求成功执行此方法，res为返回值，名称自定义
        $('#get1').html(res)
    },
    error: function (xhr, errorMessage, e) { //请求异常执行此方法，参数名不建议修改,可以不写这个函数
        alert(errorMessage);
    }
})

2.3 简单实例

页面代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ajax请求示例</title>
</head>
<body style="text-align: center">
<style>
    td {
        width: 300px;
        border: 1px black solid;
    }
</style>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    function getOne() {
        $.ajax({
            url: 'getOne',
            data: {
                name: 'zhangsan',
                pwd: '123'
            },
            type: 'get',
            dataType: 'text',
            success: function (res) {
                $('#get1').html(res)
            },
            error: function (xhr, errorMessage, e) {
                alert(errorMessage);
            }
        })
    }

    function getTwo() {
        $.get('getTwo', 'name=zs&pwd=333',
            function (res) {
                $('#get2').html(res)
            }, 'text'); // 'text'为返回值类型
    }

    function postOne() {
        $.ajax({
            url: 'postOne',
            data: {
                name: 'zhangsan',
                pwd: '123'
            },
            type: 'post',
            dataType: 'text',
            success: function (res) {
                $('#post1').html(res)
            },
            error: function (xhr, errorMessage, e) {
                alert(e)
            }
        })
    }

    function postTwo() {
        $.post('postTwo', 'name=zhangsan',
            function (res) {
                $('#post2').html(res)
            }, 'text');
    }

    function load() {
        $('#load').load('loadRequest', 'name=lisi', function (res) { // url, data, callback
            											// 即请求地址，请求参数，请求后执行的函数
            $('#load').html(res)
        });
    }
</script>
<table cellpadding="20px" border="3px solid black" th:cellspacing="0" style="margin: 110px auto">
    <tr>
        <td>
            <button onclick="getOne()">第一种get请求</button>
        </td>
        <td id="get1"></td>
        <td>
            <button onclick="getTwo()">第二种get请求</button>
        </td>
        <td id="get2"></td>
    </tr>
    <tr>
        <td>
            <button onclick="postOne()">第一种post请求</button>
        </td>
        <td id="post1"></td>
        <td>
            <button onclick="postTwo()">第二种post请求</button>
        </td>
        <td id="post2"></td>
    </tr>
    <tr>
        <td ><button onclick="load()">load 请求</button></td>
        <td id="load"></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

controller代码：

使用Springboot：

package priv.happy.ajax_study.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import priv.happy.ajax_study.entity.User;

/**
 * @Author: HAPPY
 * @Project_name: Ajax
 * @Package_name: priv.happy.ajax_study.controller
 * @Date: 2021/10/19 20:11
 * explain: jquery结合Ajax的5种简单使用方式
 */
@Controller
public class AjaxController {
    @GetMapping("/")
    public String index() {
        return "index";
    }

    @GetMapping("/getOne")
    @ResponseBody
    public String getRequestOne(@RequestParam("name") String name, @RequestParam("pwd") String pwd) {
        System.out.println("name: " + name);
        System.out.println("pwd: " + pwd);
        return "Ajax返回第一种get请求";
    }

    @GetMapping("/getTwo")
    @ResponseBody
    public String getRequestTwo(@RequestParam("name") String name, @RequestParam("pwd") String pwd) {
        System.out.println("name: " + name);
        System.out.println("pwd: " + pwd);
        return "Ajax返回第二种get请求";
    }

    @PostMapping("/postOne")
    @ResponseBody
    public String postRequestOne(User user) {
        System.out.println(user);
        return "Ajax返回第一种post请求";
    }

    @PostMapping("/postTwo")
    @ResponseBody
    public String postRequestTwo(User user) {
        System.out.println(user);
        return "Ajax返回第二种post请求";
    }

    @GetMapping("/loadRequest")
    @ResponseBody
    public String loadRequest(@RequestParam("name") String name) {
        System.out.println("name" + name);
        return "响应load的ajax请求";
    }
}

使用Servlet：

// 和spring boot controller 处理区别只有返回方式，所以这里只写一下servlet的返回方式

@WebServlet(name = "getOne", urlPatterns = "/getOne")
public class GetOne extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      	// 处理业务逻辑
        
        // 响应请求，使用流的方式肯能会有IO异常，所以捕捉异常
        PrintWriter out = response.getWriter();
        try {
            out.write("第一种get");
            out.close
        } catch (Exception exception) {
            out.write(exception);
        }
        out.close();
    }
}