跨域和模板引擎使用
2021-01-12 本文已影响0人
amanohina
跨域
同源策略
- 是浏览器的一种安全策略，所谓同源是指的域名，协议，端口完全相同
- 在同源策略下，只有同源的地址才可以相互通过AJAX的方式请求
-
同源或者不同源，说的是两个地址之间的关系，不同源的地址之间，请求我们称之为跨域请求
同源对比
- 在同源策略下，浏览器不允许AJAX跨域获取服务器数据
- 现代化的 Web 应用中肯定会有不同源的现象，所以必然要解决不同源问题，从而实现跨域请求。
JSONP
- JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。
- 原理就是在客户端借助script标签请求服务端的一个地址
- 地址返回一段带有某个全局函数调用的JavaScript脚本
- 在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数
- 这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据
JSONP只能发送GET请求
用的是script标签，和XMLHttpRequest没有任何关系
jQuery对JSONP的支持
- jQuery基本使用$.ajax()
- jQuery中使用JSONP就是将dataType设置为jsonp
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(".btn").click(function () {
// 发送跨域的 ajax 请求
$.ajax({
url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
type: "GET",
dataType: "jsonp",
jsonp: "cb", //这条属性可以设置回调函数的参数名称（必须与后台接口的回调函数参数名保持一致）
jsonpCallback: "abc", //jQ 自动分配的回调函数的名称进行重命名
data: {"wd": "ajax"},
success: function (data) {
console.log(data)
}
})
})
</script>
axios无法支持JSONP
CORS跨域
- Cross Origin Resource Share，跨域资源共享
- 这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。
- Access-Control-Allow-Origin 的值：
*表示任何源访问，不安全
http://foo.com允许某个指定的源访问
跨域请求实例：百度联想搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
input {
border: 0;
outline: none;
}
.box {
width: 500px;
height: 50px;
margin: 20px auto;
}
.box .search-box {
float: left;
width: 400px;
border: 2px solid #0af;
box-sizing: border-box;
}
.box .search-box .txt {
display: block;
height: 46px;
padding-left: 10px;
line-height: 46px;
font-size: 16px;
color: #333;
}
.box .search-box ul li {
padding: 0 10px;
line-height: 36px;
}
.box .btn {
float: left;
width: 100px;
height: 50px;
background-color: #0af;
font-size: 18px;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<div class="search-box">
<input type="text" class="txt">
<ul class="suggest-list">
</ul>
</div>
<input type="button" value="搜索" class="btn">
</div>
<!--引包 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 添加一个 txt 中的按键弹起事件，每输入一个文字都会触发事件
var $txt = $(".txt");
var $ul = $(".suggest-list");
$txt.keyup(function () {
// 获取搜索联想的数据
var keyword = $(this).val();
// 发送数据请求
$.ajax({
url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
dataType: "jsonp",
jsonp: "cb",
data: {"wd": keyword},
success: function (data) {
// console.log(data);
// 获取需要的数组
var arr = data.g;
// 将所有的数组中的数据，渲染到页面中的 ul 里
var str = "";
// 数组遍历，进行字符串拼接
for (var i = 0 ; i < arr.length; i++){
str += `<li>${arr[i].q}</li>`
}
// 将最终拼接的字符串添加到页面上
$ul.html(str);
}
})
})
</script>
</body>
</html>
模板引擎作用
- 减少字符串拼接
- 在模板里面解析JSON，然后跟html内容拼接，性能更好
artTemplate
- art-template 是一个简约的，超快的模板引擎
- 网址：
- 中文使用文档：
- 常用语法：
<%与 %>符号包裹起来的语句则为模板的逻辑表达式
<%= content %>为输出表达式
artTemplate使用
- 引入模板文件
- 创建模板
- 将数据跟模板进行绑定
- 在模板里面编写代码解析数据
- 绑定数据和模板之后得到内容
- 将数据内容写在页面上面
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 1、引入模板的文件 -->
<script src="js/template-native.js"></script>
<!-- 2、创建模板 -->
<script type="text/html" id="tem">
<!-- 3、添加模板中的结构 -->
<% for (var i = 0 ; i < 5 ; i++) { %>
<div>这是一个模板中的 div<%= i %></div>
<div>这是一个模板中的 div<%= name %></div>
<% } %>
<!-- 4、在模板中编写 js 代码解析数据 -->
</script>
</head>
<body>
<div class="box">
</div>
<script>
// 5、将模板内的内容添加到 box 里面
// template() 方法可以调用模板内容
// 参数1： 调用的模板的id
// 参数2：是一个对象型的数据，数据会传给模板，对象中的每个属性的属性名在模板中可以直接当变量名使用
$(".box").html(template("tem", {name: "tom"}));
</script>
