Ajax学习笔记

最新推荐文章于 2024-09-17 14:30:35 发布
最新推荐文章于 2024-09-17 14:30:35 发布
阅读量291 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： ajax java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcmdghv587/article/details/108196934
版权

文章目录

0. 简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

1. 准备工作

本学习笔记使用 JavaWeb 进行演示。

首先按照 JavaWeb 学习笔记中提到的方法创建一个 JavaWeb 工程。

然后导入阿里巴巴的 fastjson 包。

将 jar包 拷贝到 WEB-INF 的 lib 目录下。
在这里插入图片描述
右键选择：
在这里插入图片描述

2. 原生Ajax请求

2.1 异步

异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作。

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function ajaxRequest() {
            // 1. 创建XMLHttpRequest对象
            const xmlHttpRequest = new XMLHttpRequest();

            // 2. 调用open方法设置请求参数
            // 参数一：请求的方法（GET/POST）
            // 参数二：请求的URL
            // 参数三：true-异步 false-同步
            xmlHttpRequest.open("GET", "/hello", true);

            // 3. 绑定onreadystatechange事件，处理请求完成后的操作
            xmlHttpRequest.onreadystatechange = function() {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    // 把响应数据显示在页面上
                    console.log(xmlHttpRequest.responseText);
                    $("#raw").text(xmlHttpRequest.responseText);

                    // 解析JSON
                    const obj = JSON.parse(xmlHttpRequest.responseText);
                    $("#pretty").text("姓名：" + obj.name + " 年龄：" + obj.age);
                }
            }

            // 4. 调用send方法发送请求
            xmlHttpRequest.send();
        }
    </script>
</head>
<body>
    <input type="button" value="发送Ajax请求" onclick="ajaxRequest()">
    <div id="raw"></div>
    <div id="pretty"></div>
</body>
</html>

Servlet：

import com.alibaba.fastjson.JSON;

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

class Student {
    public String name;
    public int age;

    public Student(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

public class HelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 解决响应乱码
        response.setContentType("text/html; charset=UTF-8");

        System.out.println("收到Ajax请求！");
        
        // 响应Ajax请求
        Student stu = new Student("猫猫", 20);
        String jsonText = JSON.toJSONString(stu);
        response.getWriter().println(jsonText);
    }
}

在这里插入图片描述

2.2 同步

同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码。

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function ajaxRequest() {
            const xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open("GET", "/hello", false);
            xmlHttpRequest.send();

            $("#raw").text(xmlHttpRequest.responseText);
            const obj = JSON.parse(xmlHttpRequest.responseText);
            $("#pretty").text("姓名：" + obj.name + " 年龄：" + obj.age);
        }
    </script>
</head>
<body>
    <input type="button" value="发送Ajax请求" onclick="ajaxRequest()">
    <div id="raw"></div>
    <div id="pretty"></div>
</body>
</html>

3. jQuery的Ajax方法（常用）

3.1 $.ajax方法

