art-template
是一个简约、超快的模板引擎。中文官网首页为
http://aui.github.io/art-template/zh-cn/index.html
导入 art-template：从
官网
将
template-web.js
下载到本地或者直接引入 CDN 上的脚本文件。导入脚本后就可以在全局中使用
template()
函数。
定义模板：在
<script>
标签中，定义模板的 HTML 结构，HTML 结构里面可以根据 art-template 的语法嵌入各种占位符。
<script>
标签
type
属性的默认值为
text/javascript
，所以一定要显示指定
type
属性的值为
text/html
，否则其中的 HTML 片段会被当成 JavaScript 代码执行。
1
2
3
4
5
6
7
|
<script type="text/html" id="tpl-hobby">
<ul id="hobby">
<li>{{hobby[0]}}</li>
<li>{{hobby[1]}}</li>
<li>{{hobby[2]}}</li>
</ul>
</script>
|
准备要渲染的数据。
调用
template(templateID, data)
函数生成 HTML 结构字符串，
templateID
是模板的 ID 属性值，
data
是需要渲染的数据对象，返回经过模板引擎处理后的 HTML 结构字符串。
通过 DOM 操作将 HTML 结构字符串渲染到页面上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导入 art-template -->
<script src="./template-web.js"></script>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<div>爱好：
</div>
<!-- 2.定义模板 -->
<script type="text/html" id="tpl-hobby">
<ul id="hobby">
<li>{{hobby[0]}}</li>
<li>{{hobby[1]}}</li>
<li>{{hobby[2]}}</li>
</ul>
</script>
<script>
var data = {
hobby: ['吃饭', '睡觉', '打豆豆']
};
var htmlStr = template("tpl-hobby", data);
$('div').append(htmlStr);
</script>
</body>
</html>
|
JSON5
（JSON for Humans） 在 JSON 规范的基础上做了一些拓展，允许使用单行和多行注释。
1
2
3
4
5
6
7
8
|
{
"gender": '男',
name: "zs", // 违反上面第 2 条
'age': 20, // 违反上面第 2 条
"address": undefined, // 违反上面第 3 条
say: function() {}, // 违反上面第 4 条
"hobby": ["吃饭", "睡觉", '打豆豆'], // 违反上面第 5 条
}
|
JSON 字符串可以和 JavaScript 对象（包括数组）相互转换。
把字符串转换为数据对象的过程，叫做反序列化，使用
JSON.parse()
方法从 JSON 字符串转换为 JavaScript 对象：
1
2
|
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
console.log(obj);
|
把数据对象转换为字符串的过程，叫做序列化，使用
JSON.stringify()
方法从 JavaScript 对象转换为 JSON 字符串：
1
2
|
var json = JSON.stringify({ a: 'Hello', b: 'World' })
console.log(json);
|
axios.min.js
下载到本地引入或者直接引入 CDN 上的脚本文件。导入脚本后就可以在全局中使用
axios
对象。
1
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
Axios 来调用接口的响应结果会在接口返回的原始数据基础上额外包装了一层，响应结果对象有
data
、
status
、
statusText
、
headers
、
config
、
request
这 6 个属性，其中
data
属性才是接口返回的原始响应数据。
使用
axios
对象发起 get 请求的语法：
1
2
|
axios.get('url', { params: { } }).then(callback);
|
1
2
3
4
5
6
7
8
9
10
|
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function(res) {
var result = res.data
console.log(res)
})
|
使用
axios
对象发起 post 请求的语法：
1
|
axios.post('url', { }).then(callback)
|
1
2
3
4
5
6
7
8
9
10
|
var url = 'http://www.liulongbin.top:3006/api/post'
var dataObj = { location: '北京', address: '顺义' }
axios.post(url, dataObj).then(function(res) {
var result = res.data
console.log(result)
})
|
直接使用
axios()
方法发起请求，类似于 jQuery 中
$.ajax()
的传入一个对象设置请求的相关信息：
1
2
3
4
5
6
|
axios({
method: '请求类型',
url: '请求的URL地址',
data: { },
params: { }
}) .then(callback)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/get',
params: {
name: 'zs',
age: 20
}
}).then(function(res) {
console.log(res.data)
})
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
bookname: '程序员的自我修养',
price: 666
}
}).then(function(res) {
console.log(res.data)
})
|
Axios 的请求执行结果是一个 Promise 对象，通过
.then
的方法还可以使用 ES6 的 async/await 关键字直接得到响应结果对象，进一步的，配合解构赋值和冒号重命名得到接口的原始响应数据。
1
2
3
4
5
6
7
8
|
const {data: res} = async function() {
await axios({
method: '请求类型',
url: '请求的URL地址',
data: { },
params: { }
})
}
|
关于 Axios 库的更多用法参考
官方文档
。
http://www.test.com/index.html
页面的同源检测：
同源策略（Same origin policy）是浏览器提供的一个安全功能。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解：浏览器中 A 网站的 JavaScript 脚本，不允许和非同源的网站 B 之间，进行资源的交互，例如：
无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求
跨域：非同源的 URL 之间进行资源的交互访问。
浏览器允许发起跨域网络请求，但是，跨域请求回来的数据，会被浏览器的同源策略给拦截，无法被页面获取到。
https://blog.csdn.net/weixin_44392418/article/details/88782809
JSONP 没有用到
XMLHttpRequest
这个对象，JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax 请求。
jQuery 提供的
$.ajax()
函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：
1
2
3
4
5
6
7
8
|
$.ajax({
url: 'https://suggest.taobao.com/sug?q=apple',
dataType: 'jsonp',
success: function(res) {
console.log(res)
}
})
|
使用
$.ajax()
发起 JSONP 请求时，配置对象的
datatype
属性值必须为
'jsonp'
，这样请求就会默认携带一个 callback=jQueryxxx 的参数，会自动拼接在 GET 请求 URL 的查询字符串上，其中 jQueryxxx 是随机生成的成功回调函数名称，和配置对象中的
success
属性指向同一个函数对象。
有时服务端接口约定的成功回调函数参数名不一定是
callback
，也可能是
cb
、
cbk
等。可以通过修改配置对象
jsonp
和
jsonpCallback
两个属性的来自定义 JSONP 请求中回调函数的参数名和参数值：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
jQueryxxx$.ajax({
url: 'https://suggest.taobao.com/sug?q=apple',
dataType: 'jsonp',
jsonp: 'cb',
jsonpCallback: 'abc',
success: function(res) {
console.log(res)
}
})
|
jQuery 中的 JSONP 请求也是通过
<script>
标签实现的，但是jQuery 采用的是动态创建和移除
<script>
标签的方式：在发起 JSONP 请求的时候，动态向
<header>
内部尾部追加一个
<script>
标签，JSONP 请求成功以后，动态从
<header>
中移除刚才追加进去的
<script>
标签。
跨域的接口请求是否要使用 JSONP 要根据服务端的设定而定，如果在服务器端已经处理好了该接口的跨域问题，那么直接通过普通的 Ajax 请求就可以跨域访问了；如果服务端想让前端来使用 JSONP 的方式来跨域访问，在服务端要提前配置好处理 JSONP 请求的函数，该函数根据 URL 中是否有 callback 参数判断是 JSONP 请求，如果是则将响应数据包裹在调用语句中作为脚本文件返回。当然服务端也有可能对 JSONP 请求不做特殊处理直接返回响应，这样返回的数据会被浏览器给拦截，而无法实现跨域访问。
2021黑马前端最新进阶班
MDN：JSON
JSON 规范
