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

Ajax 之XMLHttpRequest讲解

news 2025/7/5 9:30:38

一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。

一.什么是Ajax?

答:

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

二.Ajax的关键元素

Ajax不是单一的技术，而是四种技术的集合

  • JavaScript                        JavaScript是通用的脚本语言，用来嵌入在某种应用中。Web浏览器中嵌入的JavaScript解释器允许用过程序与浏览器的很多内建功能交互。Ajax应用程序是使用JavaScript编写的。
  • CSS（层叠样式表）             CSS为Web页面元素提供了一种可重用的可视化样式的定义方法。它提供了简单而又强大的方法，以一致的方式定义和使用可视化样式。在Ajax应用中，用户界面的样式可以通过CSS独立修改。
  • DOM（文档对象模型）         DOM以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。通过使用脚本修改DOM，Ajax应用程序可以运行时改变用户界面，或者高效的重绘页面中的某个部分。
  • XMLHttpRequest对象         XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。数据格式通常是XML，但是也可以很好的支持任何基于文本的数据格式（XMLHttpRequest这个名字取得是在是很不恰当）。尽管XMLHttpRequest对于完成这件工作来说最为灵活和通用的工具，但还有其他方法也可以从服务器获取数据。

三.接下来我们讲解XMLHttpRequest对象

讲解之前先来熟悉一下它有哪些属性和方法和传统的有何差异？

下面的图解更直观的解释：

XMLHttpRequest一些常用属性：

当一个XMLHttpRequest对象被创立后，readyState属性标示了当前对象处于什么状态，可以通过对该属性的访问，来判读此次请求的状态然后做出相应的操作

1.responseText属性
responseText属性包含客服端接收到的HTTP响应的文本内容，当readyState属性为0、1或2时，responseText属性包含一个空字符串：当readyState属性值为3时，响应中包含客服端还没完成的响应信息；当readyState属性值卫4，responseText属性才包含完整的响应信息。
2.responseXML属性
只有当readyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时，该属性才会有值并且被解析成一个XML文档，否则该属性为null。如果是回传的XML文档结构不良或者未完成响应回传，该属性也会为null。responseXML属性用来描述被XMLHttpRequest解析后的XML文档的属性。
3.status属性
status属性描述了HTTP状态代码，注意，仅当readyState属性值为3（正在接受中）或者4（已加载）时，才能对此属性进行访问。如果在readyState属性值小于3时，试图去读取status属性值，将引发一个异常。
4.statusText属性
statusText属性描述了HTTP状态代码文本，并且仅当readyState属性为3或者4才可用。当readyState属性为其他值时试图存取statusText属性将引发一个异常。

好了，接下来就切入真实例子当中吧！

