Ajax：XMLHttpRequest

Ajax：XMLHttpRequest

    • XMLHttpRequest
      • get
      • url
      • post
    • 数据交换格式
      • XML
      • json
    • XMLHttpRequest Level 2
      • 请求时限
      • 表单数据操纵
      • 文件上传

XMLHttpRequest

XMLHttpRequest简称 xhr，是浏览器提供的 Javascript 对象，通过它可以请求服务器上的数据资源。 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。

get

使用xhr发送get请求方法如下：

  1. 创建xhr对象
  2. 调用xhr.open()方法
  3. 调用xhr.send()方法
  4. 监听xhr.onreadystatechange事件

示例：

<script>// 1. 创建 XHR 对象let xhr = new XMLHttpRequest()// 2. 调用 open 函数xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts')// 3. 调用 send 函数xhr.send()// 4. 监听 onreadystatechange 事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// 获取服务器响应的数据console.log(xhr.responseText)}}
</script>

事件监听中，包含了三个属性：

  1. xhr.readyState：xhr对象的请求状态
  2. xhr.status：是服务器的响应状态
  3. xhr.responseText：服务器响应的数据

其中readyState取值如下：

值状态含义
0UNSENTxhr对象已经创建，但是没有open
1OPENEDxhr已经调用open()
2HEADERS_RECEIVEDxhr已经调用send()，并且接收到服务器的响应头
3LOADING已经接收到部分响应报文
4DONEAjax请求完成，表示请求彻底完成或者失败

当DONE时，有可能是请求失败，此时还要检测xhr.status是否成功。

如果在发送get请求时，需要带参数，在open时直接以?key=value的形式追加到url的末尾：

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts?id=1')

url

这种以?的形式，在地址末尾进行传参，称为查询字符串。把要传递的参数以?key=value的形式追加到末尾，如果有多个参数，参数之间用&分隔：

url?key1=value1&key2=value2&key3=value3

不论是以jQuery的Ajax，还是xhr，只要发送的是get请求，都是以查询字符串的形式携带参数。

如果发送的请求中，参数包含中文：

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts?id=1&text=你好世界')

此时中文就会被进行编码：

在这里插入图片描述

可以看到，发送除去的请求，text=%....一串带有多个%的乱码，每个%后面是一个两位的十六进制数字，每三个%XX表示一个中文字符。

因为在url中，只允许出现英文字母，标点符号，数字，不允许出现中文，所以中文会被进行特殊编码。

JavaScript提供了方法encodeURI和decodeURI，可以直接进行编码和解码：

<script>let str = '你好世界'let str2 = encodeURI(str)  // 编码console.log(str2)let str3 = decodeURI(str2) // 解码console.log(str3)
</script>

输出结果：

%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C
你好世界

第一行是编码结果，第二行是解码结果。

post

使用xhr发送get请求方法如下：

  1. 创建xhr对象
  2. 调用xhr.open()方法
  3. 设置Content-Type属性
  4. 调用xhr.send()方法
  5. 监听xhr.onreadystatechange事件

示例：

<script>// 1. 创建 xhr 对象var xhr = new XMLHttpRequest()// 2. 调用 open 函数xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts')// 3. 设置 Content-Type 属性xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')// 4. 调用 send 函数xhr.send('id=1&text=你好世界')// 5. 监听事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 201) {console.log(xhr.responseText)}}
</script>

此处有两个注意点：

  1. 需要通过xhr.setRequestHeader方法设置Content-Type 属性，属性值为application/x-www-form-urlencoded
  2. 传递的参数作为send的参数，多个键值对以&隔开，不再需要?

数据交换格式

所谓数据交换格式，其实就是客户端与服务器之间，数据要以统一的格式进行组织，方便双方进行数据交互，常见的交换格式为XML和json。

XML

XML是一种是一种标记语言，语法格式与HTML非常像。

<note><to>李四</to><form>张三</form><heading>通知</heading><body>晚上开会</body>
</note>

