网络-Ajax


文章目录

  • 前言
  • 一、Ajax
    • 优点:
    • 缺点:
  • 二、使用步骤
    • XNLHttpRequest对象
    • 完整代码
  • 总结


前言

本文主要记录Ajax技术的简介,以及用法。


一、Ajax

Ajax是一组用于在Web浏览器和Web服务器之间进行异步通信的Web开发技术。
它代表着Asynchronous JavaScript and XML(异步JavaScript和XML),尽管XML并不总是作为数据格式使用。
通过Ajax,Web应用程序可以在不重新加载整个页面的情况下更新页面的部分内容。这样可以实现更加交互和响应式的用户体验。
Ajax使用JavaScript发送请求到服务器并异步处理响应,而不会阻塞用户界面。
可以通过 JavaScript 和XNLHttpRequest对象来向服务器请求数据

Ajax可以用于执行各种任务,例如从服务器检索数据、提交表单数据和动态更新内容。
它通常用于现代Web应用程序中,用于创建自动完成搜索框、实时更新和无限滚动等交互功能。

优点:

  • 提高用户体验:通过减少页面重载和刷新,使得网站变得更加灵活和动态
  • 减轻服务器负载:可以有效减少服务器接收到的请求次数和需要响应的数据量,从而减轻服务器负担
  • 提高响应速度:可以异步获取数据并更新页面,从而提高响应速度
  • 增加交互:使页面变得可交互性

缺点:

  • 对搜索引擎优化(SEO)不友好,爬虫无法抓取Ajax中的内容与URL ===>考虑用SSR服务端渲染技术
  • 需要考虑安全性问题,数据和网络安全需要采取对应的措施

二、使用步骤

XNLHttpRequest对象

  • 创建对象xhr:
const xhr = new XMLHttpRequest()
  • open方法:接收三个参数分别是 请求方式、请求地址、是否异步:默认为true
 xhr.open('post','http://localhost:3000/api/post',true)
  • setRequestHeader方法:用于为请求的HTTP头设置值。
setRequestHeader("header", "value")
  • onreadystatechange方法:监听服务端返回的数据
xhr.onreadystatechange = () =>{console.log(xhr)if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}

onreadystatechange

  • readyState属性:
    • 0:未初始化,XNLHttpRequest已经创建,但未调用open方法
    • 1:已打开,open方法已调用,send方法未调用
    • 2:已发送,send方法已调用,服务端接收到请求
    • 3:正在接收,服务器正在处理请求并返回数据
    • 4:完成,服务端已完成数据传输
  • status属性: 200成功 400参数错误 403没有权限 401token找不到 404未找到 500服务器错误
  • send方法:给服务端发送的数据
xhr.send(JSON.stringify({name:'smz'}))

send

  • abort方法:用于停止或放弃当前异步请求。必须在open方法后,无法恢复。
stop.addEventListener('click',()=>{xhr.abort()})
  • getResponseHeader方法:用于以字符串形式返回指定的HTTP头信息。
getResponseHeader("headerLabel")
  • getAllResponseHeaders方法:用于以字符串形式返回完整的HTTP头信息。
 getAllResponseHeaders()

获取请求头

  • 监听进度:

    给xhr对象添加一个progress事件,返回event

    event.loaded:当前进度
    event.total:总进度

 xhr.addEventListener('progress',(event)=>{console.log(event.loaded,event.total)})

进度
进度

  • 设置超时:xhr.timeout = 3000

  • 超时回调:监听timeout事件

 xhr.addEventListener('timeout',()=>{alert('请求超时')})

超时

  • 中断回调:监听abort事件
 xhr.addEventListener('abort',()=>{console.log('请求中断')})
  • 监听load事件:也可以监听请求是否成功,就不用判断readyState的值
 xhr.addEventListener('load',()=>{if (xhr.status === 200){console.log('请求成功,触发onload')}})

请求成功

  • post请求:请求参数要放在send()中

