AJAX即“Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。
通过HTTP请求 加载远程数据 这里指的是jQuery对ajax的实现
浏览器提供的一套方法,可以实现页面无刷新更新数据,相当于是浏览器发送请求和接收响应的代理人,局部更新页面数据,提高用户浏览网站应用体验
应用场景:1.页面上拉加载更多数据
2.列表数据无刷新分页
3.表单项离开焦点数据验证
4.搜索框提示文字下拉列表
ajax特点:
1.在不影响页面的显示的前提下,可以与后台进行交互
2.交互是隐藏的,用户感知不到,可以在控制台中看到交互
3.可以同一时间多次与后台进行交互;并且没有顺序关系
参数 | 类型 | 返回值 | 参数 |
---|---|---|---|
url | String | 发送请求的地址 | |
type | POST、GET 默认值(GET) | PUT DELETE也可以使用 但是兼容性可能不太好 部分浏览器支持 | |
options | Object | 进行ajax请求的设置 | |
async | Boolean | 默认值为true代表异步操作 如果你需要同步请求,设置为false,浏览器会被锁住,后续操作必须等请求完成 将异步操作同步化的一个配置 | |
success | function | 请求成功后的回调函数 | 由服务器返回的内容 |
error | function | 请求失败时的回调函数 | XMLHttpRequest对象、错误信息、捕获的异常对象 |
Ajax实现步骤:
1.创建Ajax对象
var xhr=new XMLHttpRequest();
2.告诉Ajax请求地址以及请求的方式
xhr.open('get',;http://www.example.com);
3.发送请求
xhr.send();
4.获取服务器端与客户端的响应数据
xhr.onload=function(){
console.log(xhr.responseText);
}
方法:
$.get
$.post
1.get无参数
<script>
// 1.创建实例对象
var xhr=new XMLHttpRequest();
// 2.打开一个连接 第一个参数请求方式
//第二个参数是接口地址
xhr.open('get','http://47.93.206.13:8002/index/findAllCategory');
// 3.发送请求
xhr.send();
// 4.接受响应
xhr.onreadystatechange=function(){
// xhr.readyState===4&xhr.status===200 表示请求发送成功 可以获取相应
if(xhr.readyState===4&xhr.status===200){
console.log(xhr.responseText)
}
if(xhr.readyState===4&xhr.status===500){
console.log(xhr.responseText)
}
}
</script>
2.get携带参数
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
<script>
var qs=Qs;
// get 参数携带在地址栏上 不安全 显式的
// post 参数携带请求体重 安全 隐式的
// 1.创建实例对象
var xhr=new XMLHttpRequest();
// 2.打开一个连接
let obj={
page:1,
pageSize:10
};
// console.log(qs.stringify(obj))
// 转换为查询字符串 Qs.stringify(obj)
xhr.open('get','http://47.93.206.13:8002/index/pageQueryArticles'+'?'+qs.stringify(obj))
// 3.发送请求
xhr.send();
// 4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState=== 4&xhr.status ===200){
console.log(xhr.responseText)
}
}
</script>
- post携带参数
<script>
let obj={
username:"admin2",
password:123321
}
// 创建实例
var xhr=new XMLHttpRequest();
// 打开一个连接
xhr.open("post",'http://47.93.206.13:8002/user/login');
// 设置请求头
xhr.setRequestHeader('Content-Type','application/json')
// 发送请求
xhr.send(JSON.stringify(obj));
// 接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState===4&xhr.status===200){
console.log(xhr.responseText)
}
}
</script>
项目
1. 上传本地文件xxtx.jar到云服务器
方式1:通过命令行上传
方式2:其他软件 filezilla等软件
建议上传到用户家目录下 方便查找
运行jar包
java -jar xxtx.jar
后台运行:
nohup java -jar xxtx.jar &
需要打开浏览器的防火墙(安全组)
打开浏览器 查看swagger页面
http://203.195.246.58:8888/swagger-ui.html#/
2. 云服务器数据库配置
mysql 5.7
mysql -V
1.通过navicat连接数据库,用root身份
Host:自己的
Port:3306
User Name: root
Password: root
2.创建数据库
数据库名:xxtx
字符类型:utf8
运行sql文件
在数据库xxtx上右击 然后选运行sql文件
3.导入表格和数据
给当前云服务器的数据库创建用户jacky
4.用户配置
用户名:jacky
Host:% (Host指的是当前用户可以通过哪个ip登录到我的数据库,%指的是 所有ip都可以)
密码:jacky
确认密码:jacky
5.权限配置
授予 xxtx 数据库的所有权限
通过navicat连接数据库,用jacky身份
Host:自己的云服务器地址
Port:3306
User Name: jacky
Password: jacky