以上就是一个XML格式的信息，表示张三给李四发送了一条通知，内容是晚上开会。可以看出，这种格式的数据语义非常明确易懂。

但是XML会有很多额外的空间浪费，比如说以上内容中，标签比数据还多，会显得很臃肿，所以其实json会使用的更多。

json

json全称JavaScript Object Notation，即JavaScript对象表示法，它是由JavaScript推出的一种数据格式化的形式，自然JavaScript本身就对其有很强的解释能力，提供了很多接口完成这样的工作。

json用字符串来表示数组和对象，通过数组与对象的嵌套，其可以表示很多复杂的数据结构。

  • {}：包含一个对象，以key: value的形式，以,分隔各个键值对
  • []：包含一个数组，以,分隔各个元素value

其中，key必须是字符串形式，而value可以指数字、字符串、布尔值、null、数组、对象六种类型。

示例：

{"name": "张三","age": 20,"gender": "男","address": null,"hobby": ["HTML", "JavaScript", "Java", null]
}

这个json最外层是一个{}，表示这是一个对象，对象有五个属性，所有属性的key都是字符串。注意，在json中，所有字符串必须以双引号表示，不能使用单引号。

属性值中20是数字，null表示是空，"张三" "男"都是字符串，而最后一个属性值嵌套了一个数组。

在数组中，无需以key: value的形式存储元素，只存储value，并且可以是六种类型之一。

[666,"hello world",["HTML", "JavaScript", "Java"],{"name": "张三","age": 18,"hobby": ["西瓜", "桃子", "哈密瓜"]}
]

以上json，最外层是一个[]，表示这是一个数组，数组无需key，所以四个元素都是单独出现的，前两个元素666和"hello world"分别是数字和字符串。第三个元素是数组内嵌套的一个数组，第四个元素是数组内嵌套的一个对象。

而在第四个元素内部，由于是对象，所以又要以key: value的形式填写数据，"hobby"则是数组嵌套对象再嵌套数组，可以一直嵌套下去。

JavaScript提供了方法，可以直接把一个符合要求的字符串转为对象。

语法：

JSON.parse("str")

示例：

let jsonStr = `
{"name": "张三","age": 20,"gender": "男","address": null,"hobby": ["HTML", "JavaScript", "Java", null]
}
`
let obj = JSON.parse(jsonStr)
console.log(obj)

此处jsonStr就是一个符合要求的字符串，通过JSON.parse(jsonStr)将其转化为对象，并输出。

输出结果：

在这里插入图片描述

得到了一个属性值和字符串描述一模一样的对象。

当然，以上的json是带有换行格式的字符串，就算把所有内容写在同一行，也可以正常解析：

let jsonStr = '{"name": "张三","age": 20,"gender": "男","address": null,"hobby": ["HTML", "JavaScript", "Java", null]}'

虽然这样json的可读性会降低，但是因为减少了换行，其实传输效率会变高。

如果已有一个对象，也可以通过方法直接转化为json字符串。

语法：

JSON.stringify(obj)

示例：

let obj = {name: "张三",age: 20,gender: "男",address: null,hobby: ["HTML", "JavaScript", "Java", null]
}let jsonStr = JSON.stringify(obj)
console.log(jsonStr)

输出结果：

在这里插入图片描述

这样就拿到了转化为json字符串格式的对象了，而且默认是不带换行的格式。

XMLHttpRequest Level 2

xhr Level 2是xhr的新版本，其提供了更加丰富的功能：

  1. 允许用户设置请求的时间限制
  2. 可以使用FormData管理表单数据
  3. 可以上传文件

请求时限

有的时候网速比较慢，用户要等待很久才能完成一个请求，此时为了避免不必要等待，可以设置请求时限，超出一定时间没有完成请求，直接失败。

其用法很简单，只需要添加一个属性即可：

xhr.timeout = 超时时限

其中时限以毫秒为单位，如果超出时限还没有获取响应，此时直接返回，并触发一个回调函数：

