当前位置： 首页 > news >正文

发送Ajax get请求详解

news 2025/10/31 13:21:51

发送AJAX get请求，前端代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax get请求</title>

</head>

<body>

        <script type="text/javascript">

            window.onload = function () {

                document.getElementById("btn").οnclick= function () {

                    //测试程序

                    // console.log("发送ajax get请求")

                    //发送ajax请求

                    //1.创建ajax核心对象XMLHttpRequest

                    var xhr = new XMLHttpRequest();

                    //2.注册回调函数

                    xhr.onreadystatechange = function () {

                        //这个回调函数会被调用多次

                        //状态码0--->1被调用1次

                        //状态码1--->2被调用1次

                        //状态码2--->3被调用1次

                        //状态码3--->4被调用1次

                        console.log(xhr.readyState);

                        //当XMLHttpRequest对象的readyState的状态码是4的时候，表示响应结束了

                        //以下两种写法都是可以的

                        /*

                        if (xhr.readyState == 4) {

                        }*/

                        if (this.readyState == 4){

                            //程序运行到此，响应结束

                            //console.log("响应结束了")

                            //响应结束之后，一般会有一个HTTP的状态码，HTTP状态码是HTTP协议的一部分，

                            //是HTTP协议规定的服务器响应之后都会有一个状态码

                            //状态码包括：200表示成功了；404表示资源没找到；500表示服务器内部错误

                            //此处可以获取HTTP状态码

                            //获取状态码有两种方式如下：

                            //xhr.status 或 this.status

                            //判断状态码

                            if (this.status == 404) {

                                alert("你访问的资源没找到！请检查访问路径")

                            }else if (this.status == 500){

                                alert("服务器内部错误，请联系程序员")

                            }else if (xhr.status == 200){

                                //alert("访问成功！")

                                //通过XMLHttpRequest对象的responseText的属性来获取服务器响应的信息

                                //不管服务器响应回来的信息（信息包括：普通文本、HTML、XML或JSON...）是什么，

                                                     //responseText都以普通文本的形式获取

                                //alert(xhr.responseText);//将服务器的响应信息获取到并alert，也可以写this.responseText

                                //把响应信息放到div图层当中渲染

                                //注意这里的innerHTML是JavaScript中的语法，与ajax的XMLHttpRequest对象无关，

                                //innerHTML会把后面的普通文本当做一段HTML代码来执行，注意innerHTML与innerText的区别

                                document.getElementById("myDiv").innerHTML = this.responseText;

                            }

                        }

                    };

                    //3.开启通道(open()方法只是让浏览器和服务器建立连接，打开通道，并不会发送请求)

                    //这里调用XMLHttpRequest对象的open()方法

                    //open(method, url, async, user, psw)

                    //method：请求方式，可以是GET，也可以是POST,还可以是其他请求方式

                    //url：请求路径（请求地址）(这是前端服务器发送的请求需要有项目名   "/项目名/xxx")

                    //async:有两个值可选分别是：true或false；true表示该ajax请求是异步请求，false表示该请求是同步请求

                                        //多数情况选择true，特殊情况选择false

                    //user：用户名 psw：密码 是进行身份认证用的，这个主要看服务器的需要，不需要的情况下就省略了

                    xhr.open("GET","/ajax/ajaxrequest1",true);

                    //4.发送请求

                    xhr.send();

                }

            }

        </script>

        <input type="button" value="hello ajax" id="btn">

        <div id="myDiv"></div>

</body>

</html>

发送AJAX get请求，后端代码： 

package com.yjg.ajax.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;

import java.io.PrintWriter;

@WebServlet("/ajaxrequest1")

public class AjaxRequest1Servlet extends HttpServlet {

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //模拟出现异常

        //String s = null;

        //s.toString();

        //向浏览器响应信息

        //设置响应内容的类型以及字符集

        response.setContentType("text/html;charset=utf-8");

        //获取响应流

        PrintWriter out = response.getWriter();

        //设置响应内容

        //out对象向浏览器输出信息，在服务器中的代码与以前的一样，

        //只是这个信息被浏览器中的XMLHttpRequest对象的responseText属性接收了

        out.print("<font color='red'>hello ajax!!!</font>");

    }

}

程序正常运行之后的浏览器显示效果:

        

服务器发生异常之后浏览器显示效果：

         

相关文章：

