Ajax第一天
服务器相关的基础概念
服务器
服务器本身就是一台电脑
服务器作用:
- 存储网站文件
- 提供网站文件给用户
服务器上的 网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容
客户端
前端开发中,客户端指的 web浏览器
常见的浏览器
- Chrome 谷歌浏览器
- Firefox 火狐浏览器
- Edge 微软
- Safari 苹果
- Opera 欧朋浏览器
URL 地址（统一资源定位符)
URL 地址，表示服务器上每个资源的确切位置
服务器上的每个资源，都对应着独一无二的URL地址
客户端与服务器通信的过程
分为请求 - 响应两个步骤
请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”
-
响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”
[图片上传失败...(image-535355-1652874051481)]
什么是Ajax
Ajax 是浏览器中的一种技术，用来实现，客户端网页向服务器请求数据。
Asynchronous Javascript And XML，简称 Ajax （异步的JS和XML）
Ajax过程:用户发起请求，通过浏览器告知服务器；服务器根据请求内容，做出响应，返回数据或资源；再通过浏览器解析和呈现给用户
[图片上传失败...(image-b856e5-1652874051481)]
同步和异步
-
同步 阻塞类型
代码的执行方式 从上往下 一步一步执行
console.log(1) console.log(2)
-
异步 非阻塞类型
代码可以同时执行多段情况
Ajax 定时器 延时器
XML
是一种数据格式 类似HTML 都是属于标记语言
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
JSON
json 的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式
类似对象的字符串
目前主流的和服务器交互的数据格式
"{"name":"菜鸟教程","url":"www.runoob.com","slogan":"学的不仅是技术，更是梦想！"}"
浏览器和服务器交互的过程
浏览器负责发起请求
服务器负责响应数据
请求的三大关键
请求地址 url
问后端要
请求方式
请求参数
看后端给的接口文档
axios 发送请求
get 请求 获取数据
发送get请求 带参数 有两种方式
-
在 URL 上面拼接
以英文 问号 分割 ? 前面是url地址 后面是参数 a=1 多个参数用 & 连接 a=1&b=2
axios({ url :'http://www.itcbc.com:3006/api/getbooks?bookname=斗破苍穹134&author=土豆', method : 'GET', }) -
在params 对象中携带
axios({ url :'http://www.itcbc.com:3006/api/getbooks', method : 'GET', params : { bookname :'斗破苍穹134', author : '土豆' } })
post 请求 新增数据
请求的参数 用data 来传递
axios({
url : 'http://www.itcbc.com:3006/api/addbook',
method : 'post',
data : {
bookname : '入门到放弃',
author : '黑马',
publisher : '白马',
appkey : 'wushizhao'
}
})
delete 请求 删除
参数用params
axios({
url : 'http://www.itcbc.com:3006/api/delbook',
method : 'DELETE',
params : {
appkey : 'wushizhao',
id,
}
})
put 修改 侧重完整更新
参数 用data 传递
axios({
url : 'http://www.itcbc.com:3006/api/updatebook',
method : 'put',
data :{
id,
bookname : newBookname,
author : newAuthor,
publisher : newPublisher,
appkey : 'wushizhao'
}
})
谷歌浏览器调试
