JavaScript - 你知道Ajax的原理吗?如何封装一个Ajax

news2024/10/5 18:25:04

 难度级别:中高级及以上                               提问概率:75%


想要实现Ajax,就需要创建它的核心通信对象XMLHttpRequest,通过核心对象的open方法与服务端建立连接,核心对象的send方法可以将请求所需数据发送给服务端,服务端接收到请求并做出响应,我们通过核心对象的onreadystatechange事件监听通信状态,最终获取到响应数据,将数据与DOM元素结合,从而完成Ajax的实现过程。如果想要通过Ajax发送一个GET请求,代码如下

Javascript代码:
<script>
    // 创建核心通信对象 XMLHttpRequest
    let request = new XMLHttpRequest();
    // 监听服务端响应
    request.onreadystatechange = function(e){
        if(request.readyState === 4){ 
            if(request.status >= 200 && request.status <= 300){
                // 服务端响应的数据
                console.log(request.responseText);
            }else {
              

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

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

相关文章

JavaScript(三)-Web APIS

文章目录 DOM事件进阶事件流事件流与两个阶段说明事件捕获事件冒泡阻止冒泡解绑事件 事件委托其他事件页面加载事件元素滚动事件页面尺寸事件 元素尺寸与位置 DOM事件进阶 事件流 什么是事件流 事件流指的是事件完整执行过程中的流动路径 事件流与两个阶段说明 捕获与冒泡 …

windows server 2019-搭建文件共享服务器

一、共享服务器概述 通过网络提供文件共享服务、提供文件下载和上传服务&#xff08;类似FTP服务器&#xff09; 文件共享使用的是CIFS协议&#xff08;微软开发&#xff0c;微软全系服务器都自带此服务&#xff09; FTP服务器对外&#xff08;给客户&#xff09; 文件共享…

04 Python进阶:MySQL-PyMySQL

什么是 PyMySQL&#xff1f; PyMySQL 是一个用于 Python 的纯 Python MySQL 客户端库&#xff0c;提供了与 MySQL 数据库进行交互的功能。PyMySQL 允许 Python 开发人员连接到 MySQL 数据库服务器&#xff0c;并执行诸如查询、插入、更新和删除等数据库操作。 以下是 PyMySQL …

微服务架构下,如何通过弱依赖原则保障系统高可用?

前言 当我初次接触高可用这个概念的时候&#xff0c;对高可用的【少依赖原则】和【弱依赖原则】的边界感模糊&#xff0c;甚至有些“傻傻分不清楚”。这两个原则都关注降低模块之间的依赖关系&#xff0c;但它们之间的确存在某些差异。 那么&#xff0c;「少依赖原则」和「弱…

C#操作MySQL从入门到精通(8)——对查询数据进行高级过滤

前言 我们在查询数据库中数据的时候,有时候需要剔除一些我们不想要的数据,这时候就需要对数据进行过滤,比如学生信息中,我只需要年龄等于18的,同时又要家乡地址是安徽的,类似这种操作专栏第7篇的C#操作MySQL从入门到精通(7)——对查询数据进行简单过滤简单过滤方法就无法…

《CSS 知识点》仅在文本有省略号时添加 tip 信息

html <div ref"btns" class"btns"><div class"btn" >这是一段很短的文本.</div><div class"btn" >这是一段很短的文本.</div><div class"btn" >这是一段很长的文本.有省略号和tip.<…

移动平台相关(安卓)

目录 安卓开发 Unity打包安卓 ​编辑​编辑 BuildSettings PlayerSettings OtherSettings 身份证明 配置 脚本编译 优化 PublishingSettings 调试 ReMote Android Logcat AndroidStudio的调试 Java语法 ​编辑​编辑​编辑 变量 运算符 ​编辑​编辑​编辑​…

后端说处理了跨域但没有生效

场景&#xff1a; 常见的跨域报错&#xff0c;一般都是由后端进行setHeader/*什么的。但是现在这种情况就是后端说他们做了处理。但是我这边请求还是报错。 withCredentials: with-credentials用来设置是否发送cookie&#xff0c;如果为true就会在跨域请求时候携带cookie&…

5个最佳的免费AI图像生成器

原文地址&#xff1a;https://readwrite.com/ai-5-of-the-best-free-ai-image-generators/ Ideogram: Social AI image generator, limited daily prompts, impressive quality.NightCafe: Creative options, custom model training, limited free daily credits.Runway AI: A…

DolphinScheduler 答案整理,最新面试题

DolphinScheduler的架构设计是怎样的&#xff1f; DolphinScheduler的架构设计主要分为四个层次&#xff1a;前端界面层、API服务层、调度层和执行层。 1、前端界面层&#xff1a; 提供任务的定义、流程的设计、监控等功能&#xff0c;用户通过前端界面操作整个系统。 2、AP…

【MySQL数据库 | 第二十三篇】什么是索引覆盖和索引下推

前言&#xff1a; 在数据库查询优化领域&#xff0c;索引一直被视为关键的工具&#xff0c;用于提高查询性能并加速数据检索过程。然而&#xff0c;随着数据库技术的不断发展&#xff0c;出现了一些新的优化技术&#xff0c;其中包括索引下推&#xff08;Index Pushdown&#…

使用Nodejs + express连接数据库mongodb

文章目录 先创建一个js文档安装 MongoDB 驱动程序&#xff1a;引入 MongoDB 模块&#xff1a;设置数据库连接&#xff1a;新建一个表试试执行数据库操作&#xff1a;关闭数据库连接&#xff1a; 前面需要准备的内容可看前面的文章&#xff1a; Express框架搭建项目 node.js 简单…

SketchUp Pro 2024 (草图大师2024)win/mac激活版

SketchUp Pro 2024 (草图大师2024)win/mac激活版(su建模软件,草图大师2024中文版)是一款全球知名的三维建模软件,绘图工具,建模渲染,扩展插件和渲染器模板,海量3D模型及建模灯光材质渲染效果图,用于建筑,城市规划专家,游戏开发等行业。 SketchUp Pro 的主要特点包括&#xff1a…

C++ | Leetcode C++题解之第8题字符串转换整数atoi

题目&#xff1a; 题解&#xff1a; class Automaton {string state "start";unordered_map<string, vector<string>> table {{"start", {"start", "signed", "in_number", "end"}},{"signed…

AssetBundle在移动设备上丢失

1&#xff09;AssetBundle在移动设备上丢失 2&#xff09;Unity云渲染插件RenderStreaming&#xff0c;如何实现多用户分别有独立的操作 3&#xff09;如何在圆柱体类型的地图中编程玩家的输入 4&#xff09;Mixamo动画的根运动问题 这是第380篇UWA技术知识分享的推送&#xff…

log4j漏洞复现

1、apache log4j 是java语言中的日志处理套件/程序。2.0-2.14.1存在JNDI注入漏洞&#xff0c;导致攻击者可以控制日志内容的情况下&#xff0c;传入${jndi:ldap://xxxxxx.com/rce}的参数进行JNDI注入&#xff0c;执行远程命令。 JNDI&#xff1a; 命名和目录接口&#xff0c;…

算法学习 | day36/60 背包问题/分割等和子集

一、题目打卡 1.1 二维背包问题 题目链接&#xff1a;46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; #include<iostream> #include<vector> using namespace std;int n, bagweight;// bagweight代表行李箱空间 void solve() {vector<int> weight…

云手机提供私域流量变现方案

当今数字营销领域&#xff0c;私域流量是一座巨大的金矿&#xff0c;然而并非人人能够轻易挖掘。一家营销公司面临着利用社交、社区、自媒体等应用积累私域流量&#xff0c;并通过销售产品、推送广告等方式实现流量变现的挑战与困境。本文将详细介绍这家公司是如何通过云手机&a…

Flutter学习11 - Future 与 FutureBuilder

1、Future 可以利用 Future 实现异步调用 1.1、Future 的两种形式 自定义一个结果类 class Response {String _data;Response(this._data); }自定义方法实现 Future Future<Response> testFuture() {var random Random();int randomNumber random.nextInt(10);if …

IDEA页面配置:(基本配置)

IDEA页面配置&#xff1a;&#xff08;基本配置&#xff09; 文章目录 IDEA页面配置&#xff1a;&#xff08;基本配置&#xff09;前言&#xff1a;一、主要内容&#xff1a;&#x1f60d;1. 页面背景改为 白色&#xff08;设置主题&#xff09;2. &#xff08;设置字体&#…