1、同源策略
同源策略是浏览器的一种安全策略,所谓同源是指域名,协议,端口完全相同
在同源策略下,只有同源的地址才可以相互通过 AJAX 的方式请求
同源或者不同源说的是两个地址之间的关系,不同源地址之间请求我们称之为跨域请求
在同源策略下,浏览器不允许 Ajax 跨域获取服务器数据
现代化的 Web 应用中肯定会有不同源的现象;必然要解决不同源问题,从而实现跨域请求
2、跨域解决方案 JOSNP原理
JSON with Padding,是一种借助于 script 标签发送跨域请求的技巧
原理就是在客户端借助 script 标签请求服务端的一个地址
地址返回一段带有某个全局函数调用的 JavaScript 脚本
在调用函数中,原本需要返回给客户端的数据通过参数传递给这个函数
这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据
JOSNP 只能发送 GET 请求;用的是 script 标签,与 AJAX 提供的 XMLHttpRequest 没有任何关系
3、jQuery 中对 JAONP 的支持
jQuery 基本使用 $.ajax()
jQuery 中使用 JOSNP 就是将 dataTape 设置为 jsonp
4、cors 跨域
Cross Origin Resourse Share ,跨域资源共享
这种方案无需客户端做出任何变化(客户端不用改密码),只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头,表示这个资源是否允许指定域请求。
Access-Control-Allow-Origin 的值:
* 表示允许任意源访问,不安全
http://foo.com 允许指定的源访问
5、模板引擎作用
减少字符串拼接;在模板里面解析json,然后跟 html 内容拼接,性能会更好
腾讯 artTemplate 模板引擎
art-template 是一个简约、超快的模板引擎
网址:https://github.com/aui/artTemplate
中文使用文档: https://aui.github.io/art-template/zh-cn/docs/
常用语法:
<% 与 %>符号包裹起来的语句则为模板的逻辑表达式
<%= content %>为输出表达式
原始语法: <%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
6、artTemplate 使用步骤
引入模板文件
创建模板
将数据跟模板进行绑定
在模板里面编写代码解析数据
帮等数据和模板之后得到的内容
将数据内容写到页面上
template() 方法可以调用模板内容,参数1、调用的模板id;参数2、是一个对象类型的数据,数据会传给模板,对象中的每个属性的属性名在模板中可以直接当变量使用