目录
4.注意点:ajax请求时一般不要用 127.0.0.1 或者localhost (本地),用ip最合适。(因为ajax请求是在客户端浏览器里面发起请求的)
3.ajax请求方式为GET或POST时,客户端给服务器传数据的方式区别
3.ajax请求报的错:net::ERR_CONNECTION_TIMED_OUT
1.egg项目搭建
1.egg项目创建命令
egg项目可以创建多个,每次创建都需要执行下面3个指令,但是第一个指令可以手动创建:
01.创建文件夹并进入对应文件夹:mkdir egg-example && cd egg-example
02.初始化egg项目:npm init egg --type=simple
03.安装依赖文件(下载egg项目需要依赖的包):npm i
启动项目:npm run dev
egg项目里面的app文件夹下面的public:用于放静态资源的
egg项目配置文件(config文件夹里面的代码)一改必须手动重新启动服务器
2.egg项目介绍
客户端(前端 页面): html+css+js
服务器:后端服务器,后端的代码就是放在后端服务器egg里面的 前端服务器:前端代码放在前端服务器里面的
客户端可以请求服务器
egg创建的项目:既是后端服务器,也是前端服务器,后端代码放在这个服务器里面的,前端代码也放在这个服务器里面的。
3.egg构建的后端服务器基本信息配置
// 在config/config.default.js
// 配置服务器基本信息
config.cluster = {
listen: {
path: '',
port: 8000,
hostname: '',//默认localhost和ip地址,上线时用0.0.0.0
}
};
分析:egg框架构建的后端服务器默认端口是 7001 ,这里改为了 8000 .也就是如果开启多个服务器,为了避免端口占用,可以修改端口号。
2.AJAX
写ajax请求代码的html页面地址要和ajax请求代码的html文件在服务器上面的地址相同,不能直接用vscode打开的页面进行ajax请求。
而不能直接用vscode直接打开的页面进行ajax请求: (这样会报跨域)
1.ajax概述
注意点:ajax代码是写在html文件中的script标签中。
01.ajax:Async JavaScript And Xml,也就是异步Javascript和Xml
02.ajax的核心:Javascript,DOM,XMLHTTPRequest(js的一个内置对象),通过XMLHTTPRequest发起异步请求。请求成功后拿到数据,然后会通过JS操作DOM,然后把数据展示到页面中。
03.ajax不是一门新技术,是一系列技术的组合。
注:也就是说,发起网络请求,并不是只能在浏览器地址栏里面输入网址后发起(这种获取到的数据或直接展示到页面中),也可以利用XMLHTTPRequest(js的一个内置对象),通过XMLHTTPRequest发起异步请求 (这种获取到的数据可以进行处理后展示到页面中)。
2.ajax请求总体步骤
1.初始版 GET请求代码
<script>
//1.对象实例化 + 兼容性写法
let xhr = new XMLHttpRequest()||new ActiveXObject("Micsoft.XMLHTTP");
//2.和服务器建立连接 参数1:请求方式 参数2:要建立连接的服务器
xhr.open('GET','http://localhost:8000/login');
//3.发起请求
xhr.send();
//4.监听请求过程(请求过程状态:xhr.readyState一变就会调用这个函数)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log('请求完成,数据:',xhr.response); //服务器响应的内容xhr.response
// alert(xhr.response); //得到的是JSON格式字符串,转为对象 JSON.parse(xhr.response)
alert(JSON.parse(xhr.response).data);
}
}
</script>
2.改进版 GET请求代码
注意点1:xhr.responseType = 'json' 设置后会自动让后端响应给前端的JSON格式数据转换成对象的形式, 就不用向上面一样,还需要调用JSON.parse()将JSON数据转成对象。但是,如果后端响应给前端的数据不是JSON格式的数据,xhr.responseType = 'json' 就会将起转换成null,所以前端收到的响应数据就是null。且xhr.responseType = 'json' 的设置要在发生请求xhr.send();之前。
注意点2:监听请求过程:xhr.onreadystatechange 是异步非阻塞的代码。
<script>
//1.对象实例化+兼容性写法
let xhr = new XMLHttpRequest()||new ActiveXObject("Micsoft.XMLHTTP");
//2.和服务器建立连接 参数1:请求方式 参数2:要建立连接的服务器
xhr.open('GET','http://127.0.0.1:8000/login?admin=520250&pwd=123456');
//设置后会自动让后端响应给前端的JSON格式数据转换成对象的形式 此时下面xhr.response保存的数据就是对象的形式
xhr.responseType = 'json'; //要在xhr.send()之前写
//3.发起请求
xhr.send();
//4.监听请求过程(请求过程状态:xhr.readyState一变化就会调用这个函数)
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
if(xhr.readyState == 4){
console.log('请求过程状态为完成,此时状态码为:',xhr.status);
if(xhr.status == 200){
console.log('请求过程完成,且状态码为200,表示请求数据成功,数据:',xhr.response);
}
}
}
</script>
3.POST请求代码
1.post请求时,会有安全验证问题,简单的处理方式是关闭安全验证:
// config/config.default.js 文件中
// 配置安全验证 关闭post请求的安全验证
config.security = {
csrf: {
enable: false,
ignoreJSON: true,
}
}
2.后端设置的请求方式要和前端对应上 (关闭后要重启服务器)
router.post('/register', controller.home.register);
3.前面两步设置了才可进行post请求
<script>
// 创建xhr实列化对象
let xhr = new XMLHttpRequest();
// 和服务器建立连接
xhr.open('post', 'http://192.168.2.197:8888/loginsubmit');
// 设置请求头 post请求需要设置请求头,不然后端接收不到数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 设置响应数据类型
xhr.responseType = 'json';
// 向服务器发送数据
xhr.send(`account=${account.value}&pwd=${pwd.value}`);
// 监听请求状态
xhr.onreadystatechange = function () {
// console.log(xhr.readyState);
if (xhr.readyState == 4) { //请求完成
if (xhr.status == 200) { //请求成功
console.log(xhr.response); //服务器响应的数据
}
}
}
</script>
4.注意点:ajax请求时一般不要用 127.0.0.1 或者localhost (本地),用ip最合适。(因为ajax请求是在客户端浏览器里面发起请求的)
xhr.open('GET','http://127.0.0.1:8000/login?admin=520250&pwd=123456');
因为别人访问到你写的ajax请求代码所在的html页面时,进行ajax请求,如果你的ajax请求代码是这样:xhr.open('GET','http://127.0.0.1:8000/login?admin=520250&pwd=123456');,则访问到的是他自己电脑上这个login路由,而不是你电脑上的login路由。
最好的办法是写成你的ip
xhr.open('GET','http://192.168.0.107/login?admin=520250&pwd=123456');
所以要理解:ajax请求是在客户端浏览器里面发起请求的。
先把写着ajax请求代码的html文件,加载到本地浏览器上面,然后再从本地浏览器上面进行ajax请求。所以如果把ip写成本地ip127.0.0.1就会访问到本地电脑从而找不到对应资源,而不是访问到真的需要请求的资源地址。
所以:ajax请求,是把写着ajax代码的html文件加载到本地加载完后,才会进行里面ajax请求。
这样别人访问到 你写的ajax请求代码所在的html页面时,进行ajax请求,也会访问到你后端服务器,而不是他自己本地电脑。
3.ajax请求方式为GET或POST时,客户端给服务器传数据的方式区别
1.请求方式为GET时,客户端给服务器传数据方式
在客户端传输:
在服务器端接收:
ctx.request.query 或者 ctx.query
async login() {
const { ctx } = this;
//获取客户端传递过来的数据
console.log(ctx.request.query);
console.log(ctx.query);
}
}
分析:服务器端的代码在dos窗口执行,所以结果去dos窗口查看。
2.请求方式为POST时,客户端给服务器传数据方式
1.post请求时,会有安全验证问题,简单的处理方式是关闭安全验证:(关闭后要重启服务器)
// config/config.default.js 文件中
// 配置安全验证 关闭post请求的安全验证
config.security = {
csrf: {
enable: false,
ignoreJSON: true,
}
}
2.后端设置的请求方式要和前端对应上
router.post('/register', controller.home.register);
3.然后才是POST请求时,客户端给服务器传递数据方式
01. 需要设置请求头 post请求需要设置请求头,不然后端接收不到数据
// 设置请求头 post请求需要设置请求头,不然后端接收不到数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.open('POST', 'http://127.0.0.1:8000/register');
xhr.responseType = 'json'; //要在xhr.send()之前写
// 设置请求头 post请求需要设置请求头,不然后端接收不到数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//3.发起请求
xhr.send(`admin=666&pwd=1233211234567`);
02.服务器端获取客户端传递过来的数据用 ctx.request.body 结果是一个对象的形式
async register() {
const { ctx } = this;
//获取客户端传递过来的数据
console.log(ctx.request.body);
}
分析:服务器端的代码在dos窗口执行,所以结果去dos窗口查看。
成功拿到客户端传给服务器端的数据。
3.进行ajax请求时遇到的问题
1.POST请求时,遇到 403 禁止访问
403:禁止访问(post请求会有安全验证问题,后端必须关闭安全验证)
解决办法:后端关闭POST安全验证
// config/config.default.js 文件中
// 配置安全验证 关闭post请求的安全验证
config.security = {
csrf: {
enable: false,
ignoreJSON: true,
}
}
2.POST请求时,遇到404 未找到
但是后端确实写了register这个路由
分析:后端虽然写了路由register,但是它要求的请求方式是 get,所以前端用post请求方式去请求肯定请求不到,这就说明请求方式不是前端开发人员决定的,而是后端开发人员决定的。
所以:解决方法:后端把请求方式改为post (注意改了后端代码要重启服务器)
router.post('/register', controller.home.register);
3.ajax请求报的错:net::ERR_CONNECTION_TIMED_OUT
分析:ajax请求报的错:ajax去请求的这个服务器挂了(没有启动)
可能是ip地址变了。