module6-03-跨域和模板引擎应用
一、介绍跨域与同源策略
1.1 同源策略
-
-
在同源策略下，只有同源的地址才可以相互通过AJAX的方式请求
-
同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求
1.2 跨域
-
因为同源策略下，浏览器不允许Ajax跨域获取服务器数据
-
而因为同源策略造成很多功能都无法实现
-
因此要有跨域解决方案
-
下图为跨域时候常见的错误
二、跨域解决方案
2.1 JSONP原理
（1）JSONP原理
-
JSON with Padding，是一种借助于script标签发送跨域请求的技巧
-
script即使不同源可以避开跨域， 不过要服务端配合
-
只能发送GET请求
-
-
原理就是在客户端结束script标签请求服务端的一个地址
-
地址返回一段带有某个全局函数调用的JS脚本
-
在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数
-
这样客户端的函数就可以通过参数得到原本服务端想要返回的数据
演示服务端进行的操作
<?php
$callback = $_GET["callback"]
echo $callback.'({"name": "tom", "age": 19, "class": 1})'
?>
-
这样我们发送请求的时候可以定义这个传给服务端的参数中的函数名callback为我们将要回调的函数, 然后再响应回来的时候函数就会跟据服务端给的参数进行调用
演示客户端
var script = document.createElement('script')
script.src = "......?callback=foo"
document.getElementByTagName('head')[0].appendChild(script)
// 这时候回调的数据就会让这个函数调用
function foo (data) {
console.log(data)
}
-
所以JSONP用的是script标签, 与Ajax提供的XMLHttpRequest无关
（2）jQuery中的jsonp
-
jQuery基本使用$.ajax()
-
jQuery中使用JSONP就是将dataType设置为jsonp
-
如果要设置自己定义的callbackkey名则修改jsonp属性
-
如果要设置自己定义的回调函数名, 则修改jsonCallback属性
-
默认是会按照jquery自己的方式进行命名
-
（3）总结
-
如果想要使用jsonp的话使建议使用jQuery，但是只支持get请求
-
axios没有jsonp的封装
2.2 cors 跨域
-
Cross Origin Resource Share，跨域资源共享
-
这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候调价一个Access-Control-Allow-Origin的响应头，表示这个资源是否允许制指定域请求。
-
Access-Control-Allow-Origin的值：
-
* 表示允许任意源访问，不安全
-
http://foo.com 允许指定的源访问
-
服务端演示
<?php
header("Access-Control-Allow-Origin: http://foo.example")
header("Access-Control-Allow-Origin: *")
?>
三、模板引擎
3.1 模板引擎的认识
作用
-
减少字符串拼接
-
在模板里面解析json然后跟html内容拼接，性能更好
artTemplate
-
这是一个简约、超快的模板引擎
-
常用语法:
-
① <% %>符号包裹起来的语句则为模板的逻辑表达式
-
可以做判断, 循环等语句
-
-
② <%= content %>为输出表达语句
-
3.2 模板引擎的调用
-
在html中加入script(一定要写id), 然后在里面根据模板语法来填写结构
-
在js代码中使用template(id, value)
-
value里面传入一个对象, 然后在script中的模板也可以使用
-
3.3 使用art-template封装一个评论系统
-
出现的问题
（1）post新增的请求中无法渲染
-
在每次post之后都调用一次template方法
（2）delete中无法为post新增的绑定
-
封装一个绑定方法，每次post完之后都绑定一次
-
为li添加一个自定义属性，方便引用
-
-
