浏览器同源策略
说明: 浏览器解析页面时,当页面中有ajax请求时,则要求页面的URL地址,与Ajax请求的地址必须满足同源策略的规范.
同源策略:
1.请求协议 http:// 、https://
2. 请求域名
3.请求的端口
上述的三项必须死等(必须长得一模一样). 满足同源策略.浏览器可以解析数据,否则不能正常解析.
ASCII码不同则不满足同源策略
案例练习1:
URL: http://www.jd.com/xxx/xxx
Ajax: https://www.jd.com/xxx/xxx/xxx 协议不同
案例练习2:
URL: http://www.jd.com:80/xxx/xxx 满足要求
( Ajax: http://www.jd.com:80/xxx/xxx/xxx ) 浏览器默认端口80
Ajax: http://www.jd.com/xxx/xxx/xxx
案例练习3: IP与域名对应 ASCII码不同则不满足同源策略
URL: http://www.jd.com:80/xxx/xxx 不满足要求 域名不同
Ajax: http://10.0.0.6:80/xxx/xxx/xxx
DNS 域名解析服务器
案例练习4:
URL: http://www.jd.com/xxx/xxx 不满足要求 域名不同
Ajax: http://www.jt.com/xxx/xxx/xxx
2.跨域:url地址和ajax请求路径违反了同源策略,则称为跨域
@CrossOrigin(origins = "*")允许所有请求
2.1解决策略:
旧的方式:JSONP
新: CORS方式
CORS:跨域(源)资源共享
核心:服务器在响应头中标识了可以访问的用户地址 :CORS服务端跨域
回调地狱:
解释: 由于ajax多层级嵌套,导致返回值的回调函数解析困难.把这种调用称之为回调地狱问题.
解决方案:
1.闭包解决 (核心:闭包非闭)
2. 通过promise对象进行封装 vue对象中解释的.
将内层的ajaxa async:false改为同步解决回调
JSON:
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
JSON结构:对象格式,数组格式,嵌套格式
对象格式:对象无序,{"key":"value","key":"value",……}
数值格式:数组有序,value的有序集,[1,2,3,"张三","李四",]{"key":"value","key":"value",……},……]
嵌套格式:value可以嵌套:数组和对象格式嵌套
[{"学生":{"address":{"中国":{"宁夏回族自治区":{"银川":{"西夏区":{"北方民族大学":{"商学院":{"电子商务":["181","182"],"物流管理":["181","181"]},"马克思主义学院":{"学院":"班级"},"计算机学院":{"学院":"班级"},"法学院":{"学院":"班级"},"化工学院":{"学院":"班级"},"体育学院":{"学院":"班级"},"基础教育学院":{"学院":"班级"}}}}}}}}}]
js中可以根据返回值的数据动态匹配类型,即参数四可以不写
$.get("url地址","参数",function(data){},"返回值类型")
$.post()参数与get一致
$.getJSON()参数与get前三个参数一致,(只有三个参数)没有返回值类型
$.ajax()type,url,contentType,data,dataType,success,error
本文详细介绍了浏览器的同源策略,包括协议、域名和端口必须完全匹配的规则,以及违反该策略导致的跨域问题。文中提到了解决跨域的JSONP和CORS方式,并探讨了回调地狱及其解决方案,如使用闭包和Promise。同时,还对JSON数据格式进行了阐述,强调其易读性、解析效率和包含对象、数组及嵌套结构的特点。
1139

被折叠的 条评论
为什么被折叠?



