js引⼊外部⽂件之script标签
在我的理解看来，html 就是⼀个单纯的管显⽰问题，js就是单纯的管动作问题，css就是单纯的管布局问题，这三个构成了⼀个⽹页在HTML中，经常会⽤到引⼊js ⽂件。
引⼊js的⽅法很简单：
1. 1 就是加⼊⼀个script 标签，引⼊⼀个源⽂件为 的⽂件
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<meta http-equiv="X-UA-Compatible" content="ie=edge">
7<title>Document</title>
8<script src="./"></script>
9<script>
10        alert( a );
11</script>
12</head>
13<body>
14
15</body>
16</html>
在上⾯  的内容为： var  a = 100;
运⾏结果：
1.2 引⼊的源⽂件内容是⼀个函数，也是可以的；
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<meta http-equiv="X-UA-Compatible" content="ie=edge">
7<title>Document</title>
8<script>
9function fn( data ){
10            alert( data );
11        }
12</script>
13<script>
14        load = () => {
15var oBtn = document.querySelector("input");
16            lick = () => {
17var oScript = ateElement("script");
18                oScript.src = "./";
19                document.body.appendChild( oScript );
20            }
21        }
22</script>
23</head>
24<body>
25<input type="button" value="点击添加 script 标签">
26</body>
27</html>
点击动态添加：script 标签，script的src属性为
<的内容为：
fn( 100 );
fn('nihao!');
fn("这个是动态调⽤的script标签！");
调⽤三次fn()函数
运⾏结果：弹出三次调⽤的结果
从上⾯看出，script标签可以动态调⽤外部⽂件
2. XMLHttpRequest 调⽤
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6<script>
7        load = function(){
8var oBtn = ElementById("btn");
9            lick = function(){
10var xhr = new XMLHttpRequest();
11var url = 'api.douban/v2/book/27027055';
12                adystatechange = function(){
13if( adyState == 4 && xhr.status == 200 ){
14                        alert( sponseText );
15                    }
16                }
17                xhr.open("GET", url, true);
18                xhr.send(null);
19            }
20        }
21</script>
22</head>
23<body>
24<input type="button" value="获取书籍信息" id="btn">
25</body>
26</html>
结果报错：
2.2 换⼀种⽅式调⽤：加 script 标签，在标签中调⽤
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6<style>
7    li{
8        list-style-type: none;
9    }
10</style>
11<script>
12function show(data) {
13//创建⼀个p元素
14var oP = ateElement("p");
15//给创建的p元素添加内容，内容为data对象的title属性
16            oP.innerHTML = data.title;
17//创建⼀个img对象
18var oImg = new Image();
19//给img对象获取图⽚地址
20            oImg.src = data.image;
21// 在body元素内添加p节点
22            document.body.appendChild( oP );
23// 在body元素内添加img节点
24            document.body.appendChild( oImg );
25var oLi = ateElement("li");
26            oLi.innerHTML = data.catalog;
27            document.body.appendChild( oLi );
28        }
29</script>
30<script>
31        load = function () {
32var oBtn = ElementById("btn");
33            lick = function () {
34// 相当于在这⾥执⾏了⼀个show()函数的调⽤
35var oScript = ateElement("script");script在html中的用法
36                oScript.src = "api.douban/v2/book/27027055?callback=show";
37                document.body.appendChild(oScript);
38            }
39        }
40</script>
41</head>
42<body>
43<input type="button" value="获取图书" id="btn">
44</body>
45</html>
源⽂件地址：api.douban/v2/book/27027055?callback=show 返回⼀个 json 数据
声明⼀个函数 show，参数是⼀个data对象，然后动态创建⼀个script标签，在script标签中调⽤ show 运⾏结果：
⼩结：使⽤script 标签，可以跨域调⽤数据
上⾯点击获取图书，就可以调⽤ api.douban/v2/book/27027055?callback=show  中的数据调⽤的⽂件和被调⽤的⽂件不在同⼀个地址的现象，叫做跨域访问，说明 script 标签可以进⾏跨域访问
同源的⽂件叫同域，不同源的叫跨域，归纳如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。