js 引入外部文件之 script 标签

在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页

在HTML中,经常会用到引入js 文件。

引入js的方法很简单:

1. 1 就是加入一个script 标签,引入一个源文件为test.txt 的文件

 <!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>
<script src="./test.txt"></script>
<script>
alert( a );
</script>
</head>
<body> </body>
</html>

在上面   test.txt 的内容为: var  a = 100;

运行结果:

js 引入外部文件之 script 标签

1.2 引入的源文件内容是一个函数,也是可以的;

 <!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>
<script>
function fn( data ){
alert( data );
}
</script>
<script>
window.onload = () => {
var oBtn = document.querySelector("input");
oBtn.onclick = () => {
var oScript = document.createElement("script");
oScript.src = "./test2.txt";
document.body.appendChild( oScript );
}
}
</script>
</head>
<body>
<input type="button" value="点击添加 script 标签">
</body>
</html>

点击动态添加:script 标签,script的src属性为test2.txt

test2.txt的内容为:

fn( 100 );
fn('nihao!');
fn("这个是动态调用的script标签!");

调用三次fn()函数

运行结果:弹出三次调用的结果

js 引入外部文件之 script 标签

从上面看出,script标签可以动态调用外部文件

2. XMLHttpRequest 调用

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
var url = 'https://api.douban.com/v2/book/27027055';
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
alert( xhr.responseText );
}
}
xhr.open("GET", url, true);
xhr.send(null);
}
}
</script>
</head>
<body>
<input type="button" value="获取书籍信息" id="btn">
</body>
</html>

结果报错:

js 引入外部文件之 script 标签

2.2 换一种方式调用:加 script 标签,在标签中调用

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style-type: none;
}
</style>
<script>
function show(data) {
//创建一个p元素
var oP = document.createElement("p");
//给创建的p元素添加内容,内容为data对象的title属性
oP.innerHTML = data.title;
//创建一个img对象
var oImg = new Image();
//给img对象获取图片地址
oImg.src = data.image;
// 在body元素内添加p节点
document.body.appendChild( oP );
// 在body元素内添加img节点
document.body.appendChild( oImg );
var oLi = document.createElement("li");
oLi.innerHTML = data.catalog;
document.body.appendChild( oLi );
}
</script>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
// 相当于在这里执行了一个show()函数的调用
var oScript = document.createElement("script");
oScript.src = "https://api.douban.com/v2/book/27027055?callback=show";
document.body.appendChild(oScript);
}
}
</script>
</head>
<body>
<input type="button" value="获取图书" id="btn">
</body>
</html>

源文件地址:https://api.douban.com/v2/book/27027055?callback=show 返回一个 json 数据

js 引入外部文件之 script 标签

声明一个函数 show,参数是一个data对象,然后动态创建一个script标签,在script标签中调用 show

运行结果:

js 引入外部文件之 script 标签

小结:使用script 标签,可以跨域调用数据

上面点击获取图书,就可以调用 https://api.douban.com/v2/book/27027055?callback=show  中的数据

调用的文件和被调用的文件不在同一个地址的现象,叫做跨域访问,说明 script 标签可以进行跨域访问

同源的文件叫同域,不同源的叫跨域,归纳如下:

js 引入外部文件之 script 标签

上一篇:Leetcode学习笔记:#543. Diameter of Binary Tree


下一篇:表单怎么根据不同条件提交到不同的页面