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])