完整代码

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><button id="send">发送请求</button><button id="stop">中断请求</button><div>进度条<span id="progress"></span></div><input id="file" type="file">
</div>
</body>
<script>let btn = document.getElementById('send')let file = document.getElementById('file')btn.addEventListener('click',()=>{sendAjax()})//上传文件file.addEventListener('change',()=>{const formData = new FormData()formData.append('file',file.files[0]) // key值对应后端 upload.single('file')const xhr = new XMLHttpRequest()xhr.open('post','http://localhost:3000/api/upload',true)xhr.onreadystatechange = () =>{console.log(xhr)if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}xhr.send(formData)})const sendAjax = () =>{const xhr = new XMLHttpRequest()// 三个参数,请求方式、请求地址、是否异步:默认为true//get// xhr.open('get','http://localhost:3000/api/txt?name=smz',true)//postxhr.open('post','http://localhost:3000/api/post',true)//设置请求头xhr.setRequestHeader('Content-Type','application/json')//设置超时xhr.timeout = 30000//超时回调xhr.addEventListener('timeout',()=>{alert('请求超时')})// 监听服务端返回的数据xhr.onreadystatechange = () =>{if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}//监听进度xhr.addEventListener('progress',(event)=>{const progress = document.getElementById('progress')progress.innerText = `${(event.loaded/event.total*100).toFixed(2)}%`console.log(event.loaded,event.total)//响应头console.log(xhr.getAllResponseHeaders())console.log(xhr.getResponseHeader('content-type'))})//中断请求let stop = document.getElementById('stop')stop.addEventListener('click',()=>{xhr.abort()})//监听中断xhr.addEventListener('abort',()=>{console.log('请求中断')})//监听请求成功xhr.addEventListener('load',()=>{if (xhr.status === 200){console.log('请求成功,触发onload')}})// 给服务端发送的数据// xhr.send(null)//postxhr.send(JSON.stringify({name:'smz'}))}</script>
</html>

后端代码:这里用的node

const express = require('express')
const app = express()
const multer = require('multer')const single = multer.diskStorage({destination: (req, file, cb) => {cb(null, './upload')},filename: (req, file, cb) => {cb(null, Date.now() + file.originalname)}
})
const upload = multer({single
})app.get('/api/txt',(req,res)=>{res.setHeader('Access-Control-Allow-Origin','*')const {name} = req.query // 函数名let text = ''for(let i=0;i<10000;i++){text += `${name}Ajax`}res.send( text)
})app.use(express.json())
app.use(express.urlencoded({extended:true}))
// post请求
app.post('/api/post',(req,res)=>{res.setHeader('Access-Control-Allow-Origin','*')console.log(req.body)res.json({code:200,data:{name: req.body.name}})
})
// 预检请求放行
app.options('/api/*', (req,res) => {res.setHeader("Access-Control-Allow-Origin","*")res.setHeader("Access-Control-Allow-Headers", "*");res.end()
})//传文件
app.post('/api/upload',upload.single('file'),(req,res)=>{console.log(req.file)res.setHeader('Access-Control-Allow-Origin','*')res.json({code:200})
})app.listen(3000,()=>{console.log('server is running')
})

总结

axios第三方库对Ajax做了一些封装,本文主要记录了Ajax的介绍与使用。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PS 切片工具 选择切片 切片存储

上文 PS 透视裁剪工具 中 我们简单讲述了透视裁剪工具 今天 我们来讲他后面的切片工具 首先 他的用途还是很多的 例如 你有一个很大的图片 其中包括 轮播 导航 主题内容 但他们都在一个图片上 你就可以用切片工具 将完整的图片切成多个部分 这里 我们选择了切片工具 光标也会…

leetcode-----二叉树习题

目录 前言 1. 二叉树的中序遍历 2. 相同的树 3. 二叉树的最大深度 4. 二叉树的最小深度 5.二叉树的前序遍历 6. 二叉树的后序遍历 7. 对称二叉树 前言 前面我们学习过了二叉树的相关知识点&#xff0c;那么今天我们就做做练习&#xff0c;下面我会介绍几道关于二叉树的…

大数据Flink(九十三):DML:Order By、Limit 子句

文章目录 DML:Order By、Limit 子句 一、Order By 子句

idea Springboot 校园助学贷款系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 校园助学贷款系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统 具有完整的源代码和数据库&…

ASUS华硕天选4笔记本电脑FX507VV原厂Windows11系统

下载链接&#xff1a;https://pan.baidu.com/s/1W9tedHI3iFjaHju5eLkQ6g?pwd8dl2 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、华硕电脑管家、奥创控制中心等预装程序 由于时间关系,绝大部分资料没有上传&#xff0c;不是想要的型号&#xff0c;请联系客服获取。

嵌入式Linux应用开发-第十四章查询方式的按键驱动程序

嵌入式Linux应用开发-第十四章查询方式的按键驱动程序 第十四章 查询方式的按键驱动程序_编写框架14.1 LED驱动回顾14.2 按键驱动编写思路14.3 编程&#xff1a;先写框架14.3.1 把按键的操作抽象出一个button_operations结构体14.3.2 驱动程序的上层&#xff1a;file_operation…

竞赛选题 大数据商城人流数据分析与可视化 - python 大数据分析

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于大数据的基站数据分析与可视化 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度…

优化 Node.js 性能:检测内存泄漏和高 CPU 使用率

