AJAX入门:前端连接后端

news2024/12/22 16:50:51

一.概述

AJAX即Asynchronous Javascript And XML,即异步JavaScript和XML。

 

AJAX作用:

  1. 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。(使用Ajax和服务器进行通信,就可以使用Html+Ajax来替换JSP页面了~)
  2. 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

(通俗的说,异步请求就是不会有转圈圈等行为,让用户感知到正在处理请求~)

二.写法

1.创建服务端Servlet

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

@WebServlet("/ajax01")
public class Ajax_Servlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().write("<h1>Ajax的初次尝试~</h1>");
    }

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

2.创建核心对象

var xhttp;
xhttp= new XMLHttpRequest();

3.发送请求

    xhttp.open("GET","http://localhost:8080/Ajax_S1_war/ajax01");
    xhttp.send();

4.获取响应

    xhttp.onreadystatechange = function (){
        if (this.readyState==4 && this.status==200)
        {
            alert(this.responseText);
        }

注意:script标签要写在body里面!

获取成功~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1510121.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java_6 数组拆分 I

数组拆分 I 给定长度为 2n 的整数数组 nums &#xff0c;你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) &#xff0c;使得从 1 到 n 的 min(ai, bi) 总和最大。 返回该 最大总和 。 示例 1&#xff1a; 输入&#xff1a;nums [1,4,3,2] 输出&#…

如何看待Linux桌面操作系统的火速增长

文章目录 1. 使用过Linux桌面操作系统吗&#xff1f;Linux系统有什么优势&#xff1f;对于Linux桌面操作系统份额的火速增长怎么看呢认为未来Linux会主导桌面操作系统吗&#xff1f; #如何看待Linux桌面操作系统的火速增长&#xff1f; 1. 使用过Linux桌面操作系统吗&#xff…

蓝桥杯[OJ 2928]分糖果-CPP(贪心、字典序)

目录 一、题目描述&#xff1a; 二、整体思路 (一)字典序比较规则 (二)正确理解题意 &#xff08;三&#xff09;分类讨论 三、代码 一、题目描述&#xff1a; 二、整体思路 (一)字典序比较规则 首先要知道字典序是怎么比较大小的&#xff0c;简单来说按以下次序进行比较&am…

污水磷资源回收工艺及海普树脂除杂

#污水磷资源回收工艺及海普树脂除杂 ​磷矿资源也是一种不可再生资源&#xff0c;目前磷矿产业仍在扩张&#xff0c;随着新能源行业磷酸铁锂电池的大范围应用&#xff0c;对磷的需求量仍在增加。基于污水中相对较高的磷负荷&#xff0c;从污泥焚烧灰分中回收磷显得十分有必要&a…

iTOP-3588开发板快速启动手册Windows安装串口终端软件创建串口会话

双击上图中红框的应用程序后&#xff0c;软件会启动&#xff0c;界面启动后如下图所示&#xff1a; 下面来创建第一个SSH 会话。点击菜单栏 「会话」 --> 「新建会话」&#xff0c;即可弹出 「会话设置」 对话框&#xff0c;如下图所示&#xff1a; 在会话设置框里面选择串口…

如何提高API接口的性能和设计安全可靠的API

如何提高API接口的性能 下图显示了提高 API 性能的 5 种常见技巧。 分页 这是在结果集较大时常用的优化方法。结果会以流式方式传回客户端&#xff0c;以提高服务响应速度。 异步日志 同步日志每次调用都要处理磁盘&#xff0c;会降低系统速度。异步日志会先将日志发送到无…

Oracle增量更新备份(更快的备份策略)

正常的备份策略包括&#xff1a;全库备份&#xff0c;full备份&#xff0c;创建镜像备份&#xff0c;累积增量备份以及差异增量备份&#xff1a; 全库备份&#xff1a;如名&#xff0c;对oracle整个数据库进行备份&#xff0c;包括archivedlog&#xff0c;数据文件&#xff0c;…

Verilog刷题笔记37

题目&#xff1a;3位二进制加法器 Now that you know how to build a full adder, make 3 instances of it to create a 3-bit binary ripple-carry adder. The adder adds two 3-bit numbers and a carry-in to produce a 3-bit sum and carry out. To encourage you to actua…

Mixamo动画素材导入UE5的最简单方法

一、Mixamo素材 官网&#xff1a;https://www.mixamo.com/ Mixamo是Adobe公司出品的免费动画库&#xff0c;可商用。软件分为characters(角色&#xff09;、Animations&#xff08;动画)两个部分。 二、辅助工具MIXAMO CONVERTER 官网&#xff1a;https://terribilisstudio…

如何做校园圈子小程序,需要哪些功能?APP小程序H5公众号功能齐全,PHP书写,uniAPP。源码交付,支持二开!

最近几年&#xff0c;校园外卖跑腿服务市场迅速兴起。由于学生每天课程繁忙&#xff0c;很多人没有时间去食堂或外面的餐厅用餐&#xff0c;校园外卖跑腿平台提供了便捷和快速的解决方案&#xff0c;满足了学生的饮食跑腿需求&#xff0c;并受到越来越多学生的喜爱。 那么&…

通过esp32cam拍摄图片上传至PC并通过YOLO进行目标检测

通过esp32cam拍摄图片上传至PC并通过YOLO进行目标检测 一.通过esp32cam拍摄照片并上传至PC二.训练自己的数据集三.AutoDL AI算力云的使用1.账号注册2.GPU选取3.GPU使用4.开机训练 四.数据集的使用 一.通过esp32cam拍摄照片并上传至PC 文章链接: https://blog.csdn.net/qq_6297…

【国产】API接口管理平台的产品设计与搭建讲解

【国产接口管理平台】PhalApi Pro (π框架专业版) PhalApi Pro (发音&#xff1a;π框架专业版)&#xff0c;是一款国产企业级API接口管理平台&#xff0c;可以零代码、快速搭建API接口开发平台、接口开放平台、接口管理平台。基于PhalApi开源接口开发框架&#xff0c;通过低代…

MySQL安装使用(mac、windows)

目录 macOS环境 一、下载MySQL 二、环境变量 三、启动 MySql 四、初始化密码设置 windows环境 一、下载 二、 环境配置 三、安装mysql 1.初始化mysql 2.安装Mysql服务 3.更改密码 四、检验 1.查看默认安装的数据库 2.其他操作 macOS环境 一、下载MySQL 打开 MyS…

C++的学习

代码练习 输入一个字符串&#xff0c;统计其中大写字母、小写字母、数字、空格以及其他字符的个数 #include <iostream>using namespace std;int main() {cout << "请输入一个字符串" << endl;string str;getline(cin,str);int capital 0;int l…

C语言游戏实战(11):贪吃蛇大作战(多人对战)

成果展示&#xff1a; 贪吃蛇&#xff08;多人对战&#xff09; 前言&#xff1a; 这款贪吃蛇大作战是一款多人游戏&#xff0c;玩家需要控制一条蛇在地图上移动&#xff0c;吞噬其他蛇或者食物来增大自己的蛇身长度和宽度。本游戏使用C语言和easyx图形库编写&#xff0c;旨在…

功能测试转自动化测试好不好转型?

手工测试做了好多年&#xff0c;点点点成了每天必须做的事情。但是随着自动化测试趋势的日渐明显&#xff0c;以及受到薪资、技能的双重考验&#xff0c;掌握自动化测试成为了必备技能。 手工转自动化测试&#xff0c;不是一蹴而就的。“预先善其事&#xff0c;必先利其器”&a…

C++中的RAII原则和资源管理如何提高程序效率和安全性?

文章目录 C中的RAII&#xff08;Resource Acquisition Is Initialization&#xff09;原则是一种编程范式&#xff0c;它确保资源在其生命周期内的有效管理。RAII的核心思想是在对象创建时&#xff08;初始化阶段&#xff09;获取资源&#xff0c;并在对象销毁时&#xff08;析…

C# 8.0+版本项目 string不可为空

1.在某一次新建项目的时候发现&#xff0c;新建的项目&#xff0c;写的测试接口&#xff0c;接口的入参有string的参数&#xff0c; 但是调用接口的时候string的参数没有传报了400&#xff0c;很奇怪&#xff0c;也没有语法错误之类的。 2.解决办法 在项目上右键->属性->…

HTML静态网页成品作业(HTML+CSS)——家乡漳州介绍设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

Flink技术简介与入门实践

架构简介 Flink 是一个分布式流处理和批处理计算框架&#xff0c;具有高性能、容错性和灵活性。下面是 Flink 的架构概述&#xff1a; JobManager&#xff1a;JobManager 是 Flink 集群的主节点&#xff0c;负责接收和处理用户提交的作业。JobManager 的主要职责包括&#xff1…