Ajax第三天学习笔记

1.什么是XMLHttpRequest

XMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象，
通过它,可以请求服务器上的数据资源,之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的

----能否直接使用xhr对象发起Ajax请求？
可以，稍微麻烦一点

2.使用xhr发起GET请求

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

3.XMLHttpRequest 对象的 readyState 属性
用来表示当前 Ajax 请求所处的状态。
每个 Ajax 请求必然处于以下状态中的一个：
值为4表示Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

4.tips一些知识点

1.查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

2.GET请求携带参数的本质
无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

3.浏览器提供了 URL 编码与解码的 API，分别是：
encodeURI() 编码的函数
decodeURI() 解码的函数

更多关于 URL 编码的知识，请参考如下博客：
https://blog.csdn.net/Lxd_0111/article/details/78028889

4.使用xhr发起POST请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

数据交换格式

1.数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。
其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。

2.XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。
因此，XML 和 HTML 类似，也是一种标记语言。

3.XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。
HTML 被设计用来描述网页上的内容，是网页内容的载体
XML 被设计用来传输和存储数据，是数据的载体

4.XML的缺点：
①XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
②在 Javascript 中解析 XML 比较麻烦

5.什么是JSON
概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。
简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。

作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。

现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。

6.JSON的两种结构
JSON 就是用字符串来表示 Javascript 的对象和数组。
所以，JSON 中包含对象和数组两种结构，
通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。

7.JSON的对象结构
对象结构在 JSON 中表示为 { } 括起来的内容。
数据结构为 { key: value, key: value, … } 的键值对结构。
其中，key 必须是使用英文的双引号包裹的字符串，
value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

8.JSON的数组结构：
数组结构在 JSON 中表示为 [ ] 括起来的内容。
数据结构为 [ “java”, “javascript”, 30, true … ] 。
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

9.JSON语法注意事项
①属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹
③JSON 中不允许使用单引号表示字符串
④JSON 中不能写注释
⑤JSON 的最外层必须是对象或数组格式
⑥不能使用 undefined 或函数作为 JSON 的值
JSON 的作用：在计算机与网络之间存储和传输数据。
JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

10.JSON和JS对象的关系
实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：
实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

11.序列化和反序列化
数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的12.操作，叫做 JSON 反序列化

封装自己的Ajax函数

1.处理data参数
需要把 data 对象，转化成查询字符串的格式，从而提交给服务器

/**
 * 处理 data 参数
 * @param {data} 需要发送到服务器的数据
 * @returns {string} 返回拼接好的查询字符串 name=zs&age=10
 */
function resolveData(data) {
  var arr = []
  for (var k in data) {
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}

XMLHttpRequest Level2的新特性

1.旧版XMLHttpRequest的缺点
①只支持文本数据的传输，无法用来读取和上传文件
②传送和接收数据时，没有进度信息，只能提示有没有完成

2.XMLHttpRequest Level2的新功能
①可以设置 HTTP 请求的时限
②可以使用 FormData 对象管理表单数据
③可以上传文件
④可以获得数据传输的进度信息

3.设置HTTP请求时限
xhr.timeout = 3000
xhr.ontimeout = function(event){
alert(‘请求超时！’)
}

4.FormData对象管理表单数据

—Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：

  // 1. 新建 FormData 对象
  var fd = new FormData()
  // 2. 为 FormData 添加表单项
  fd.append('uname', 'zs')
  fd.append('upwd', '123456')
  // 3. 创建 XHR 对象
  var xhr = new XMLHttpRequest()
  // 4. 指定请求类型与URL地址
  xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
  // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
  xhr.send(fd)

----FormData对象也可以用来获取网页表单的值

----新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。
①定义 UI 结构
②验证是否选择了文件
③向 FormData 中追加文件
④使用 xhr 发起上传文件的请求
⑤监听 onreadystatechange 事件