xhr.ontimeout = function(event){}

这个回调函数，只需要设置到ontimeout属性中即可。

表单数据操纵

为了方便表单数据的处理，新增了一个FormData对象，其可以模拟表单的操作，快速完成Ajax表单数据的发送。

流程：

  1. 创建FormData对象
  2. 为FormData对象添加表单项
  3. 创建xhr对象
  4. 在xhr.send()时，直接以FormData对象作为参数

示例：

let fd = new FormData()
fd.append('name', "张三")
fd.append('age', 18)let xhr = new XMLHttpRequest()
xhr.open('POST', '###')
xhr.send(fd)

首先 new FormData()得到一个新的对象，append方法用于添加表单项。通过xhr的open方法发送POST请求，随后send内直接把fd发送出去，而不需要考虑表单内容的字符串拼接等操作。

另外的，FormData也可以直接读取表单中的数组，而不用一个个append。

示例：

let form = document.querySelector('#form1')
form.addEventListener('submit', function (e) {e.preventDefault()let fd = new FormData(form)let xhr = new XMLHttpRequest()xhr.open('POST', '###')xhr.send(fd)
})

首先通过querySelector获取到表单的DOM对象，对表单的提交事件绑定函数。

随后在函数内部完成发送表单，先阻止默认事件，随后创建FormData对象，直接在构造时new FormData(form)，这样就把表单form的内容直接初始化到了FormData中。随后就可以通过Ajax发送出去了。

文件上传

想要通过Ajax发送文件，使用和表单相同的接口。

流程：

  1. 获取上传文件的标签的DOM对象
  2. 获取DOM对象的files属性
  3. 直接把files添加到FormData中
  4. 把FormData通过xhr发送出去

示例：

<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>

这是两个标签，input标签用于上传文件，button用于提交文件。

