xhr、XMLHttpRequest使用
2021/10/21 23:39:37
本文主要是介绍xhr、XMLHttpRequest使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
XMLHttpRequest
概念:XMLHttpRequest
(简称 xhr
)是浏览器提供的 Javascript
对象,通过它,可以请求服务器上的数据资源
jQuery
中的 Ajax 函数,就是基于 xhr
对象封装出来的
使用xhr
发起GET请求
- 创建
xhr
对象 -
调用
xhr.open()
函数 -
调用
xhr.send()
函数 -
监听
xhr.onreadystatechange
事件
1 // 1. 创建 XHR 对象 2 var xhr = new XMLHttpRequest() 3 // 2. 调用 open 函数 4 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') 5 // 3. 调用 send 函数 6 xhr.send() 7 // 4. 监听 onreadystatechange 事件 8 xhr.onreadystatechange = function () { 9 if (xhr.readyState === 4 && xhr.status === 200) { 10 // 获取服务器响应的数据 11 console.log(xhr.responseText) 12 } 13 }
xhr
对象的readyState
属性
XMLHttpRequest
对象的 readyState
属性,用来表示当前 Ajax
请求所处的状态
每个 Ajax
请求必然处于以下状态中的一个:
使用xhr
发起带参数的GET请求
使用 xhr
对象发起带参数的 GET
请求时,只需在调用 xhr.open
期间,为 URL
地址指定参数即可
1 var xhr = new XMLHttpRequest() 2 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1') 3 xhr.send() 4 xhr.onreadystatechange = function () { 5 if (xhr.readyState === 4 && xhr.status === 200) { 6 console.log(xhr.responseText) 7 } 8 }
这种在 URL 地址后面拼接的参数,叫做查询字符串。
查询字符串
概念:查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量
格式:将英文的 ? 放在URL
的末尾,然后再加上 参数=值 ,想加上多个参数的话,使用 & 符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到 URL
中。
GET请求携带参数的本质:都是直接将参数以查询字符串的形式,追加到 URL 地址的后面,发送到服务器的。
URL编码与解码
编码:URL
地址中,只允许出现英文相关的字母、标点符号、数字,因此,在 URL
地址中不允许出现中文字符。如果 URL 中需要包含中文这样的字符,则必须对中文字符进行编码(转义)
URL编码原则的通俗理解:使用英文字符去表示非英文字符
对URL进行编码与解码
-
encodeURI()
编码的函数 -
decodeURI()
解码的函数
1 encodeURI('程序员') 2 decodeURI('%E9%A9%AC') 3 //输出字符 程序员
浏览器会自动对 URL 地址进行编码操作,因此,大多数情况下,程序员不需要关心 URL 地址的编码与解码操作
使用xhr
发起POST
请求
步骤
-
创建
xhr
对象 -
调用
xhr.open()
函数 -
设置 Content-Type 属性(固定写法)
-
调用
xhr.send()
函数,同时指定要发送的数据 -
监听
xhr.onreadystatechange
事件
1 // 1. 创建 xhr 对象 2 var xhr = new XMLHttpRequest() 3 // 2. 调用 open 函数 4 xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook') 5 // 3. 设置 Content-Type 属性(固定写法) 6 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 7 // 4. 调用 send 函数 8 xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社') 9 // 5. 监听事件 10 xhr.onreadystatechange = function () { 11 if (xhr.readyState === 4 && xhr.status === 200) { 12 console.log(xhr.responseText) 13 } 14 }
数据交换格式
概念:服务器端与客户端之间进行数据传输与交换的格式
前端领域,常提及的两种数据交换格式分别是 XML
和 JSON,
其中 XML
用的非常少,以数据交换格式 JSON为主。
XML
概念:XML
的英文全称是 EXtensible Markup Language
,即可扩展标记语言 ,XML
和 HTML
类似,也是一种标记语言。
XML和HTML的区别
XML
和 HTML
虽然都是标记语言,但是,它们两者之间没有任何的关系。
-
HTML
被设计用来描述网页上的内容,是网页内容的载体 -
XML
被设计用来传输和存储数据,是数据的载体
XML的缺点
-
XML
格式臃肿,和数据无关的代码多,体积大,传输效率低 -
在
Javascript
中解析XML
比较麻烦
JSON
概念:JSON
的英文全称是 JavaScript Object Notation
,即“JavaScript 对象表示法”
简单来讲,JSON
就是 Javascript
对象和数组的字符串表示法,它使用文本表示一个 JS
对象或数组的信息,因此,
JSON
的本质是字符串。
作用:JSON
是一种轻量级的文本数据交换格式,在作用上类似于 XML
,专门用于存储和传输数据,但
是 JSON
比 XML
更小、更快、更易解析。
现状:JSON
是在 2001 年开始被推广和使用的数据格式,到现今为止,JSON
已经成为了主流的数据交
换格式
JSON
的两种结构
对象结构
对象结构在 JSON
中表示为 { }
括起来的内容。数据结构为 { key: value, key: value, … }
的键值对结构。其中,key
必须是使用英文的双引号包裹的字符串,value
的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
数组结构
数组结构在 JSON
中表示为 [ ]
括起来的内容。数据结构为 [ "java", "javascript", 30, true … ]
。
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
JSON
语法注意事项
① 属性名必须使用双引号包裹
② 字符串类型的值必须使用双引号包裹
③ JSON
中不允许使用单引号表示字符串
④ JSON
中不能写注释
⑤ JSON
的最外层必须是对象或数组格式
⑥ 不能使用 undefined
或函数作为 JSON
的值
JSON
的作用:在计算机与网络之间存储和传输数据。
JSON
的本质:用字符串来表示 Javascript
对象数据或数组数据
JSON
和JS
对象的关系
JSON
是 JS
对象的字符串表示法,它使用文本表示一个 JS
对象的信息,本质是一个字符串。例如:
JSON
和JS
对象的互转
要实现从 JSON
字符串转换为 JS
对象,使用 JSON.parse()
方法:
要实现从 JS
对象转换为 JSON
字符串,使用 JSON.stringify()
方法:
1 var xhr = new XMLHttpRequest() 2 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') 3 xhr.send() 4 xhr.onreadystatechange = function () { 5 if (xhr.readyState === 4 && xhr.status === 200) { 6 console.log(xhr.responseText) 7 console.log(typeof xhr.responseText) 8 var result = JSON.parse(xhr.responseText) 9 console.log(result) 10 } 11 }
序列化和反序列化
把数据对象 转换为 字符串的过程,叫做序列化,例如:调用 JSON.stringify()
函数的操作,叫做 JSON
序列化。
把字符串 转换为 数据对象的过程,叫做反序列化,例如:调用 JSON.parse()
函数的操作,叫做 JSON
反序列化。
XMLHttpRequest Level2
的新特性
旧版XMLHttpRequest
的缺点
-
只支持文本数据的传输,无法用来读取和上传文件
-
传送和接收数据时,没有进度信息,只能提示有没有完成
XMLHttpRequest Level2
的新功能
-
可以设置 HTTP 请求的时限
-
可以使用
FormData
对象管理表单数据 -
可以上传文件
-
可以获得数据传输的进度信息
设置HTTP
请求时限
这篇关于xhr、XMLHttpRequest使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-16XMLHTTPRequest项目实战入门教程
- 2024-11-14XMLHTTPRequest教程:初学者必备指南
- 2024-10-10XMLHTTPRequest项目实战:从入门到上手
- 2024-02-26lxml not found please install it
- 2022-09-16使用Druid数据源-开启监控-xml的方式-配置类的方式
- 2022-09-08IDEA中pom.xml配置文件依赖文件版本号报红的最有效解决办法
- 2022-09-05如何更换项目中web.xml的版本
- 2022-09-02使用dom4j xml解析文件数据
- 2022-08-24可扩展标记语言——XML
- 2022-08-23mybatis 配置文件mybatis.xml的加载过程