一、目标
- 能够知道如何使用XMLHttpRequest发起Ajax请求
- 能够知道如何封装自己的Ajax函数
- 能够使用XMLhttpRequest Level2中提供的新属性
- 能够知道Jquery中如何实现文件上传与loading效果
- 能够知道如何使用axios发起Ajax请求
二、目录
- XMLHttpRequest的基本使用
- 数据交换格式
- 封装自己的Ajax函数
- XMLHttpRequest Level2的新特性
- jQuery高级用法
- axios
1.XMLHttpRequest的基本使用
1.1什么XMLHttpRequest
XMLHttpRequest(简称xhr)是浏览器提供的javascript对象,通过它,可以请求服务器上的数据资源。之前所学的jquery中的Ajax函数,就是基于xhr对象封装起来的。
1.2使用xhr发起GET请求
步骤:
①创建xhr对象
②调用xhr.open()函数
③调用xhr.send()函数
④监听xhr.onreadystatechange事件
<script>
//1.创建一个XHR对象
var xhr = new XMLHttpRequest()
//2.调用open函数
xhr.open('GET', 'http//www.liulongbin.top:3006/api/getbooks')
//3.调用send函数
xhr.send()
//4.监听onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { //200并不是返回数据中的status中的200
//获取服务器响应的数据
console.log(xhr.responseText)
}
}
</script>
1.3了解xhr对象的readyState属性
XMLHttpRequest对象的readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然会处于以下状态中的一个:
值 | 状态 | 描述 |
0 | UNSENT | XMLHttpRequese对象已被创建,但尚未调用open()方法 |
1 | OPENED | open()方法已经被调用 |
2 | HEADERS_RECEIVED | send()方法已经被调用,响应头也已经被接收 |
3 | LOADING | 数据接受中,此时request属性中已经包含部分数据 |
4 | DONE | Ajax请求完成,这意味着数据传输已经彻底完成或失败 |
1.4使用xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可:
这种在URL地址后面拼接的参数,叫做查询字符串。
<script>
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)
}
}
</script>
1.5字符串查询
1.什么是查询字符串
定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)
格式:将英文的?放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用&符号进行分割。以这个形式可以将想要发送给服务器的数据添加到URL中。
2.GET请求携带参数的本质
无论使用$.ajax(),还是使用$.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的。
1.6URL编码与解码
1.什么是url编码
URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。
如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
URL编码原则的通俗理解:使用英文字符去表示非英文字符。
2.如何对URL进行编码与解码
浏览器提供了URL编码与解码的API,分别是:
- encodeURI() 编码的函数
- decodeURI()编码的函数
<script>
var str = '我是帅哥'
var str2 = encodeURI(str)
console.log(str2)
var str3 = decodeURI(str2)
console.log(str3)
</script>
3.URL编码的注意事项
由于浏览器会自动对URL地址进行编码操作,因此,大多数情况下,程序员不需要关心URL地址的编码与解码操作。
1.7使用xhr发起POST请求
步骤:
①创建xhr对象
②调用xhr.open()函数
③设置Content-Type属性(固定写法)
④调用xhr.send()函数,同时指定要发送的数据
⑤监听xhr.onreadystatechange事件
<script>
//1.创建xhr对象
var str = new XMLHttpRequest()
//2.调用open函数
xhr.open('POST', '请求地址')
//3.设置Content-Type属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//4.调用shend函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
//5.监听事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
</script>