（1）  index.jsp页面

  <script type="text/javascript">

     function checkUser(){

         //获取页面上的输入数据

        var value=document.getElementById("uname").value;

        //创建路径

       var url="ajaxServlet?name="+value;

       //创建XMLHttpRequest对象

       var xhr;

      //能力检测  判断是否是IE浏览器

      if(windown.XMLHttpRequest){

            //非IE浏览器

           xhr=new XMLHttpRequest();

      }else{

          //IE浏览器

          xhr=new ActiveObject("Microsoft.XMLHTTP");

       }

       //建立一个请求  (请求方式，url，是否异步（默认为false）)

      xhr.open("get",url,true);

      //在状态发生改变时发生

      xhr.onreadystatechange=function(){

        if(xhr.readystate==4&&xhr.status==200){

            //获取回传的数据

             var result=xhr.responseText;

            document.getElementById("msg").innerText(result);

         }

      }

  </script>

（2）  <body>

     用户名：<input id="uname" οnblur="checkUser()" /><span id="msg"></span>

 </body>

（3）AjaxServlet书写

   public AjaxServlet extends HttpServlet{

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

        {

               doPost(request,response);

         }

       public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException

        {

              String uname=request.getParamter("name");

              if(admin.equals(uname)){

                   //把消息回送给页面

                  response.getWriter().write("已经注册");

              }else{

                   response.getWriter().write("可以注册");

               }

         

         }

  }

（4）web.xml

    <servlet>

           <servlet-name>AjaxServlet</servlet-name>

           <servlet-class>cn.servlet.AjaxServlet</servlet-class>

    </servlet>

    <servlet-mapping>

           <servlet-name>AjaxServlet</servley-name>

           <url-pattern>/ajaxServlet</url-pattern>

    </servlet-mapping>

相关文章：

Ajax 之XMLHttpRequest讲解

一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。 一.什么是Ajax? 答: AJAX即“Asynchronous Javascript And XML”&#xff08;异步JavaScript和XML&#xff09;&#xff0c;是指一种创建交互式网页应用的网页开发技术。 AJAX 异步 JavaScript和XML&#x…...

编程日记 2023/11/19 5:50:07

小程序里面循环使用ref的话获取不到

文章目录 概要问题案例解决方法 概要 在小程序里面一般循环使用ref的话会获取不到 问题案例 //这个时自己封装的组件&#xff0c;然后循环使用 <jilianXuanzhe huoqu"huoqu" :ref"jilianXuanzhe i"></jilianXuanzhe>//如果这样使用的话获取…...

编程日记 2023/11/19 5:49:06

PY32F002B从压缩包到实现串口printf输出

最近学习使用芯领的PY32F002B开发板&#xff0c;记录学习历程供有同样需求的人参考。 本文主要讲述利用开发板实现printf语句串口输出。 开发环境的初步搭建 官方提供了一个压缩文件&#xff0c;文件名py32f002B_231026.zip&#xff0c; 链接&#xff1a;https://pan.baidu.c…...

编程日记 2023/11/19 5:48:05

音视频项目—基于FFmpeg和SDL的音视频播放器解析（八）

介绍 在本系列&#xff0c;我打算花大篇幅讲解我的 gitee 项目音视频播放器&#xff0c;在这个项目&#xff0c;您可以学到音视频解封装&#xff0c;解码&#xff0c;SDL渲染相关的知识。您对源代码感兴趣的话&#xff0c;请查看基于FFmpeg和SDL的音视频播放器 如果您不理解本…...

编程日记 2023/11/19 5:47:04

CorelDRAW2024最新版本的图形设计软件

CorelDRAW2024是Corel公司推出的最新版本的图形设计软件。CorelDRAW是一款功能强大的矢量图形编辑工具&#xff0c;被广泛用于图形设计、插图、页面布局、照片编辑和网页设计等领域。 1. 新增的设计工具&#xff1a;CorelDRAW 2024引入了一些全新的设计工具&#xff0c;使用户能…...

编程日记 2023/11/19 5:46:03

【作业】操作系统实验一：进程和线程

文章目录 实验内容一、进程的创建1、编辑源程序2、编辑结果3、编译和运行程序4、解释运行结果 二、进程共享1、运行2、解释运行结果 三、进程终止1、运行2、解释运行结果 四、进程同步1、运行2、解释运行结果 五、Linux中子进程映像的重新装入1、运行2、解释运行结果 六、线程1…...

编程日记 2023/11/19 5:45:02

Linux 环境删除Conda

你可以按照以下步骤操作来删除Conda&#xff1a; 首先&#xff0c;停止所有conda环境。在终端中运行以下命令&#xff1a; conda deactivate然后使用以下命令获取conda安装的路径&#xff1a; which conda如果成功安装了conda&#xff0c;该命令输出的路径应该是类似于这样的&a…...

编程日记 2023/11/19 5:42:59

uni-app（1）pages. json和tabBar

第一步 在HBuilderX中新建项目 填写项目名称、确定目录、选择模板、选择Vue版本&#xff1a;3、点击创建 第二步 配置pages.json文件 pages.json是一个非常重要的配置文件&#xff0c;它用于配置小程序的页面路径、窗口表现、导航条样式等信息。 右键点击pages&#xff0c;按…...

编程日记 2023/11/19 5:40:56

window系统vscode 编译wvp前端代码

下载代码 wvp-GB28181-pro: WEB VIDEO PLATFORM是一个基于GB28181-2016标准实现的网络视频平台&#xff0c;负责实现核心信令与设备管理后台部分&#xff0c;支持NAT穿透&#xff0c;支持海康、大华、宇视等品牌的IPC、NVR、DVR接入。支持国标级联&#xff0c;支持rtsp/rtmp等…...

编程日记 2023/11/19 5:38:54

获取虎牙直播源

为了今天得LOL总决赛 然后想着下午看看 但是网页看占用高 就想起来有个直播源 也不复杂看了大概一个小时 没啥问题 进入虎牙页面只有 直接F12 网络 然后 看这个长条 一直在获取 发送 那就选中这个区间 找到都是数字这一条 如果直接访问的话会一直下载 我这都取消了 然后 打开…...

编程日记 2023/11/19 5:37:53

Halcon (2):Halcon基础知识

文章目录 文章专栏视频资源前言Halcon文档案例学习结论 文章专栏 Halcon开发 视频资源 机器视觉之C#联合Halcon 前言 本章我们主要讲解Halcon的基础语法 Halcon文档 按下F1&#xff0c;就可以看到Halcon的文档&#xff0c;不过都是纯英文的 如果不清楚参数如何使用&#x…...

编程日记 2023/11/19 5:36:52

测不准原理

测不准原理 算符的对易关系 commutation relation 测不准原理的矢量推导 Schwarz inequality: 设对易关系&#xff1a; 设一个新态&#xff1a; 投影&#xff1a; 那么有&#xff1a; 代回Schwarz inequality 即可证明&#xff1a;...

编程日记 2023/11/19 5:35:51

微机原理_12

一、单项选择题(本大题共15小题,每小题3分&#xff0c;共45分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案。〕 十进制正数56的 8位二进制补码是()。 A. 00011001 B. 10100110 C. 10011001 D. 00100110 若栈顶的物理地址为20100H&#xff0c;当执行完指令PUSH…...

编程日记 2023/11/19 5:34:51

设计模式(5)-使用设计模式实现简易版springIoc

自定义简易版springIoc 1 spring使用回顾 自定义spring框架前&#xff0c;先回顾一下spring框架的使用&#xff0c;从而分析spring的核心&#xff0c;并对核心功能进行模拟。 数据访问层。定义UserDao接口及其子实现类 public interface UserDao {public void add(); }public…...

编程日记 2023/11/19 5:33:50

数据结构与集合源码

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 本…...

编程日记 2023/11/19 5:32:47

nodejs+vue面向中小学课堂教学辅助软件系统的设计与实现-微信小程序-安卓-python-PHP-计算机毕业设计

主要功能有&#xff0c;管理员通过后台会对此教学辅助进行审核&#xff0c;管理员在还可以进行首页、个人中心、学生管理、教师管理、班级信息管理、科目名称管理、课程信息管理、教学资料管理、作业信息管理、作业提交管理、作业成绩管理、在线考试管理、试题管理、考试管理、…...

编程日记 2023/11/19 5:31:46

智能配电系统解决方案

智能配电系统解决方案是一种集成了先进技术和智能化功能的配电系统&#xff0c;它能够提高电力系统的效率、可靠性和安全性。力安科技智能配电系统解决方案依托电易云-智慧电力物联网&#xff0c;具体实施的方案如下&#xff1a; 智能化设备和传感器&#xff1a;采用智能化的开…...

编程日记 2023/11/19 5:30:45

Python基础入门---conda 如何管理依赖包以及复制相同环境的

文章目录 创建虚拟环境：创建虚拟环境并指定Python版本：安装依赖包：从环境导出依赖包清单：从依赖包清单创建环境：复制环境：移植环境：在Conda中，你可以使用conda create命令来创建和管理虚拟环境，而使用conda install命令来安装和管理依赖包。以下是一些基本的命令和步骤…...

编程日记 2023/11/19 5:29:44

JVM jstat 查看内存新生代老年代回收情况，排查oom

jstat 命令 jstat - [-t] [-h] [ []] option&#xff1a;我们经常使用的选项有gc、gcutil vmid&#xff1a;java进程id interval&#xff1a;间隔时间&#xff0c;单位为毫秒 count&#xff1a;打印次数 每秒打印一次 jstat -gc 9162 1000S0C:年轻代第一个survivor的容量…...

编程日记 2023/11/19 5:28:43

Postman启动问题：Could not open Postman

Postman启动问题&#xff1a;Could not open Postman 状态&#xff0c;在单击Postman之后一直在转圈圈&#xff0c;无法正常启动。 细心的朋友会发现&#xff0c;右下角 会经常出现防火墙关闭等提示信息&#xff0c;表示该程序&#xff0c;在向外链接。 Error Could not open…...

编程日记 2023/11/19 5:27:42

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/7/4 23:04:53

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/7/1 12:07:59

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/4 7:21:24

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/7/4 14:48:47

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/7/5 4:25:14

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/7/4 23:34:20

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/6/24 3:19:42

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/7/4 14:58:44

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/6/21 14:21:20