跨域和模版引擎的使用
跨域问题和同源策略
同源策略
- 是浏览器的一种安全机制,同源即域名、协议、端口完全相同
- 在同源策略下,只有同源的地址才能相互通过AJAX方式交流
- 同源指的是两个地址之间的关系,不同源的地址之间的请求称做跨域
http(协议)://www.baidu.com(域名):80(端口-默认80可不写)/index.html
浏览器不允许通过跨域获取数据,但是现代web应用中我们又需要获取不同源地址的资源,必须解决不同源问题,实现跨域请求数据
JSONP
JSON with Padding,借助script标签发送跨域请求的方法
基本原理:
- 在客户端通过script标签请求服务端的一个地址
- script返回的结果带一段全局函数调用的js脚本
- 这个函数调用会调用我们本地js的一个函数
- 而函数的实参就是我们想要的数据
jsonp只能发送get请求,jsonp和XHR没有任何关系
JQ中的jsonp
使用$.ajax()方法,只需要把dataType类型设置为jsonp
CORS跨域
Cross Origin Resource Share -- 跨域资源共享
无需在客户端做出任何变化,只需要在服务端响应的时候添加一个Access-Control-Allow-Origin的响应头即可,表示这个资源是否支持指定域请求
Access-Control-Allow-Origin的值
- 为*表示任何源都可以跨域访问这个文件,不安全
- 值为(一个域名+协议)例如:
http://foo.com
表示只允许指定的源访问
cors跨域现在较常使用
案例:百度搜索
模拟百度搜索时候的自动提示
- 在百度试一下,打开控制台network,查看文件response看到回调函数名为
jQuery110202399796524493838_1611211395892(参数)
,说明是一个jsonp格式发送的 - 打开headers找到函数名
cb=jQuery110202399796524493838_1611211395892&_=1611211395894
,所以参数名为cd - 实际接收参数的参数是wd:
&wd=12
(我搜索的就是12) - 接口地址为
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web
模版引擎
- 减少字符串拼接
- 在模版里面解析json,然后跟html内容进行拼接,性能更好
artTemplate模版引擎(腾讯)
简约、超快的模版引擎
地址:https://github.com/aui/artTemplate
中文文档:https://aui.github.io/art-template/zh-cn/docs/
常用语法:
<% js代码 %>
符号包裹起来的语句则为模版逻辑表达式<%= 表达式 %>
为输出表达式
使用
- 引入模版js文件
- 创建模版
- 数据模版绑定
- 编写解析数据
- 绑定数据和模版之后得到内容
- 数据书写到页面上
使用模版引擎改造百度案例
案例:留言板
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!