发送Ajax get请求详解

发送AJAX get请求&#xff0c;前端代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>ajax get请求</title> </head> <body> <script type"text/java…...

编程日记 2023/5/6 17:13:35

SQL语句

创建及删除数据库和表 CREATE DATABASE 数据库名; CREATE DATABASE school; 创建新的表 CREATE TABLE 表名(字段1 数据类型,字段2 数据类型[,...] [,PRIMARY KEY (主键名)]); #主键一般选择能代表唯一性的字段&#xff0c;不允许取空值(NULL)&#xff0c;值也不允许重复&…...

编程日记 2023/5/6 17:08:34

Mysql 学习（八）单表查询方法二

复杂查询 上一节说了5种访问类型的查询&#xff0c;这一节就来说说关于这些比较复杂的查询 情况一&#xff1a;多个二级索引查询 sql&#xff1a;SELECT * FROM index_value_table WHERE value1 abc AND value2 > 1000;搜索条件&#xff1a; value1 等于 abcvalue2 大于…...

编程日记 2023/5/6 17:03:33

安卓系统下的截屏和录屏

可以抓取手机屏幕画面&#xff08;屏幕截图&#xff09;&#xff0c;也可以录制屏幕画面视频。拍摄屏幕后&#xff0c;可以查看、编辑和分享所拍的图片或视频。 抓取屏幕截图 打开要抓取的屏幕。视手机情况执行下列一个操作&#xff0c;3种方法看你手机有效的&#xff1a; 同…...

编程日记 2023/5/6 16:58:31

行为型模式-中介者模式

中介者模式 概述 一般来说&#xff0c;同事类之间的关系是比较复杂的&#xff0c;多个同事类之间互相关联时&#xff0c;他们之间的关系会呈现为复杂的网状结构&#xff0c;这是一种过度耦合的架构&#xff0c;即不利于类的复用&#xff0c;也不稳定。例如在下左图中&#xf…...

编程日记 2023/5/6 16:53:30

辅助驾驶功能开发-功能规范篇(16)-2-领航辅助系统NAP-功能ODD定义

1.系统定义 智能驾驶系统包含行车场景功能和泊车场景功能，行车场景功能包括安全ADAS功能、基础ADAS功能和高阶ADAS功能三大类，本文档定义高阶ADAS功能中的导航辅助驾驶功能用例。 1.1.高阶ADAS功能列表 功能需求ID 功能分类 功能名称...

编程日记 2023/5/6 16:48:28

PMP/高项 06-项目成本管理

项目成本管理 概念 项目成本管理 项目成本管理又被称为项目造价管理&#xff0c;是有关项目成本和项目价值两个方面的管理&#xff0c;是为保障以最小的成本实现最大的项目价值而开展的项目专项管理工作。 确保在批准的项目预算内完成项目 成本管理内容 规划成本管理 制定项目…...

编程日记 2023/5/31 11:18:33

XXL-JOB中间件【实现分布式任务调度】

目录 1&#xff1a;XXL-JOB介绍 2&#xff1a;搭建XXL-JOB 2.1&#xff1a;调度中心 2.2&#xff1a;执行器 2.3&#xff1a;执行任务 3&#xff1a;分片广播 1&#xff1a;XXL-JOB介绍 XXL-JOB是一个轻量级分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学…...

编程日记 2023/5/6 16:38:24

Vue3+Element Plus环境搭建和一键切换明暗主题的配置

Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库。 最终效果&#xff1a; 环境搭建 已安装 16.0 或更高版本的 Node.js&#xff0c;终端&#xff1a; npm init vuelatest这一…...

编程日记 2023/5/30 7:46:29

Leetcode326. 3 的幂

Every day a leetcode 题目来源&#xff1a;326. 3 的幂 相似题目&#xff1a;342. 4的幂 解法1&#xff1a;递归 代码&#xff1a; /** lc appleetcode.cn id326 langcpp** [326] 3 的幂*/// lc codestart class Solution { public:bool isPowerOfThree(int n){if (n <…...

编程日记 2023/5/30 7:18:41

【运动规划算法项目实战】如何在栅格地图中实现Dijkstra算法

