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

javascript基础十六:Ajax 原理是什么?如何实现?

在这里插入图片描述
一、是什么
AJAX全称(Async Javascript and XML)

即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面
流程图如下:
在这里插入图片描述
举个粟子:

领导想找小李汇报一下工作,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作

Ajax请求数据流程与“领导想找小李汇报一下工作”类似,上述秘书就相当于XMLHttpRequest对象,领导相当于浏览器,响应数据相当于小李

浏览器可以发送HTTP请求后,接着做其他事情,等收到XHR返回来的数据再进行操作

二、实现过程
实现 Ajax异步交互需要服务器逻辑进行配合,需要完成以下步骤:

  • 创建 Ajax的核心对象 XMLHttpRequest对象
  • 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
  • 构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
  • 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
  • 接受并处理服务端向客户端响应的数据结果
  • 将处理结果更新到 HTML页面中

创建XMLHttpRequest对象

通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象

const xhr = new XMLHttpRequest();

与服务器建立连接

通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接

xhr.open(method, url, [async][, user][, password])

参数说明:

  • method:表示当前的请求方式,常见的有GET、POST
  • url:服务端地址
  • async:布尔值,表示是否异步执行操作,默认为true
  • user: 可选的用户名用于认证用途;默认为`null
  • password: 可选的密码用于认证用途,默认为`null

给服务端发送数据
通过 XMLHttpRequest 对象的 send() 方法,将客户端页面的数据发送给服务端

xhr.send([body])

body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null

如果使用GET请求发送数据的时候,需要注意如下:

  • 将请求数据添加到open()方法中的url地址中
  • 发送请求数据中的send()方法中参数设置为null

绑定onreadystatechange事件
onreadystatechange 事件用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState ,

关于XMLHttpRequest.readyState属性有五个状态,如下图显示
在这里插入图片描述
只要 readyState属性值一变化,就会触发一次 readystatechange 事件
XMLHttpRequest.responseText属性用于接收服务器端的响应结果