优化 Node.js 性能&#xff1a;检测内存泄漏和高 CPU 使用率 Node.js 是一种流行的 JavaScript 运行时&#xff0c;以其速度、性能和可扩展性而闻名。然而&#xff0c;即使是优化和编写得非常好的 Node.js 应用程序也可能会遇到性能问题&#xff0c;例如内存泄漏和 CPU 使用率…

yolov8 opencv模型部署(C++版)

yolov8 opencv模型部署&#xff08;C 版&#xff09; 使用opencv推理yolov8模型&#xff0c;仅依赖opencv&#xff0c;无需其他库&#xff0c;以yolov8s为例子&#xff0c;注意&#xff1a; 使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#…

Python函数语法与面向对象回顾(精华)

目录 函数 语法定义 返回值 位置参数 关键字传递 默认参数 函数参数中 / 作用 lambda表达式 递归函数 面向对象 初识对象 继承 构造函数 ​编辑 多态 "私有属性" 动态 类方法和静态方法 函数 语法定义 pyhon的函数定义语法是 def 函数名(参数…

基于SpringBoot的师生共评的作业管理系统设计与实现

目录 前言 一、技术栈 二、系统功能介绍 课程管理 作业管理 作业互评 小组管理 作业管理 作业评分 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个…

蓝桥等考Python组别十级003

第一部分&#xff1a;选择题 1、Python L10 &#xff08;15分&#xff09; 已知s Pencil&#xff0c;下列说法正确的是&#xff08; &#xff09;。 s[0]对应的字符是Ps[1]对应的字符是ns[-1]对应的字符是is[3]对应的字符是e 正确答案&#xff1a;A 2、Python L10 &am…

【GDB】 command 命令

GDB command 命令 语法 command 命令是一个很好用的调试命令&#xff0c;它配合断点使用&#xff0c;可以在指定的断点执行预先设置的命令 其语法为&#xff1a;command bread_id&#xff0c;这样会提示你输入你要执行的命令&#xff0c;以 end 结束。这个 bread_id 就是用 …

【Axure】Axure的常用功能

选择 分为相交选中和包含选中 相交选中&#xff1a;部分选中即是选中包含选中&#xff1a;全选才是选中 缩放 按住元件四角&#xff0c;等比例缩放 置顶和置底 所谓置于顶层就是不被后来的元件覆盖住&#xff0c;置于底层的意思则相反 组合、对齐、分布 组合&#xff1…

Java安全之servlet内存马分析

目录 前言 什么是中间键 了解jsp的本质 理解servlet运行机制 servlet的生命周期 Tomcat总体架构 查看Context 的源码 servlet内存马实现 参考 前言 php和jsp一句话马我想大家都知道&#xff0c;早先就听小伙伴说过一句话木马已经过时了&#xff0c;现在是内存马的天下…

Spring MVC 十:异常处理

异常是每一个应用必须要处理的问题。 Spring MVC项目&#xff0c;如果不做任何的异常处理的话&#xff0c;发生异常后&#xff0c;异常堆栈信息会直接抛出到页面。 比如&#xff0c;我们在Controller写一个异常&#xff1a; GetMapping(value"/hello",produces{&qu…

搭建前端框架

在终端进入web目录&#xff0c;然后创建vuecrud工程 创建工程并引入ElementUI和axios手把手教学>传送门:VueCLI脚手架搭建

2023.09.30使用golang1.18编译Hel10-Web/Databasetools的windows版

#Go 1.21新增的 log/slog 完美解决了以上问题&#xff0c;并且带来了很多其他很实用的特性。 本次编译不使用log/slog 包 su - echo $GOPATH ;echo $GOROOT; cd /tmp; busybox wget --no-check-certificate https://go.dev/dl/go1.18.linux-amd64.tar.gz;\ which tar&&am…

驱动插入中断门示例代码

驱动插入中断描述符示例代码 最近做实验&#xff0c;每次在应用层代码写测试代码的时候都要手动挂一个中断描述符&#xff0c;很不方便所以就想着写个驱动挂一个中断门比较省事 驱动测试效果如下&#xff1a; 下面的代码是个架子&#xff0c;用的时候找个驱动历程传递你要插…

搭建智能桥梁,Amazon CodeWhisperer助您轻松编程

零&#xff1a;前言 随着时间的推移&#xff0c;人工智能技术以惊人的速度向前发展&#xff0c;正掀起着全新的编程范式革命。不仅仅局限于代码生成&#xff0c;智能编程助手等创新应用也进一步提升了开发效率和代码质量&#xff0c;极大地推动着软件开发领域的快速繁荣。 当前…