文章目录 简介一、算法介绍1.1 Dijkstra算法流程1.2 Dijkstra算法伪代码二、代码实现2.1 ROS实现2.2 RVIZ演示三、总结简介 Dijkstra算法是一种用于图中单源最短路径的贪心算法。在计算机科学和网络设计中广泛应用。该算法从起点开始，通过优先选择距离起点最近的未标记节点来…...

编程日记 2023/5/30 6:42:18

【算法】一文彻底搞懂ZAB算法

文章目录 什么是ZAB 算法&#xff1f;深入ZAB算法1. 消息广播两阶段提交ZAB消息广播过程 2. 崩溃恢复选举参数选举流程 ZAB算法需要解决的两大问题1. 已经被处理的消息不能丢2. 被丢弃的消息不能再次出现 最近需要设计一个分布式系统&#xff0c;需要一个中间件来存储共享的信息…...

编程日记 2023/5/29 20:49:45

【软考高级】2022年系统分析师综合知识

1.( )是从系统的应用领域而不是从系统用户的特定需要中得出的&#xff0c;它们可以是新的功能性需求&#xff0c;或者是对已有功能性需求的约束&#xff0c;或者是陈述特定的计算必须遵守的要求。 A.功能性需求 B. 用户需求 C.产品需求 D.领域需求 2.对于安全关键系…...

编程日记 2023/5/6 16:13:17

关于AI未来的思考和应用场景

关于AI未来的思考和应用场景 AI&#xff08;人工智能&#xff09;是当今最热门的技术领域之一&#xff0c;它已经在多个领域产生了深远的影响&#xff0c;如医疗、金融、制造业等。未来&#xff0c;AI将继续发展&#xff0c;并在更多领域产生重要的影响。 AI的未来发展方向有…...

编程日记 2023/5/6 16:08:15

智慧城市规划数字化管理：数字孪生技术的创新应用

随着智能城市的不断发展&#xff0c;数字孪生技术也开始在智慧城市的建设中得到了广泛应用。数字孪生作为一种数字化的复制技术&#xff0c;它可以模拟真实世界中的实体和过程。 在城市规划方面&#xff0c;数字孪生可以帮助城市规划师更加直观地了解城市的整体规划和发展趋势&…...

编程日记 2023/5/30 3:33:44

开心档之C++ 指针

C 指针 学习 C 的指针既简单又有趣。通过指针&#xff0c;可以简化一些 C 编程任务的执行&#xff0c;还有一些任务&#xff0c;如动态内存分配&#xff0c;没有指针是无法执行的。所以&#xff0c;想要成为一名优秀的 C 程序员&#xff0c;学习指针是很有必要的。 正如您所知…...

编程日记 2023/5/6 15:58:13

零基础搭建私人影音媒体平台【远程访问Jellyfin播放器】

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 转载自内网穿透工具的文章&#xff1a;零基础搭建私人影音媒体平台【远程访问Jelly…...

编程日记 2023/5/6 15:53:12

Abstract Expressionist

古董地图画集 10大最有名的抽象艺术家 抽象表现主义是现代许多不同艺术思想和表达流派中最奇特的艺术运动之一。这场运动开始从社会变革中涌现出来&#xff0c;恰逢第二次世界大战的最后几周和几个月。 这一次&#xff0c;来自世界各地的人们开始欢迎在经历了多年有史以来最致…...

编程日记 2023/5/29 17:09:19

【郭东白架构课 模块二：创造价值】24｜节点四：如何减少语义上的分歧？

你好&#xff0c;我是郭东白。上节课我们通过一个篇幅比较长的电商案例&#xff0c;详细展示了为什么在架构活动中会出现语义分歧。同时也描述了&#xff0c;架构师在统一语义这个环节中所要创造的真正价值是什么。即&#xff0c;看到不同角色之间语境的差异&#xff0c;然后通…...

编程日记 2023/5/6 15:43:10

windows下免费本地部署类ChatGpt的国产ChatGLM-6B

ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别下最低只需 6GB 显存&#xff09;。 Chat…...

编程日记 2023/5/31 7:44:16

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/10/31 0:52:09

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/10/24 21:55:27

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/10/25 5:20:46

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/10/18 2:38:40

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2025/10/29 21:52:51

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

编程新知 2025/10/21 19:08:18

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2025/10/29 18:13:37

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...

编程新知 2025/9/17 2:58:46

Python异步编程：深入理解协程的原理与实践指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 持续学习&#xff0c;不断…...

编程新知 2025/10/28 4:15:49