AJAX:
Ajax是浏览器中的技术;用来实现客户端网页请求服务器的数据
Asynchronous JavaScript XML简称ajax
操作服务器上的数据除了要使用 URL地址, 还要指定 请求方式
请求方式:
使用ajax请求数据的五种方式:
POST 向服务器增加数据
GET 从服务器获取数据
DELETE 删除服务器的数据
PUT 更新服务器上的数据(侧重于完整的更新,更新用户信息)
PATCH 更新服务器上的数据(侧重于部分更新)
ajax原理:
通过XMLHTTPRequest对象向服务器发异步请求
从服务器获取数据, 【关键的一步】
然后用JavaScript来操作DOM并更新页码
XMLHTTPRequest是ajax的核心机制,是一种支持异步请求的方式
同步和异步:
javascript是一门单线程执行的编程语言,也就是同一个时间只能做一件事情
问题: 前一个任务非常耗时,后续的任务就不得不一直等待,导致 程序假死问题
JavaScript把执行的任务分为两类:
同步任务:
又叫做非耗时的任务, 在主线程上排队执行的任务
只有前一个任务执行完毕,才能执行后一个任务
异步任务:
叫做耗时任务,由JavaScript 委托给宿主环境进行执行
当异步任务执行完毕后,会通知JavaScript 主线程执行异步任务的回调函数
同步任务和异步任务执行过程:
主线程执行同步任务遇到异步任务会将其委托给宿主环境运行,完毕后的回调函数会放到任务队列的回调函数依次执行
- 同步任务由JavaScript主线程按次序执行
- 异步任务委托给宿主环境执行
- 已完成的异步任务对应的回调函数,会被加入到任务队列中等待执行
- JavaScript主线程的执行栈被清空后,会读取任务队列中的回调函数依次执行
- 主线程不断重复以上4个步骤
客户端和服务端:
服务端:
上网过程中,负责存放和对外提供资源的电脑,叫做服务器
客户端:
上网过程中,用来获取和消费资源的电脑,叫做客户端
URL地址:
URL是统一资源定位符,标识互联网上资源的唯一存放位置
浏览器可以通过URL地址,能正确的定位资源的存放位置,从而成功的访问对应的资源
http://www.baidu.com
http://www.taobao.com
URL地址由三部分组成:
- 客户端和服务端之间的通信协议
- 存有该资源的服务器名称
- 资源在服务器上具体的存放位置
客户端和服务端之间的通信位置:
服务器对外提供了哪些资源:
文字内容 image图片 Audio音频 Video视频
网页中的数据,也是服务器对外提供的资源
网页如何请求数据:
数据请求方式:
客户端请求服务器时,请求方式有很多,最常用两种请求方式是get和post请求
get请求通常用于获取服务端资源,(向服务器要数据)
根据url地址,从服务器获取HTML文件,css文件,js文件,图片文件 ,数据资源
post请求用于向服务器提交数据(往服务器发送资源)
登录时向服务器提交登录信息,注册时向服务器提交注册信息,添加用户时向服务器提交用户信息
什么是Ajax:
全称 AsynchronousJavaScript+XML(异步JavaScript和XML)
在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax
为什么要学Ajax:
Ajax可以让我们轻松的实现 网页和服务器之间的数据交互
XMLHttpResponse的使用:
XMLHttpRequest是浏览器提供的js对象,通过它,可以请求服务器上的数据资源
使用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 () {
// 监听xhr的请求状态 服务器响应的状态
if (xhr.readyState === 4 && xhr.status === 200) {
// 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}
</script>
xhr的readystate属性:
XMLHttpRequest对象的readyState属性,用来表示当前Ajax请求所处的状态,每个Ajax请求必然处于以下状态中的一个
0 UNSEND XMLHttpRequest对象创建,但尚未调用open方法
1 OPENED open方法已经被调用
2 HEADERS_RECEIVED send方法已经被调用,响应头已经被接收
3 LOADING 数据接收中,此时response属性中已经包含部分数据
4 DONE Ajax请求完成,数据传播已经彻底完成或失败
使用xhr发起带参数的get请求:
xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
这种在URL地址后面拼接的参数,叫做查询字符串
查询字符串:
查询字符串 指在URL的末尾加上用于向服务器发送信息的字符串(变量)
格式:将英文的?放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用**&**进行分隔。以这个形式,可以将想要发送给服务器的数据添加到URL中
//带有多个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
//带有1个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1
//不带参数
http://www.liulongbin.top:3006/api/getbooks
GET请求携带参数的本质:
xhr对象发起GET请求,当需要携带参数的时候,本质上,就是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的
URL编码:
URL地址中,只允许出现英文相关的字母,标点符号,数字,因此,在URL地址中不允许出现中文字符
如果URL中需要包含中文这样的字符,则必须对中文字符进行编码
URL编码的规则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示哪些不安全的字符
用英文字符去表示非英文字符
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
//经过URL编码之后,URL地址变成了如下格式
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0
浏览器会自动对URL地址进行编码操作,大多数情况下,不需要关心URL地址的编码和解码操作
使用xhr发起post请求:
- 创建xhr对象
- 调用xhr.open函数
- 设置 Content-Type属性(固定写法)
- 调用xhr.send函数 ,同时指定要发送的数据
- 监听xhr.onreadystatechange事件
<script>
// 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=js编程&author=丁鹿学堂学员&publisher=北京出版社')
// 5监听onreadystatechange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
</script>
数据交换格式:
服务器端与客户端之间进行数据传输与交换的格式
经常交换的格式JSON
封装请求:
// 封装请求
/*
method 请求类型
url 请求地址
data 传递的参数 查询字符串
success 回调函数 请求成功之后做的事情
options={
method:'post',
url:"xxxxxx",
data:{name:xx,age:xxsx},
success:function(res){
}
}
*/
function resolveData(data) {
// {name:xx,age:xxsx}, name=xxxx&age=xxsx
var arr = []
for (var k in data) {
var str = k + '=' + data[k]
arr.push(str)
}
return arr.join('&')
}
function myAjax(options) {
var xhr = new XMLHttpRequest()
// 把外界传递过来的参数对象 转换为查询字符串
var qs = resolveData(options.data)
//判断请求类型
if (options.method.toUpperCase() === 'GET') {
xhr.open(options.method, options.url + '?' + qs)
xhr.send()
} else {
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 s = JSON.parse(xhr.responseText)
// 通过回调函数 把结果返回出去
options.success && options.success(s)
}
}
}
调用:
myAjax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: { id: 1, bookname: '西游记' },
success: function (res) {
console.log(res)
},
})
myAjax({
method: 'post',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: { bookname: 'js图书', author: 'hello', publisher: '北京出版社' },
success: function (res) {
console.log(res)
},
})
{ id: 1, bookname: ‘西游记’ },
success: function (res) {
console.log(res)
},
})
myAjax({
method: ‘post’,
url: ‘http://www.liulongbin.top:3006/api/addbook’,
data: { bookname: ‘js图书’, author: ‘hello’, publisher: ‘北京出版社’ },
success: function (res) {
console.log(res)
},
})