xhr、XMLHttpRequest使用

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 }

数据交换格式

概念:服务器端客户端之间进行数据传输与交换的格式

前端领域,常提及的两种数据交换格式分别是 XMLJSON,其中 XML 用的非常少,以数据交换格式 JSON为主。

xhr、XMLHttpRequest使用

 XML

概念:XML 的英文全称是 EXtensible Markup Language,即可扩展标记语言 ,XMLHTML 类似,也是一种标记语言。

xhr、XMLHttpRequest使用

XML和HTML的区别

XMLHTML 虽然都是标记语言,但是,它们两者之间没有任何的关系。

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

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

 xhr、XMLHttpRequest使用

 XML的缺点

  •  XML 格式臃肿,和数据无关的代码多,体积大,传输效率低
  • Javascript 中解析 XML 比较麻烦

JSON

概念:JSON 的英文全称是 JavaScript Object Notation,即“JavaScript 对象表示法”

简单来讲,JSON 就是 Javascript 对象和数组的字符串表示法,它使用文本表示一个 JS 对象或数组的信息,因此,

JSON 的本质是字符串

 

 作用:JSON 是一种轻量级的文本数据交换格式,在作用上类似于 XML,专门用于存储和传输数据,但

JSONXML 更小、更快、更易解析。

现状: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 对象数据或数组数据

JSONJS对象的关系

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

xhr、XMLHttpRequest使用

 

 JSONJS对象的互转

要实现从 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请求