六个参数：

  • url：请求的URL。
  • type：请求的类型（GET/POST），默认值为"GET"。
  • async：true-异步，false-同步，默认值为true。
  • data：发送给服务器的数据。
  • success：请求成功，响应的回调函数。
  • dataType：响应的数据类型。常用的有：text、xml、json。

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function ajaxRequest() {
            $.ajax({
                "url": "/hello",
                "type": "GET",
                "data": "name=gh",
                "dataType": "json",
                "success": function (data) {
                    console.log("服务器返回的数据：" + data);
                    console.log("姓名：" + data.name);
                    console.log("年龄：" + data.age);
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" value="发送Ajax请求" onclick="ajaxRequest()">
</body>
</html>

Servlet：

import com.alibaba.fastjson.JSON;

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

class Student {
    public String name;
    public int age;

    public Student(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

public class HelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 解决响应乱码
        response.setContentType("text/html; charset=UTF-8");

        // 获取请求参数
        String name = request.getParameter("name");
        System.out.println(name);

        // 响应Ajax请求
        Student stu = new Student("猫猫", 20);
        String jsonText = JSON.toJSONString(stu);
        response.getWriter().println(jsonText);
    }
}

3.2 $.get方法和$.post方法

对 $.ajax 方法的进一步封装。

3.3 $.getJSON方法

三个参数：

  • url：请求的URL。
  • data：发给服务器的数据。
  • success：请求成功，响应的回调函数。

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function ajaxRequest() {
            $.getJSON("/hello", "name=gh&age=-1", function (data) {
                console.log("服务器返回的数据：" + data);
                console.log("姓名：" + data.name);
                console.log("年龄：" + data.age);
            });
        }
    </script>
</head>
<body>
    <input type="button" value="发送Ajax请求" onclick="ajaxRequest()">
</body>
</html>
犇犇~
关注
专栏目录
ajax学习笔记
11-30
### AJAX学习笔记 #### 一、引言 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。...
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
Javascript Ajax学习笔记
Daniel_wuchao的博客
08-22 418
Javascript Ajax学习笔记1. 什么是ajax?AJAX: 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。(不严格)定义: 客户端向服务器端发送请求,而无需刷新当前页面的技术. 2.http请求(1)HTTP(HyperText Transfer Protocol)是一种无状态的协议.无状态是指浏览器和服务器之间不需要建立持久的连接,这意味着当一个客户端向服
JavaScript学习笔记（AJAX）
Clover的博客
05-27 194
AJAX = Asynchronous JavaScript And XML。 AJAX仅仅组合了： 浏览器内建的XMLHttpRequest对象(从web服务器请求数据) JavaScript和HTML DOM(显示或使用数据) Ajax将数据作为纯文本或者JSON文本传输也同样常见。 可以异步更新网页的局部，这意味着可以更新网页的部分，而不需要重新加载整个页面。 AJAX如何工作： 网页中发生一个事件(页面加载，按钮点击) ...
JS AJAX学习笔记（W3School）
qq_28786023的博客
08-18 182
[原生Js]AJAX学习笔记(总结)
砷碲 - Shendi
02-16 6803
Hello I'm Shendi,this is ajax note;get with w3c... AJAX(Asynchronous Javascript and xml) 异步js和xml AJAX 不是新的编程语言,而是一种使用现有标准的新方法 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下 AJAX是一种无需重新加载整个网页的...
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 8045
史上最强Ajax学习笔记
AJAX学习笔记
weixin_44497507的博客
11-10 618
【代码】AJAX学习笔记。
黑马---ajax学习笔记
texry的博客
11-25 354
ajax
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
Ajax学习笔记个人总结
09-12
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
JavaScript 基础 - 第17天_AJAX综合案例
八年大厂一线老程序员。现独立开发创业中，并且已经靠独立开发赚取人生第一桶金。
09-14 1264
完成案例-图书管理系统（增删改查）经典业务
AJAX(一）HTTP协议(请求响应报文)，AJAX发送请求，请求问题处理
最新发布
qq_44285582的博客
09-17 1312
原生AJAX发送Get，Post请求。响应JSON数据的两种方式。如何捕获AJAX请求超时与网络异常的清空。abort函数取消请求。解决请求重复发送的问题
AJAX 入门 day3
2301_77358195的博客
09-16 1049
学习之前先了解一下ajax和axios之间的区别：是一种允许网页在后台与服务器进行数据交换的技术，而不需要重新加载整个页面。它不是一种特定的库或框架，而是一种实现异步数据传输的通用方法。，它适用于浏览器和 node.js。（在浏览器中）或 node.js 的原生 HTTP 模块，但它抽象了它们的复杂性，使得发送请求更加容易。在现代前端开发中，Axios 被广泛推荐用来发起 HTTP 请求，因为它简单易用，并且容易集成到常见的进程式任务中，如 React、Vue 或 Angular 应用。
Java-网络
2301_81543552的博客
09-14 805
Java中的网络编程主要涉及使用Socket类进行网络通信，以及理解各种网络协议。以下是一些关键概念和示例代码，帮助您入门。
Java企业面试题3
m0_74972727的博客
09-15 866
1. break和continue的作用(智*图) break：用于完全退出一个循环（如 for, while）或一个 switch 语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。 continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在 for 循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。 2. if分支语句和switch分支语句的异同之处(智*图) 相同点：都是用来根据不同的条件执行不同的代码块。
Ajax学习笔记：从入门到精通
“Ajax学习经典笔记，适合初学者或者巩固知识用” Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这篇经典笔记详细...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值