day03.ajax

1.正则 replace 函数用法

例子:

'dasdawdqdac'.replace(/[a]/,()=>{
​
return 'h'                   //
​
})       //dhsdawdqdac

函数中可以跟参数

(a,b,c,d)=>{

}

第一个值 a:匹配到的内容

第二个值 b:分组中的内容

第三个值 c:匹配到的内容在字符串中的索引号

第四个值: d:原字符串

3.XMLHttpRequest

3.1使用xhr发送GET请求

1.创建XHR对象

2.调用open()函数

3.调用send()函数

4.监听onreadystatechange()事件

if(xhr.readyState===4&&xhr.status===200){   //反应成功
  console.log(responseText) 
  }  

readyState属性

值	状态	描述
0	UNSENT	XHL对象已创建,未调用open方法
1	OPENED	open()方法已调用
2	HEADERS_RECEIVED	send()方法已被调用
3	LOADING	数据接收中,此时response属性中已经包含部分数据
4	DONE	Ajax请求已完成,要么失败要么成功

查询字符串的方式携带参数

例子

    var xhr = new XMLHttpRequest()
​
       xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
​
        xhr.send()
​
        xhr.onreadystatechange = function () {
​
           if (xhr.readyState === 4 && xhr.status === 200) {
​
                console.log(xhr.responseText);
​
           }
​
        }

浏览器自带的url编码解码API(了解)

decodeURL()

encodeURL()

使用xhr发送GET请求

1.创建XHR对象

2.调用open()函数

3.设置Content-Type属性

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

3.调用send()函数

4.监听onreadystatechange()事件

数据交换格式

服务器与客户端之间传输数据与交换的格式

XML

用来存储和传输数据的,标记语言

缺点:格式臃肿,js中解析较为麻烦

JSON

JavaScript Object Notation js对象的字符串表示方法

本质:字符串

一种轻量级的数据交换格式

体积小,快,容易解析

JSON的两种结构

1.对象结构

2.数组结构

里面的值不能是undefined和函数,字符串只能用双引号"",对象的键用""包起来

var json = '{"name":"ste"}'

JSON字符串和JS对象之间的转换

JSON.parse() 反序列化

JSON.stringify() 序列化

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

1.为什么要将js转化为JSON

进行数据传输

2.为什么额要将JSON转化为js格式的数组或对象

方便操作

XMLHttpRequest Level2

旧版缺点

只支持文本数据的传输，无法用来读取和上传文件传送和接收数据时，没有进度信息，只能提示有没有完成

新功能

1.可以设置HTTP请求时限

2.可以使用FormData对象管理表单数据

3.可以上传文件

4.可以获得数据传输的进度信息

1.设置HTTP请求时限

timeout属性

xhr.timeout=3000 //超时3s

超过时限回调函数

ontimeout

xhr.ontimeout = function (){
  alert('请求超时')
}

2.FormData对象管理表单数据

1.新建FormData()

var fd = new FormData

2.调用append函数,向fd中添加值

fd.append('uname','zs')

FormData直接获取网页表单的值

FormData 对象也可以用来获取网页表单的值，示例代码如下：表单操作：

// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault()
// 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', 'url')
xhr.send(fd)
xhr.onreadystatechange = function() {}
})

上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。实现步骤：① 定义 UI 结构② 验证是否选择了文件③ 向 FormData 中追加文件④ 使用 xhr 发起上传文件的请求⑤ 监听 onreadystatechange 事件通过文件表单对象中的files属性的files.length可以判断是否上传文件

向FormData中追加files[0]

例如:

// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0])