JavaScript进阶4-学习笔记
前端:
根据Ui写页面,使用vuecli+vue---测试功能---需要数据(json,array,字符串)----根据文档定义----
根据文档可以造数据---因为后端可能没有提供---如何造数据?----模拟服务node----
什么是nodejs?-----是一个运行js的环境---如何安装node环境---下载nodejs并安装
我是前端为什么要学后端Node?----1.容易上手,因为它是js, 2.模拟服务node 3.加薪
---已经有接口
如何调用?---发送ajax----调接口地址----若调成功---拿到返回的数据---渲染页面
如何启动node服务?----右击打开命令行----安装依赖npm install-----根据package.json中的依赖安装----
将dependencies依赖包下载并放到node_modules目录----启动服务命令:node express-run.js(express是node框架)----可以看到服务启动,端口3000.---不能关闭服务
关闭node服务----ctrl+c
如何发送请求?----使用的是浏览器原生对象XMLHttpRequest(xhr)---知道接口地址---根据文档找---
-----接口调用方式-----get post delete put----使用xmlhttprequest请求数据----指定接口地址和方法---
发送请求异步----拿到数据---检查数据是否拿到---把数据渲染---数据格式不符合前端----
异步请求?-----点外卖----玩手机----外卖到了电话通知
同步请求?-----点外卖----只能等待外卖,不能做任何事----外卖到了---才能做其它事情
如何检查请求接口状态?-----在浏览器控制台----network---截取请求header信息
防止多次触发请求?----前端必会----
1.点击按钮---发送请求---禁用按钮---请求完毕---解禁按钮
2.可以使用防抖节流优化
防抖-----在点击请求后n秒后再发送,若中间再次点击则重新计算n秒
节流-----在n秒内只发送一次,不重新计算
发送ajax使用什么协议?-----http/https(超文本传输协议)-----前后请求完毕不保存任何数据
特点:
无连接----每次发送请求即断开连接
无状态----没有记忆
媒体独立----浏览器发送数据可指定内容类型
请求头:
general请求行----地址,方法,请求状态
responseHeader响应头----返回服务端的参数
requestHeader请求头----发送请求时带的头信息
请求体-----包括参数
问题:
从触发请求到页面渲染成功这个时间比较长,怎么判断是前端的锅还是后台的锅,或者是网络的锅。。。
在network中查看请求接口的时间, 若时间较长,需后端优化
前端的问题慢: 加载慢,渲染慢
后端:
根据接口文档写接口, 可以任何语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="sendData()">发送ajax</button>
<div id="content"></div>
<script>
function sendData(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "http://localhost:3000/info?name=jack");
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText)
content.innerHTML = xmlhttp.responseText;
}
}
}
</script>
</body>
</html>
递归
function f1(){
console.log("f1.......")
f1();
}
f1();
var i=0;
function f1(){
i++;
console.log("f1.......")
if (i<5) {
f1();
}
}
f1();
var sum = 0;
for (var i=0; i<=5; i++) {
sum +=i;
}
console.log(sum)
function getSum(n) {
if (n === 1) {
return 1;
}
return n+getSum(n-1);
}
var sum = getSum(5);
console.log(sum)