前后端交互
一、认识js中的异步任务
1.js是单线程的语言:
特点:所有的任务按顺序执行,如果出现一个任务比较耗时,会出现代码的阻塞
2.js执行代码的顺序:先执行同步任务,执行完毕之后去异步队列中执行异步代码
因为js是单线程的语言,处理不了异步任务(耗时任务),但是js的宿主环境浏览器是多线程的,就会把异步任务交给浏览器处理
console.log(1);
setTimeout(function () {
console.log(2);
}, 100)
console.log(3);
结果:依次为1,3,2
问题:函数内部异步代码内的局部变量,在外如何取出
function getNum(cb) {
setTimeout(function () {
var num = 1;
cb(num)
}, 0)
}
getNum(function (x) {
console.log(x);
})
总结:回调函数可以在函数外部取出函数内部异步代码中的局部变量的值
二、认识前后端交互
1.语言:
前端:html、css、js
后端:[nodejs]、Java、php、python、c++等等
js 当js运行在浏览器软件上时,js就是前端语言 ECMAScript + DOM + BOM
nodejs 当js运行在node软件上时,js就是后端语言 ECMAScript + 模块
2.交互场景:
(1)地址栏输入ip地址,服务器端给我们会响应一个结果;
(2)点击注册,将所有的信息保存到了服务器中的数据库中;
(3)滚动滚动条时,向服务器索取少量数据等。。。。。
3.服务器
(1)是用来提供服务的,当我们自己的电脑跑一些特殊的程序或者安装开启特殊软件(apache服务器),此时我们的电 脑也属于服务器
server(自己使用nodejs写的程序),让它跑起来,开了一个服务,这个服务器给我们提供了很多的接口
(2)为什么要有服务器:
①. 别人想看比较麻烦
②. 写的项目过大,内存占用也大,我们电脑内存一般不足以存放很多的项目
我们可以通过特殊软件把我们的代码上传到服务器,后期想查看可以实现ip地址+端口号来查看
如:ip地址(不好记): 把ip转为 域名
http://10.254.89.101 http://www.baidu.com
http://192.168.1.1
4.端口号:
每一个服务器上都有很多的文件,提供的就是不同的服务,每一个都有的编号 0- 65535
一般习惯四位数端口号像 8080
https://www.baidu.com:443 https默认端口号都是443
http://www.baidu.com:80 http默认端口号都80
5.接口:是由后端提供的,前端连接不同的接口、获取不同的数据,从而实现不同的效果
三、同步和异步请求
1.同步交互:客户端向服务器端发送交互,必须要等服务器返回结果后,才能进行其他的操作;
2.异步交互:客户端向服务器端发送请求,不必等到服务器返回结果,就可以进行其他业务操作
3.在发生交互时浏览器的作用:
前期:浏览器的作用是需要进行发送请求 + 显示到页面上
后期:浏览器的主要作用是显示到页面上,发送请求则由ajax的核心对象XMLHttpRequest来完成
四、Ajax
1.作用:在不刷新页面的前提下,向后端发送请求,请求返回少量的数据
2.ajax的核心对象:XMLHttpRequest对象
1)创建XMLHttpRequest对象
语法:let 对象名 = new XMLHttpRequest()
2)对象的方法:
①发送请求的相关配置:对象名.open('请求方式','请求服务器url地址',true(异)/false(同)) 默认异步交互
②发送请求:对象名.send()
3)对象的属性:
①请求状态码:对象名.readyState --------- (有0、1、2、3、4五个状态)
0代表对象还未创建;
1代表已创建对象但还未发送;
2代表发送请求已完成;
3代表服务器已接收请求并读取;
4代表服务器读取请求已完成.
②响应状态码:对象名.status
200表示响应成功;
404表示我们url地址出错了;
500表示服务器出错了
③服务器给我们响应回来的数据:对象名.responseText
该数据是一个字符串形式的数据,如'{ }'、'[{ },{ },{ }]'
4)对象的事件:
对象名.onreadystatechange=function(){ }
触发条件:当请求状态码发生变化时就触发
3.发送请求的步骤和方式
1)发送请求的步骤:
①创建XMLHttpRequest对象(let xhr = new XMLHttpRequest());
②配置相关请求信息:xhr.open('请求方式','请求服务器url地址',true(异)/false(同));
③发送请求:xhr.send();
④接收响应:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4&&xhr.state == 200){
console.log(xhr.responseText)
}
}
服务器响应给我们的数据:JSON.parse(xhr.responseText)
2)请求的方式(get和post请求)
get请求:携带参数和不携带参数2种
当携带参数时,在请求的url地址拼接一个请求的参数,
注意:"current=2&pagesize=24" 参数中间不能出现任何的空格
如:http://localhost:8888/test/second?current=2&pagesize=24
post请求:当携带参数时:
①请求参数需要放在send中;
②请求发送之前需要告诉服务器请求的参数的格式,即需要设置请求头
xhr.setRequestHeader("Content-type","参数的格式")
如:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send("name=2&age=2")
function ajaxtool(callback) {
var xhr = new XMLHttpRequest();
xhr.open("get", "http://localhost:8888/goods/list?current=2&pagesize=24")
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(JSON.parse(xhr.responseText));
}
}
}
ajaxtool(function (x) {
console.log(x);
})
五、正则表达式(补充)
1.概念:又称规则表达式,用于匹配一个字符串满足某种规则(即正则表达式)RegExp
2.创建语法:
1)字面量法:var reg = /字符串或规则(正则表达式)/修饰符
修饰符:g(全局) 、 i(忽略大小写)
2)构造函数:
var reg = new RegExp('字母串或者规则(正则表达式)','修饰符')
3.方法:
reg.test(字符串) :查看字符串是否满足reg规则,满足为结果为true,不满足结果为false
4.基本元字符:
\d 一位数字
\D 一位非数字
\w 一位字母下划线数字中的任何一种
\W 一位非字母下划线数字中的任何一种
\s 一位空格
\S 一位非空格
. 一位任意字符
\. 一位.
5.边界符号:
^ : 以..开始;$ :以..结束
6.量词符号:
{m,n} 最少m个,最多n个
{m,} 最少m个,没有上限
{m} 正好m个
? 0个或者1个
+ 一个或者多个
* 0个或者多个
7.特殊符号:
[]: 1位任意的[]内的任意内容
[^abcx]: 1. 占了一位 2. 非abcx中的任何一个
[abcx]: 1. 占了一位 2. a或者b或者c或者x
[a-z]: 1. 占了一个 2. 里面的任何一个小写字母
[a-zA-Z]: 1. 占了一个 2. 里面的任何一个字母
[A-Z]: 1. 占了一个 2. 里面的任何一个大写字母
[0-9]: 1. 占了一个 2. 里面的任何一个数字
[\u4e00-\u9fa5] 任意一个中文字符
(): ()内的内容当成一个整体
8.字符串中和正则相关的方法
1. str.replace('旧字符','新字符')
str.replace('正则','新字符') 把符合正则负责的替换新的字母
2. str.match(reg);
3. str.search(reg): 和indexOf的作用一模一样,但是indexOf(参数)参数不支持正则