举个粟子:

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){if(request.readyState === 4){ // 整个请求过程完毕if(request.status >= 200 && request.status <= 300){console.log(request.responseText) // 服务端返回的结果}else if(request.status >=400){console.log("错误信息:" + request.status)}}
}
request.open('POST','http://xxxx')
request.send()

三、封装

通过上面对XMLHttpRequest对象的了解,下面来封装一个简单的ajax请求

// 封装一个ajax请求
function ajax(options){
//创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()// 初始化参数的内容
options = options || {}
options.type = (options.type||"GET").toUpperCase()
options.dataType = options.dataType || 'application/json'
options.responseType  = options.responseType  || 'json'
const params = options.dataxhr.setRequestHeader('content-type',options.dataType)
xhr.responseType  = options.responseType
// 发送请求
if(options.type==="GET"){xhr.open("GET",options.url+"?"+params,true)xhr.send(null)}else{xhr.open("POST",options.url,true)xhr.send(params)}// 接受请求xhr.onreadystatechange = function(){if(xhr.redayState ===4){let status = xhr.statusif(status>=200&&status<300){options.success && options.success(xhr.responseText,xhr.responseXML)}else{options.fail && options.fail(status)}}}
}

responseType格式
IE不用考虑了,停止维护了。
容易忽略:用了默认值,返回就是一个字符串,你需要JSON.parse()处理一下
xhr.responseType = ‘blob’ 设置这个的时候,你获取到的就是一个二进制字符串,当后端给你返回图片、文件时候你就得这么处理
在这里插入图片描述

使用方式如下

ajax({type: 'post',dataType: 'json',responseType: 'json',data: {},url: 'https://xxx',success: function(text,xml){ //请求成功后的回调函数},fail: function(status){ // 请求失败后的回调函数}
})

相关文章:

javascript基础十六:Ajax 原理是什么?如何实现?

一、是什么 AJAX全称(Async Javascript and XML) 即异步的JavaScript 和XML&#xff0c;是一种创建交互式网页应用的网页开发技术&#xff0c;可以在不重新加载整个网页的情况下&#xff0c;与服务器交换数据&#xff0c;并且更新部分网页 Ajax的原理简单来说通过XmlHttpRequ…...

大话手游原始服务端搭建教程Centos

大话手游原始服务端搭建教程Centos 大家好&#xff0c;我是艾西&#xff0c;今天给大家分享一款回合制的ARPG大话手游搭建教程。游戏场景、精美的画面以及多元的人物做的非常棒。在游戏中可以穿越神话世界&#xff0c;同时也可以结交好友&#xff0c;加入团队&#xff0c;共同…...

C语言中的通用工具库stdlib.h

目录 1、malloc和free&#xff1a;用于动态内存分配和释放。 2、atoi和atof&#xff1a;用于将字符串转换为整数或浮点数。 3、rand和srand&#xff1a;用于生成随机数和设置随机数种子。 4、system&#xff1a;用于执行系统命令。 5、exit&#xff1a;用于退出程序。 6、…...

优化带排序的分页查询

优化带排序的分页查询 浅分页&#xff1a; select user_no,user_name,socre from student order by score desc limit 5,20 深分页&#xff1a; select user_no,user_name,socre from student order by score desc limit 80000,20 因为偏移量深分页更大&#xff0c;所以深分页执…...

chatgpt赋能python:Python如何删除空白

Python 如何删除空白 在SEO优化过程中&#xff0c;我们需要保证我们的网页内容的质量和可读性。其中&#xff0c;一个重要的因素是删除空白。在Python中&#xff0c;我们可以使用多种方法来删除空白&#xff0c;下面我们将介绍一些方法并讨论它们的优缺点。 方法一&#xff1…...

[论文阅读] Explicit Visual Prompting for Low-Level Structure Segmentations

[论文地址] [代码] [CVPR 23] Abstract 我们考虑了检测图像中低层次结构的通用问题&#xff0c;其中包括分割被操纵的部分&#xff0c;识别失焦像素&#xff0c;分离阴影区域&#xff0c;以及检测隐藏的物体。每个问题通常都有一个特定领域的解决方案&#xff0c;我们表明&am…...

swagger在spring项目中的使用

一、Swagger2介绍 前后端分离开发模式中&#xff0c;api文档是最好的沟通方式。 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 及时性 (接口变更后&#xff0c;能够及时准确地通知相关前后端开发人员)规范性 (并且保…...

操作系统第五章——输入输出管理(中)

提示&#xff1a;若我会见到你&#xff0c;事隔经年&#xff0c;我如何向你招呼&#xff0c;以眼泪&#xff0c;以沉默 文章目录 5.2.1 IO核心子系统知识总览功能要在那个层次实现 5.2.2 假脱机技术&#xff08;SPOOLing&#xff09;知识总览什么是脱机技术假脱机技术——输入井…...

【网络】socket套接字基础知识

目录 IP地址和端口号 源IP地址和目的IP地址 端口号 源端口号和目的端口号 TCP/UDP协议 网络字节序 大小端 如何定义网络数据流地址 网络字节序和主机字节序的转换 socket编程接口 sockaddr结构 IP地址和端口号 源IP地址和目的IP地址 在IP数据包头部中&#xff0c;会…...

Go语言介绍以及Go语言环境安装

初步介绍&#xff1a; Go 是一个开源的编程语言&#xff0c;它能让构造简单、可靠且高效的软件变得容易。 Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发&#xff0c;后来还加入了Ian Lance Taylor, Russ Cox等人&#xff0c;并最终于2009年11月开源&am…...

FPGA纯verilog实现CameraLink视频接收和发送,附带工程源码和技术支持

目录 1、前言2、CameraLink协议基础3、目前我已有的CameraLink收发工程4、设计方案5、CameraLink解码模块详解6、CameraLink编码模块详解7、vivado工程详解8、上板调试验证9、福利&#xff1a;工程代码的获取 1、前言 FPGA实现CameraLink视频编解码目前有两种方案&#xff1a;…...

k8s中的service、api-server、kube-proxy有什么区别

在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;Service、API Server和kube-proxy是三个不同的组件&#xff0c;它们在集群中扮演着不同的角色和功能。下面我将为你解释它们之间的区别&#xff1a; 1. Service&#xff08;服务&#xff09;&#xff1a; Service是K8s中…...

记录::opencv编译,cmake编译vs动态库

环境&#xff1a;window7&#xff0c;cmake-gui&#xff0c;vs2013 opencv&#xff1a;3.4.4 opencv_contrib&#xff1a;3.4.4&#xff08;nonfree模块&#xff0c;主要为了用sift&#xff09; 链接&#xff1a;https://pan.baidu.com/s/1OXg2IRaxTLTVqM2PVR2ZFA 提取码&a…...

网易SmartAuto,中文编程就是爽

上一篇我们应该用中文编程发出来后&#xff0c;果不其然不少人很不以为然&#xff0c;还有直说“骗钱的&#xff0c;估计也没人会上当”。这样的反应是在预料之中。 行胜于言&#xff0c;我今天讲一个我们已经用了好几年的产品&#xff0c;用来做UI自动化测试的SmartAuto&#…...

适配器模式那么强大,该怎么使用呢?

适配器模式是一种常用的设计模式&#xff0c;它可以将两个不兼容的接口进行转换&#xff0c;从而使它们之间可以进行交互。在业务开发中&#xff0c;我们经常需要将不同的系统或服务进行整合&#xff0c;而这些系统或服务往往有着不同的接口和数据格式。适配器模式提供了一种解…...

[极客大挑战 2019]PHP1

既然提到了备份网站估计也是存在着网站备份文件&#xff0c;可以先用御剑扫一下 啥都没扫出来&#xff0c;但是上回做文件备份的题目时收集了一些关于常用备份文件的文件名和后缀&#xff0c;可以直接使用burp抓包爆破&#xff0c;果然爆破出一个www.zip文件 访问下载好文件就有…...

PID 学习

采样数据&#xff1a; X 1 , X 2 , X 3 . . . , X ( k − 1 ) , X k X_1,X_2,X_3...,X_(k-1),X_k X1​,X2​,X3​...,X(​k−1),Xk​ E k S v − X k E_kS_v-X_k Ek​Sv​−Xk​ ( S v S_v Sv​ 是用户设定值) 比例算法&#xff1a; O U T P K p ∗ E k O U T 0 OUT_PK_p*…...

002. java.lang.NumberFormatException: Infinite or NaN,怎么破?

你好&#xff0c;我是YourBatman&#xff1a;当我老了&#xff0c;也写代码&#xff1b;不为别的&#xff0c;只为爱好。 &#x1f4da;前言 如果你工作超5年&#xff0c;100%遇到过这个异常&#xff1a;java.lang.NumberFormatException: Infinite or NaN Infinite中文释义…...

Vue常用的修饰符

Vue常用的修饰符有哪些有什么应用场景 修饰符是什么 在Vue中&#xff0c;修饰符处理了许多DOM事件的细节&#xff0c;让我们不再需要花大量的时间去处理这些烦恼的事情&#xff0c;而能有更多的精力专注于程序的逻辑处理 分类、有5种 表单修饰符事件修饰符鼠标按键修饰符键…...

freertos笔记-任务切换

红叶何时落水 任务切换&#xff0c;调用PendSV #define taskYIELD() portYIELD() #define portYIELD() \ { \portNVIC_INT_CTRL_REG portNVIC_PENDSVSET_BIT; \ 通过向中断控制和壮态寄存器 ICSR 的 bit28 写入 1 挂起 PendSV 来启动 PendSV 中断\__dsb( portSY_FULL_READ…...

Win10老电脑别急着扔!保姆级教程教你绕过TPM2.0限制,免费升级到Win11 22H2

Win10老电脑焕新指南&#xff1a;无TPM2.0硬件升级Win11 22H2的实战方案 当微软发布Windows 11时&#xff0c;TPM2.0芯片的强制要求让许多老设备用户措手不及。我的2015年款Surface Pro 4最初也被系统更新助手判定为"不兼容设备"&#xff0c;但经过三天的技术探索和实…...

机器学习加速格点QCD计算:从强子真空极化到重子质量修正

1. 项目概述&#xff1a;当格点QCD遇上机器学习在格点量子色动力学&#xff08;Lattice QCD&#xff09;的计算世界里&#xff0c;我们这些常年跟海量数据和超级计算机打交道的人&#xff0c;最头疼的问题之一就是“噪声”。这可不是实验室里嗡嗡响的那种声音&#xff0c;而是统…...

混沌时间序列预测:轻量级方法为何完胜复杂深度学习模型?

1. 项目概述与核心洞察在时间序列预测这个领域&#xff0c;尤其是在处理像洛伦兹系统这样的低维混沌动力系统时&#xff0c;我们常常会陷入一个思维定式&#xff1a;模型越复杂、参数越多、计算量越大&#xff0c;预测效果就应该越好。这个想法很自然&#xff0c;毕竟深度学习在…...

教师今晚必须做的1件事:用Claude 3.5 Sonnet重写你的公开课逐字稿——实测课堂语言感染力提升58%(附对比音频+评分报告)

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Claude 3.5 Sonnet在教育内容创作中的范式跃迁 传统教育内容生产长期受限于人力密集、周期冗长与个性化不足三大瓶颈。Claude 3.5 Sonnet凭借其增强的推理深度、100K上下文窗口及显著优化的指令遵循能力&…...

8051开发中禁用自动代码分区的实践指南

1. 禁用自动代码分区的技术背景在8051架构的嵌入式开发中&#xff0c;代码分区&#xff08;Bank Switching&#xff09;是一种扩展程序存储器空间的常用技术。传统8051芯片的寻址空间有限&#xff0c;通过分区切换机制可以将代码分布到不同的物理存储区域。Keil C51开发工具链默…...

Win11桌面图标突然锁死?别慌,用这招绕过组策略编辑器直接搞定

Win11桌面图标突然锁死&#xff1f;三招绕过组策略编辑器直接解锁 刚泡好的咖啡还没喝一口&#xff0c;突然发现桌面图标全被"钉"在原地动弹不得——这种突如其来的系统抽风&#xff0c;恐怕是Windows用户最抓狂的体验之一。更糟的是&#xff0c;当你按照常规教程输入…...

【2024最严合规落地清单】:金融/医疗/政务三大强监管行业AI Agent设计红线与审计通关模板

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI Agent设计行业应用 AI Agent正从实验室原型快速演进为可部署、可编排、可审计的企业级智能体系统&#xff0c;其核心价值在于将大语言模型能力封装为具备目标导向、工具调用、记忆管理与自主决策能力…...

从纸质报表到Excel:PaddleOCR+Python自动化识别复杂表格(附完整代码)

金融表格自动化革命&#xff1a;用PaddleOCRPython实现纸质报表秒转Excel每次月末结算时&#xff0c;财务部的张经理总要面对堆积如山的纸质报表——供应商对账单、银行流水单、税务申报表&#xff0c;这些表格往往带有手写注释、合并单元格和模糊印章。传统的人工录入不仅耗时…...

毕业论文神器!2026年必备AI论文软件榜单,免费版也能写合规初稿

2026 年实测 10 款主流 AI 论文工具&#xff0c;千笔AI以全流程覆盖 语义级降重 免费查重领跑综合榜&#xff1b;ThouPen 稳坐留学生毕业全流程工具头把交椅&#xff1b;免费工具中DeepSeek Scholar、豆包学术版表现亮眼&#xff0c;30 分钟即可生成万字高质量初稿&#xff0…...

使用Python为你的数据分析脚本添加Taotoken大模型智能总结功能

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用Python为你的数据分析脚本添加Taotoken大模型智能总结功能 在数据分析工作中&#xff0c;生成图表后&#xff0c;我们常常需要…...