服务端
上网过程中，负责存放和对外提供资源的电脑，叫做服务器
客户端
上网过程中，用来消费和获取资源的电脑，叫做客户端
URL地址
统一资源定位符，标识互联网上资源的唯一存放位置 浏览器可以通过URL地址，能正确的定位资源的存放位置，从而成功的访问对应的资源
URL有三部分组成
- 通信协议
- 服务器名称
- 资源在服务器上具体的存放位置
客户端和服务端之间的通信过程
三个步骤：请求，处理，响应
服务器对外提供的资源
文字内容 image图片 Audio音频 Video视频 网页中的数据，也是服务器对外提供的资源
网页中请求服务器的数据资源，需要用到Ajax，Ajax的核心就是XMLHttpRequest对象 简称xhr，是浏览器提供的js成员，通过它可以请求服务器上的数据资源
资源请求方式
最常用的是get和post请求
get请求通常用于获取服务端资源，向服务器要数据
根据url地址，从服务器获取html文件和css文件，js文件，图片文件，数据资源
post请求用于向服务器提交数据，往服务器发送资源
登陆时，向服务器提交登录信息
Ajax
使用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
