跨域
什么是跨域
浏览器有同源策略，当网页的url的‘协议名’、‘域名’,'端口’都相同的时候就是同源,其中有一个不同就是跨域
同源策略
同源策略限制了从同一个源加载的文档或脚本如歌与来自另一个的资源进行交互.这是一个用于隔离潜在恶意文件的安全机制.
为什么需要同源策略
一是前端和服务器分开部署,接口请求需要跨域,二是我们可能加载其他网站的页面作为iframe内嵌.
跨域的方法有哪些
1.jsonp跨域
2.cors跨域
jsonp只能支持get请求，cors可以支持多种请求.cors是在服务器端设置,cors并不需要前端做什么工作
3.proxy(代理)跨域
nginx反向代理(运营或后台)
webpack设置proxy跨域(前端)
4.weksocket跨域
5.postMessage
6.其他方式跨域
window.name+iframe
location.hash+iframe
document.domain
2.jsonp跨域
问题1:问什么说jsonp不算真正的ajax？
1.ajax的核心是通过xmlHttpRequest获取的是非本页内容hsonp的核心是动态添加script标签调佣服务器提供的js脚本
2.jsonp只支持get请求,ajax支持get和post请求
问题2: jsonp跨域原理是什么
尽管浏览器有同源策略,但是
<script>
//使用js跨域
function Data(data){
console.log(data);
}
</script>
<script src="http://huruqing.cn:3009/getData?callback=Data"></script>
动态创建script的方式
1.创建用户接收的方法,比如getData
2.动态插入script标签
<script>
//使用js跨域
function Data(data){
console.log(data);
}
//动态创建script标签
var script=document.createElement('script');
script.src='http://huruqing.cn:3009/getData?callback=Data';
document.body.appendChild(script);
</script>
注意事项:jsonp接口跟普通接口不太一样,需要服务器端做特殊处理
(四)同步和异步
同步:同一时间只能做一个事情,做完一个事情之后才能开始做下一件事.
异步:同一时间做多件事
同步和异步的优缺点
同步的优点:条理清晰
缺点:速度慢
异步的优点:可以多个同时执行,效率高
缺点:可能会使得你手忙脚乱
2.js中的同步和异步
在js中是先执行同步操作在执行异步操作
(五)封装ajax请求的库
jq.js封装有请求ajax的方法
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
type : 'get',//传参的方式
url : 'http://huruqing.cn:3009/getUserDetail',//对应的接口地址
data:{
userId : '92be12aba9b01f'//传递的参数
},
dataType : 'json',//接收参数的数据类型
success : function(res){//链接成功后
console.log(res);
},
error : function(){//链接失败后
alert("连接失败");
}
})
</script>
axios一个只封装了ajax请求的库,目前最流行
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
<script>
// get方法
axios.get('http://huruqing.cn:3009/getUserDetail',
{params:{userId:'92be12aba9b01f'}}).then(function(res){
console.log(res);
}).catch(function(){
alert('链接失败');
})
// post方法
axios.post('http://huruqing.cn:3009/getUserDetail',
{userId : '92be12aba9b01f'}).then(function(ress){
console.log(ress);
}).catch(function(){
alert('连接失败');
})
</script>
正则表达式
什么是正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式
创建正则表达式
1.字面量方式
2.new关键字
3.正则参数
<script>
// 字面量的方法创建正则表达式
var reg=/msg/g;
//通过new构造函数创建正则表达式
var reg1=new RegExp('msg');
// 3.参数 i-不区分大小写 g-全局匹配 m-多行匹配
</script>
(二)常用匹配规则
(1)元字符
1.任意字符
2.\w—字母，下划线，数字
3.\s-任意空白字符
4. \d—数字
5. \D—非数字
6. | 表示或
7. ^匹配字符串的开始
8. $匹配字符串的结束
9. [abc]表示包含里面的任意一个
<script>
//.表示的是任意字符
var reg1=/./;
console.log(reg1.test('123'));
//\w表示下划线,字母,数字
var reg2=/\w/
console.log(reg2.test('_1'));
//\s表示的是空白字符
var reg3=/\s/
console.log(reg3.test(' '));
//\d表示的是数字
var reg4=/\d/;
console.log(reg4.test('4'));
//\D表示的是非数字
var reg5=/\D/
console.log(reg5.test('_'));
//| 表示或
var reg6=/4|5/
console.log(reg6.test('4'));
///^/表示的是以他为开头
var reg7=/^7/
console.log(reg7.test('78'));
//$表示的是以他为尾部
var reg8=/8$/
console.log(re8.test(reg8));
//[abc]可以为a,可以为b，也可以为c
var reg9=/[abc]/
console.log(reg9.test('a'));
</script>
反义字符
1.【^x】匹配除了‘x’之外的所有字符
2…[^xyz]同上,匹配除‘x,y,z’之外的任意字符
重复匹配
1.?—重复出现零次或一次
2.+ 重复出现一次或者多次
3. * 重复出现零次或者多次
4. {n}重复出现n次
5. {n,}至少重复出现n次
6. {m,n}重复出现m到n次,其中m<n
/****** 重复 ********/
//1. `？` 重复出现零次或一次
var reg1 = /^https?:\/\//; // 表示必须以http开头,s可以出现0次或者1次
var str1 = "https://adfasdf";
console.log("boo1", reg1.test(str1));
var str1 = "http://adfasdf";
console.log("boo1", reg1.test(str1));
//2. `+` 重复出现一次或多次
var reg2 = /a+/; // 表示a必须出现1次或以上
var str1 = "ssa";
var str2 = "ssaaa";
console.log("boo14", reg2.test(str1), reg2.test(str2));
//3. `*` 重复出现零次或多次
var reg3 = /a*/;
var str1 = "sss";
var str2 = "ssaaa";
console.log("boo3", reg3.test(str1), reg3.test(str2));
//4. {n} 重复出现 n 次
var reg4 = /^\d{4}-\d{2}-\d{2}$/;
var str = '2021-06-06';
console.log('boo4',reg4.test(str));
var reg4 = /\d{4}-\d\d?-\d\d?/;
var str = '2021-6-6';
console.log('boo4',reg4.test(str));
//5. {n,} 至少重复出现 n 次
//6. {m,n} 重复重现 m 到 n 次，其中，m<n
var reg6 = /a{2,4}/
var str = 'aabcd';
console.log('boo6',reg6.test(str));
正则表达式应用
// 1.字符串替换
var str = 'asdfasdfasdfwebasdfasdfasdfwebasdfasdfasdfweb'
// 把web替换成web工程师
str.replace(/web/g,'web工程师');
// 2.查找符合正则的条件的内容,举例:把网页中所有的图片的找出来
var str = document.body.innerHTML;
str.match(/https?:\/\/.*?\.(png|jpeg|gif)/g);
分组
1.用括号分组
2.分组的应用
<script>
// 1.括号表示一个整体
// 2. 分组
// 3.字符串替换分组
var str = '13812345678';
var newStr = str.replace(/(\d{3})(\d{4})(\d{4})/,'$1****$3');
console.log(newStr);
</script>
贪婪匹配和惰性匹配
1.字符串的match方法,可以检查匹配几次
var str = 'asdfasdfasdfasdfasdf';
var list = str.match(/a/g);
console.log(list);
2.贪婪匹配,尽可能多的匹配
var str = document.body.innerHTML;
str.match(/https?:\/\/.*\.(png|jpeg|gif)/g); // 贪婪匹配, 只能得到一个匹配项
3.惰性匹配,竟可能少的的匹配,再重复的后面加?即可
var str = document.body.innerHTML;
str.match(/https?:\/\/.*?\.(png|jpeg|gif)/g); // 懒惰匹配, 可以得到多个匹配项