<script>let btnUpload = document.querySelector('#btnUpload')btnUpload.addEventListener('click', function () {let files = document.querySelector('#file1').filesif (files.length <= 0) {return alert('没有选择文件！')}let fd = new FormData()// 将用户选择的文件，添加到 FormData 中fd.append('file', files[0])let xhr = new XMLHttpRequest()xhr.open('POST', '###')xhr.send(fd)xhr.onreadystatechange = function () {// ...}})
</script>

为button绑定点击事件，在时间内部完成文件上传。首先获取到input文件上传标签document.querySelector('#file1')，在这个对象的.files属性中，包含了用户上传的文件。

这个.files是一个数组，每个数组元素代表一个用户上传的文件。如果files.length <= 0说明用户没有上传文件，直接返回。

随后新建一个FormData对象，把files[0]添加到表单对象中，也就是把用户上传的第一个文件提交上去，随后通过xhr发送给服务器。要注意的是，上传文件必须通过POST请求。

文件上传也可以通过jQuery来代替xhr完成：

$.ajax({method: 'POST',url: '###',data: fd,processData: false,contentType: false,success: function (res) {console.log(res)}
})

在jQuery发送文件时，通过data属性指定要上传的表单对象，如果表单内部的内容是文件，那么processData和contentType要设置为false。

  • processData：不修改Conten-Type属性，使用FormData默认值
  • contentType：不对数据进行编码，以原本的数据格式发送出去（防止文件格式错误）

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

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

相关文章

如何在vscode中使用鼠标滑轮滚动来改变字体大小

如何在vscode中使用鼠标滑轮滚动来改变字体大小

实现内容&#xff1a;如何在vscode中使用鼠标滑轮滚动来改变字体大小 使用场景&#xff1a;我是在Ubuntu中安装的vscode 需求&#xff1a;因为最近在用这个&#xff0c;但是在使用过程中发现vscode的字体大小有点小&#xff0c;所以想改变下 实现滚轮滑动改变字体大小的具体步…
阅读更多...
Spring Boot框架下的酒店住宿登记系统

Spring Boot框架下的酒店住宿登记系统

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…
阅读更多...
2024 7月算法刷题记录

2024 7月算法刷题记录

小米真题 手机流畅运行的秘密 时间限制&#xff1a;1.000S 空间限制&#xff1a;256MB 题目描述 8 月份发布会一结束&#xff0c;米小兔就在公司领到了一台最新发布的 Xiaomi MIX Fold 3 手机&#xff0c;这是一款小米旗舰折叠屏手机&#xff0c;并搭载了全新升级架构的 MI…
阅读更多...
Redis 线程控制 总结

Redis 线程控制 总结

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 线程控制 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 线程控制 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis &a…
阅读更多...
架构师备考-数据库设计、实施和维护

架构师备考-数据库设计、实施和维护

数据库设计 数据库设计的任务是针对一个给定的应用环境&#xff0c;在给定的硬件环境和操作系统及数据库管理系统等软件环境下&#xff0c;创建一个性能良好的数据库模式&#xff0c;建立数据库及其应用系统&#xff0c;使之能有效地存储和管理数据&#xff0c;满足各类用户的需…
阅读更多...
Node.js 模块化

Node.js 模块化

1. 介绍 1.1 什么是模块化与模块 ? 将一个复杂的程序文件依据一定规则&#xff08;规范&#xff09;拆分成多个文件的过程称之为 模块化其中拆分出的 每个文件就是一个模块 &#xff0c;模块的内部数据是私有的&#xff0c;不过模块可以暴露内部数据以便其他模块使用 1.2 什…
阅读更多...
Stable Diffusion视频插件Ebsynth Utility使用方法

Stable Diffusion视频插件Ebsynth Utility使用方法

在Stable Diffusion中安装完Ebsynth Utility后&#xff0c;就可以开始试用了。 启动Stable Diffusion后&#xff0c;出面画面&#xff1a; 1、步骤1&#xff1a;视频分帧及生成蒙板帧 填入工程目录&#xff0c;选择上传所用的视频文件&#xff1a;注意对目录命名的要求-不能有…
阅读更多...
尽管加密货币被禁，中国仍是比特币挖矿巨头！不过主导地位正在转向美国？

尽管加密货币被禁，中国仍是比特币挖矿巨头！不过主导地位正在转向美国？

尽管中国政府全面禁止了加密货币交易和挖矿活动&#xff0c;但中国依然在比特币挖矿领域保持着全球领先地位。然而&#xff0c;随着美国在该领域的快速崛起&#xff0c;中国在比特币挖矿主导地位方面正面临来自美国的强劲竞争。根据最新的市场数据和行业分析&#xff0c;中国的…
阅读更多...
华为：高级ACL 特定ip访问特定ip命令

华为：高级ACL 特定ip访问特定ip命令

网络拓扑图&#xff1a; 网络环境&#xff1a; 全网互通即可 1.创建一个名为test的高级ACL acl name test advance 2.添加规则 ##拒绝所有ip访问 rule 10 deny ip source any destination 192.168.1.10 0.0.0.0 只允许特定ip访问特定ip rule 5 permit ip source 192.168.2.10…
阅读更多...
计算机网络：网络层 —— IPv4 地址的应用规划

计算机网络：网络层 —— IPv4 地址的应用规划

文章目录 IPv4地址的应用规划定长的子网掩码变长的子网掩码 IPv4地址的应用规划 IPv4地址的应用规划是指将给定的 IPv4地址块 (或分类网络)划分成若干个更小的地址块(或子网)&#xff0c;并将这些地址块(或子网)分配给互联网中的不同网络&#xff0c;进而可以给各网络中的主机…
阅读更多...
Oracle CONNECT BY、PRIOR和START WITH关键字详解

Oracle CONNECT BY、PRIOR和START WITH关键字详解

Oracle CONNECT BY、PRIOR和START WITH关键字详解 1. 基本概念2. 数据示例3. SQL示例3.1. 查询所有员工及其上级3.2. 显示层次结构3.3. 查询特定员工的子级 4. 结论 在Oracle数据库中&#xff0c;CONNECT BY、PRIOR和START WITH关键字主要用于处理层次结构数据&#xff0c;例如…
阅读更多...
web3对象如何连接以太网络节点

web3对象如何连接以太网络节点

实例化web3对象 当我们实例化web3对象&#xff0c;我们一般开始用本地址&#xff0c;如下 import Web3 from web3 var web3 new Web3(Web3.givenProvider || ws://localhost:5173)我们要和以太网进行交互&#xff0c;所以我们要将’ws://localhost:5173’的本地地址换成以太…
阅读更多...
循序渐进丨openGauss / MogDB 数据库内存占用相关SQL

循序渐进丨openGauss / MogDB 数据库内存占用相关SQL

一、内存总体分布 数据库总体内存使用分布 select * from gs_total_memory_detail; 当dynamic_used_memory大于max_dynamic_memory就会报内存不足&#xff1b;如果此时dynamic_used_memory小于max_dynamic_memory&#xff0c;而dynamic_peak_memory大于max_dynamic_memory表…
阅读更多...
《皮革制作与环保科技》是什么级别的期刊？是正规期刊吗？能评职称吗？

《皮革制作与环保科技》是什么级别的期刊？是正规期刊吗？能评职称吗？

​问题解答 问&#xff1a;《皮革制作与环保科技》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《皮革制作与环保科技》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;中国轻工业联合会 …
阅读更多...
【书籍推荐】使用 MATLAB 算法进行合成孔径雷达信号处理【附MATLAB代码】

【书籍推荐】使用 MATLAB 算法进行合成孔径雷达信号处理【附MATLAB代码】

简介 介绍了合成孔径雷达 &#xff08;SAR&#xff09; 波前重建信号理论及其数字实现的最新分析。随着快速计算和数字信息处理技术的出现&#xff0c;SAR 技术变得更加强大和准确。使用 MATLAB 算法进行合成孔径雷达信号处理解决了这些最新发展问题&#xff0c;提供了对 SAR …
阅读更多...
【随手笔记】远程升级之如何平衡下载包大小与速率？

【随手笔记】远程升级之如何平衡下载包大小与速率？

1. 远程升级基本信息 使用NB_BC26模组&#xff0c;通过AT指令使用TCP的协议与公司后台交互升级的固件为BIN文件&#xff0c;使用原始固件包升级&#xff0c;未使用差分方式原始固件包有110K,大小左右&#xff0c;固件的存储为外置的FLASH W25Q16,w25q16最小存储单位为页&#…
阅读更多...
git命令笔记（速查速查）

git命令笔记（速查速查）

git命令功能总结 1.创建git的本地仓库2. 配置本地仓库(name和email地址)3. 工作区、版本库、暂存区、对象区3.1 add, commit3.2 打印提交日志3.2 修改文件 4.版本回退&#xff08;git reset&#xff09;5. 撤销修改&#xff08;在push之前撤销&#xff09;6.删除版本库中的文件…
阅读更多...
C++——string的模拟实现（上）

C++——string的模拟实现（上）

目录 引言 成员变量 1.基本框架 成员函数 1.构造函数和析构函数 2.拷贝构造函数 3.容量操作函数 3.1 有效长度和容量大小 3.2 容量操作 3.3 访问操作 (1)operator[]函数 (2)iterator迭代器 3.4 修改操作 (1)push_back()和append() (2)operator函数 引言 在 C—…
阅读更多...
微信小程序版本更新管理——实现自动更新

微信小程序版本更新管理——实现自动更新

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…
阅读更多...
查找总价格为目标值的两个商品----双指针算法

查找总价格为目标值的两个商品----双指针算法

一&#xff1a;题目描述 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 二&#xff1a;算法原理 三&#xff1a;代码编写 vector<int> twoSum(vector<int>& price, int target) {vector<int> ret;int left 0, right price.size()-…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023