1、XMLHttpRequest对象（xhr）：浏览器提供的JS对象，可以请求服务器上的数据。
2、使用xhr发送get请求
（1）创建xhr对象：一个请求的主体
（2）调用xhr.open()函数，参数分别为：请求类型和请求地址
（3）调用send()，发起请求
（4）监听事件：onreadystatechange（请求状态被改变时）
- 请求状态：readyState(4)
- 响应状态：status(200)
var xhr = new XMLHttpRequest()
xhr.open(请求类型, URL地址)
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
}
3、xhr对象的readyState属性：当前Ajax请求所处的状态
| 0 | UNSENT | XMLHttpRequest对象已被创建，但未调用open方法 |
|---|---|---|
| 1 | OPENED | open方法已调用 |
| 2 | HEADERS_RECEIVED | send方法已调用，响应头已经被接收 |
| 3 | LOADING | 数据接受中，此时response属性中已经包含部分数据 |
| 4 | DONE | Ajax请求完成，数据已经彻底完成或失败 |
4、使用xhr对象发起带参数的get请求
（1）为URL地指定参数即可，URL拼接到后面的参数被称为“查询字符串”
（2）查询字符串参数的格式为：在URL之后添加问号（?），参数以键值对方式存在（name=zs），多个参数键值对之间使用&符号进行分隔（name=zs&age=18）
（3）get请求方式的本质，需要携带参数时，都是以查询字符串的方式提交参数
var xhr = new XMLHttpRequest()
xhr.open('get', '请求路径?id=1')
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
}
5、URL编码（URL只包括英文字母、符号、数字）
（1）中文需要编码（转义）
（2）编码原则：使用安全字符(英文字符等)表示不安全字符(中文等)，中文字符使用英文字符表示的话是三组%
（3）对URL编码与解码
-
编码：encodeURI(要编码的内容)
-
解码：decodeURI(要解码的内容)
-
浏览器会自己对中文进行编码和解码
var str = '床前明月光'
str1 = encodeURI(str)
console.log(str1) // %E5%BA%8A%E5%89%8D%E6%98%8E%E6%9C%88%E5%85%89
str2 = decodeURI(str1)
console.log(str2) // 床前明月光
6、使用xhr发起post请求
（1）创建xhr对象
（2）调用open()函数，指定请求方式和URL地址
（3）调用setRequestheader()，设置Content-Type属性（固定写法，必须写在open之后）
（4）xhr.send()，指定要发送的数据
var xhr = new XMLHttpRequest()
xhr.open('post', '请求路径')
xhr.setRequestheader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('数据=值&数据=值)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
}
7、数据交换格式
服务器端返回的数据格式是字符串，为了更好的提取返回的信息，返回的字符串有一些特定的格式：XML、JSON
- XML：标签格式
- JSON：像数组、对象的格式
8、XML可扩展的标记语言
HTML和XML没有关系
HTML是网页内容的载体，XML是用来传输数据的，是数据的载体
<note>
<to>ls</to>
<from>zs</from>
<heading>通知</heading>
<body>开会</body>
</note>
-
XML缺点：格式臃肿，和数据无关代码多，传输效率低；在JS中解析XML比较麻烦
9、JSON（本质是字符串，是一种具有对象或者数组格式的字符串，也是一种轻量级的文本数据交换格式，更小更快更易解析）
（1）JSON的两种结构：
数组&字符串(key必须用英文双印包裹，value只有数字、字符串、布尔值、null、数组、对象6种类型)；数组取值也只有这6种类型
（2）JSON语法注意事项
属性名必须使用双引号包裹；字符串都必须使用双引号；JSON中不能写注释；JSON最外层必须是数组或对象格式；JSON中不允许有undefined和函数等数据
（3）（序列化）JSON字符串转化为JS对象：JSON.parse(json字符串)
var str = '{"a": "hello", "b": "world"}'
console.log(JSON.parse(str)) // {a: "hello", b: "world"}
（4）（反序列化）JSON对象转化为JSON字符串：JSON.stringify(js对象)
var str = {a: "hello", b: "world"}
console.log(JSON.stringify(str)) // {"a":"hello","b":"world"}
10、自己封装简易Ajax
function ajax(options) {
var xhr = new XMLHttpRequest()
var qs = resolveData(options.data)
if (options.method.toUpperCase() === 'GET') {
xhr.open(options.method, options.url + (options.data ? '' : '?' + qs))
xhr.send()
} else if (options.method.toUpperCase() === 'POST') {
xhr.open(options.method, options.url)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(qs)
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText)
options.success(result)
}
}
}
function resolveData(data) {
var arr = []
for (let k in data) {
arr.push(k + '=' + data[k])
}
return arr.join('&')
}
11、XMLHttpRequest Level2
（1）新功能：可以设置HTTP请求时限；可使用FormData对象管理表单数据；可以上传文件；可以获取数据传输的进度信息
（2）设置http请求时限（timeout属性）
// 设置请求时限为3000毫秒，如果超过3000毫秒，默认请求失败
xhr.timeout = 3000
// 请求超时后，会触发超时回调函数，告诉用户请求超时
xhr.ontimeout = function(event) {
alert('请求超时了')
}
（2）FormData对象管理表单数据
// post请求
// 创建FormData实例
var fd = new FormData()
// 向FormData中手动追加数据
fd.append('name', 'zs')
fd.append('age', '20')
// ……(发送请求的准备工作)
// 发送请求传数据直接传入fd
xhr.send(fd)
/** 直接获取表单数据 */
var fd = new FormData(form表单的DOM元素)
xhr.send(fd)
var fd = new FormData()
// 向fd中添加数据
fd.append('name', 'zs')
// fd.get(数据名) 获取表单fd中对应的值
console.log(fd.get('name')) // zs
// 给一个键值对添加多个值
fd.append('name', 'ls')
// fd中一个数据有多个值时，fd.get(数据名)获取到第一个值
console.log(fd.get('name')) // zs
// fd中获取同一个数据的多个值时：fd.getAll(数据名)
console.log(fd.getAll('name')) // ['zs', 'ls']
// 使用set可重置fd中对应数据的值
fd.set('name', 'ww')
console.log(fd.get('name')) // ww
// 删除fd中某个元素
fd.delete('name')
console.log(fd.get('name')) // null
（3）上传文件功能：
定义UI结构；
验证是否选择了文件；
向FormData中追加文件；
使用xhr进行上传文件请求；
监听onreadystatechange
- 获取表单提交的文件：dom.files，如果有文件选中，则长度不为0
（4）显示文件上传进度：监听xhr.upload.onprogress事件
e.lengthComputable 若为true，才可计算长度
e.loaded 已经传输的字符
e.total 需传输的总字节
传输进度 = Math.ceil(e.loaded / e.total * 100) + '%'
（5）jquery实现文件上传
上传文件时必须要设置两个参数：
// 是否转化为查询字符串 processData: false, // 发送到服务器端的数据类型 contentType: false,
可用ajaxStart和ajaxStop设置加载效果
ajaxStart()：请求开始时运行的函数（只能被$(document)调用）
ajaxStop()：请求完成时运行的函数（只能被$(document)调用）
也可用beforeSend和complete代替，更好用
12、axios：网络数据请求，比jquery更轻量，只专注于网络请求
（1）axios发起get请求
axios.get('url', { params: { /*参数*/ } }).then(callback)
（2）axios发起post请求
axios.post('url', { data: { /*参数*/ } }).then(callback)
（3）直接使用axios发送请求
axios({
method: 请求方式,
url: 请求的URL地址,
data: 请求发送的数据
}).then(function(res) {
/* 数据处理 */
})
网友评论