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

发送Ajax get请求详解

news 2025/12/15 20:32:50

发送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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/12/15 1:34:41

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/12/10 7:43:31

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/12/14 17:33:29

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/5 1:20:46

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2025/12/12 8:38:13

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/12/1 16:55:47

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2025/12/14 23:52:18

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

编程新知 2025/12/10 13:29:24

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

编程新知 2025/12/10 12:14:06