xhr、XMLHttpRequest使用

2024-01-18 09:12:46

XMLHttpRequest

概念：XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源

    jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的

xhr、XMLHttpRequest使用

使用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、XMLHttpRequest使用

使用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 地址的后面，发送到服务器的。

xhr、XMLHttpRequest使用

 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为主。

xhr、XMLHttpRequest使用

 XML

概念：XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言 ，XML 和 HTML 类似，也是一种标记语言。

xhr、XMLHttpRequest使用

XML和HTML的区别

XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。

  • HTML 被设计用来描述网页上的内容，是网页内容的载体

  • XML 被设计用来传输和存储数据，是数据的载体

 xhr、XMLHttpRequest使用

 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种类型。

 xhr、XMLHttpRequest使用

 

 数组结构

数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。

数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

xhr、XMLHttpRequest使用

 

 JSON语法注意事项

① 属性名必须使用双引号包裹

② 字符串类型的值必须使用双引号包裹

③ JSON 中不允许使用单引号表示字符串

④ JSON 中不能写注释

⑤ JSON 的最外层必须是对象或数组格式

⑥ 不能使用 undefined 或函数作为 JSON 的值

JSON 的作用：在计算机与网络之间存储和传输数据。

JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

JSON和JS对象的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。例如：

xhr、XMLHttpRequest使用

 

 JSON和JS对象的互转

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：

 xhr、XMLHttpRequest使用

 

要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

xhr、XMLHttpRequest使用

 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请求时限

 

 

 

 

 

 

 

 

 

上一篇：FormData对象


下一篇：原生js中的ajax请求