知识库

AJAX请求的使用教程

2024-01-18  本文已影响0人  Java_Evan

什么是AJAX？

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

Ajax 请求的局部更新，浏览器地址栏不会发生变化, 局部更新不会舍弃原来页面的内容。

异步与同步的区别？
异步：异步是非阻塞模式，发送方不等待接收方的响应，继续向下执行；异步以字符作为传输单位。

同步：同步是阻塞模式，发送方要等待接收方的响应，才能向下执行；同步以数据库作为传输单位。

比如：异步模式下，多线程执行，不需要等待其它线程的处理，只关注自己线程的执行过程；而同步模式下，多线程执行，需要等待其它线程一起执行完操作，才能继续执行下一步。

原生JavaScript方式的AJAX的请求

自定义类，通过反射获取请求方式

public abstract class BaseServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 解决post乱码问题，设置请求的参数字符集为UTf-8
        request.setCharacterEncoding("UTF-8");
        // 解决响应乱码问题，设置响应的参数字符集为UTF-8
        response.setContentType("text/html; charset=UTF-8");
        // action参数就可以用来判断是当前用户模块的哪一个操作。
        String action = request.getParameter("action");
        // 定义一个Method方法对象
        Method actionMethod;
        try {
            // 通过反射获取到与action字符串对应的操作方法
            actionMethod = getClass().getDeclaredMethod(action, HttpServletRequest.class,
                    HttpServletResponse.class);
            // System.out.println(actionMethod);
            // 调用Method对象的invoke函数执行方法
            actionMethod.invoke(this, request, response);
        } catch (NoSuchMethodException | SecurityException | IllegalAccessException
                | IllegalArgumentException | InvocationTargetException e) {
            e.printStackTrace();
        }
    }
}

发送get请求

<!-- 
  Author:lisong
  CreateTime:2023-08-02 20:10 星期三
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
  <button onclick="ajaxRequest()">ajax-request</button>
  <div id="div01"></div>
</body>
<script type="text/javascript">
    //使用javaScript发起AJAX请求，访问服务器AjaxServlet中的javaScriptAjax
  function ajaxRequest() {
      //1.创建XMLHttpRequest对象
      var xmlHttpRequest = new XMLHttpRequest();
      //2.调用open方法设置请求参数
      //参数1：请求方式，参数2：请求地址URL，参数3：是否异步，true表示异步，false表示同步
      xmlHttpRequest.open("GET","http://localhost:8080/day06_json/ajaxServlet?action=javaScriptAjax",true);
      //3.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
      xmlHttpRequest.onreadystatechange = function () {
          if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
              alert(111);
              //将响应的json字符串转换为json对象
              const jsonObj = JSON.parse(xmlHttpRequest.responseText);
              //将响应的数据显示在HTML页面中
              document.getElementById("div01").innerHTML = "姓名:" + jsonObj.name + ",编号:" + jsonObj.id;
          }
      }
      //4.调用send()方法发送请求
      xmlHttpRequest.send();
  }
</script>
</html>

自定义Servlet程序

public class AjaxServlet extends BaseServlet {
    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("Ajax请求收到...");
        var person = new Person("李四", 1000001L);

        //创建Gson对象实例
        var gson = new Gson();
        //将Person对象转换为json字符串
        String jsonStr = gson.toJson(person);
        System.out.println(jsonStr);
    }
}

web.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>ajaxServlet</servlet-name>
        <servlet-class>com.evan.java.AjaxServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ajaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>
</web-app>

jQuery 中的 AJAX 请求

JQuery是对JavaScript的封装，简化了语法。
[JQuery.js的下载地址]
https://www.alipan.com/s/Rpemu31MVti
提取码: rp18

$.ajax 方法

参数 描述
url 表示请求的地址
type 表示请求的类型GET或POST请求
data 表示发送给服务器的数据,格式有两种：1. name=value&name=value；2. {key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型，常用数据类型：text表示纯文本，xml表示xml文件,json表示json对象 
protected void jQuerytAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("JQuery的Ajax请求收到...");
    var person = new Person("张三", 1000001L);

    //创建Gson对象实例
    var gson = new Gson();
    //将Person对象转换为json字符串
    String jsonStr = gson.toJson(person);
    System.out.println(jsonStr);
}

<!-- 
  Author:lisong
  CreateTime:2023-08-02 22:38 星期三
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JQuery_AJAX</title>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
    <button id="ajaxBtu">ajax-request</button>
    <div id="div01"></div>
</body>
<script type="text/javascript">
    $(function (){
       //ajax请求
       $("#ajaxBtu").click(function (){
           $.ajax({
               url : "http://localhost:8080/day06_json/ajaxServlet",
               data : "action=jQuerytAjax",
               type : "GET",
               success : function (data) {
                   // alert(data);
                   // var jsonStr = JSON.parse(data);
                   // console.log("name:" + jsonStr.name + ",编号:" + jsonStr.id);
                   console.log(data.name + "," + data.id);
               },
               dataType : "json"
           });
       });
    });
</script>
</html>

.get方法和.post 方法

参数方法 描述
url 请求的url地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型 
<script type="text/javascript">
    $(function (){
        //ajax--get请求
        $("#ajaxBtu").click(function (){
            $.get("http://localhost:8080/day06_json/ajaxServlet","action=jQuerytAjax",function (data) { console.log(data.name + "," + data.id);
            },"json");
        });
</script>

<script type="text/javascript">
    $(function (){
        //ajax--get请求
        $("#ajaxBtu").click(function (){
            $.post("http://localhost:8080/day06_json/ajaxServlet","action=jQuerytAjax",function (data) { console.log(data.name + "," + data.id);
            },"json");
        });
</script>

$.getJSON 方法

参数方法 描述
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数 
<script type="text/javascript">
    // ajax--getJson 请求
    $("#getJSONBtn").click(function(){
    $.getJSON("http://localhost:8080/day06_json/ajaxServlet","action=jQueryGetJSON",function
    (data) {
        $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
    });
    });
</script>

serialize() 表单序列化

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value的形式进行拼接。

<script type="text/javascript">
    // ajax 请求
    $("#submit").click(function(){
    // 将表单参数序列化
  $.getJSON("http://localhost:8080/day06_json/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
    });
    });
</script>
上一篇 下一篇

猜你喜欢

热点阅读