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

发送Ajax get请求详解

news 2026/3/24 22:52:17

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

深入浅出 LINQ：从传统集合操作到语言集成查询的进化

在 C# 开发中&#xff0c;我们经常需要对内存中的集合&#xff08;如数组、List<T>、Dictionary<TKey, TValue>&#xff09;进行筛选、排序、分组等操作。过去&#xff0c;我们通常使用 foreach 循环、for 循环&#xff0c;或借助委托来实现这些功能。然而&#xf…...

编程新知 2026/3/24 22:15:36

HTML转Word：前端零后端实现文档无缝转换的完整指南

HTML转Word&#xff1a;前端零后端实现文档无缝转换的完整指南 【免费下载链接】html-docx-js Converts HTML documents to DOCX in the browser 项目地址: https://gitcode.com/gh_mirrors/ht/html-docx-js 在数字化办公的今天&#xff0c;将网页内容转换为可编辑的Wor…...

编程新知 2026/3/24 21:57:33

别再复制粘贴了！用Python GMSSL v3.2.1实现SM4加密，这3个坑我帮你踩过了

实战避坑指南&#xff1a;用Python GMSSL v3.2.1实现SM4加密的三大关键问题 当你第一次尝试用GMSSL库实现SM4加密时&#xff0c;可能会觉得这不过是又一个标准的加密算法实现。但真正开始编码后&#xff0c;你会发现事情远没有想象中那么简单。作为一名在金融安全领域工作多年的…...

编程新知 2026/3/24 21:11:23

手把手教你用HTML5打造个性化音乐播放器（支持网易云/QQ音乐解析）

手把手教你用HTML5打造个性化音乐播放器&#xff08;支持网易云/QQ音乐解析&#xff09; 在当今流媒体音乐盛行的时代&#xff0c;拥有一个个性化的网页音乐播放器不仅能提升用户体验&#xff0c;还能为网站增添独特的品牌调性。本文将带你从零开始&#xff0c;使用HTML5技术构…...

编程新知 2026/3/24 20:49:16

ROS实战：从零搭建机器人自主导航仿真系统

1. ROS机器人导航仿真系统概述 第一次接触ROS机器人导航时&#xff0c;我完全被各种专业术语搞晕了。SLAM、AMCL、move_base...这些名词听起来就像天书。但经过几个项目的实战后&#xff0c;我发现其实搭建一个完整的自主导航系统并没有想象中那么难。今天我就用最直白的语言&a…...

编程新知 2026/3/24 20:13:07

mmdetection实战：从混淆矩阵到精准评估，手把手计算P、R、F1

1. 理解目标检测评估的核心指标 当你用mmdetection训练好一个目标检测模型后&#xff0c;最迫切的问题一定是&#xff1a;这个模型到底表现如何&#xff1f;这时候就需要用到三个黄金指标&#xff1a;精确率(Precision)、召回率(Recall)和F1值。这三个指标就像体检报告里的各项…...

编程新知 2026/3/24 18:48:52

避坑指南：Aspose.Slides转换PPT时水印问题的3种解决方案（附15.9.0版本配置）

Aspose.Slides水印问题全解析&#xff1a;从授权配置到替代方案 最近在技术社区看到不少开发者讨论Aspose.Slides转换PPT时遇到的水印问题。作为一款功能强大的文档处理组件&#xff0c;它在企业级应用中确实能大幅提升工作效率&#xff0c;但未经授权使用时出现的评估水印也确…...

编程新知 2026/3/24 16:32:16

SEO_中小企业低成本做好SEO的完整方案

为什么中小企业需要低成本做好SEO 在当前竞争激烈的商业环境中&#xff0c;中小企业如何在网络上脱颖而出是一个重要的问题。搜索引擎优化&#xff08;SEO&#xff09;作为一种有效的网络营销手段&#xff0c;能够帮助中小企业提高网站在搜索引擎中的排名&#xff0c;从而吸引更…...

编程新知 2026/3/24 16:20:13

从科研到消费级：EEG技术如何通过Muse头环走进日常生活（含最新Muse S Athena评测）

从实验室到客厅&#xff1a;EEG技术如何通过消费级设备重塑健康生活 站在多伦多大学实验室的走廊里&#xff0c;我盯着墙上那张泛黄的脑电图记录纸——那是上世纪70年代一台重达半吨的EEG设备输出的结果。如今&#xff0c;同样的脑电波监测技术&#xff0c;已经被装进重量不到1…...

编程新知 2026/3/24 16:16:12

如何在3分钟内实现滴答清单与Obsidian智能同步：终极自动化任务管理方案

如何在3分钟内实现滴答清单与Obsidian智能同步&#xff1a;终极自动化任务管理方案 【免费下载链接】obsidian-dida-sync 滴答清单同步到obsidian(ticktick sync to obsidian) 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-dida-sync 您是否经常在滴答清单管理…...

编程新知 2026/3/24 16:12:12