跨域的本质-引入外部 js 文件| 学习笔记

简介: 快速学习跨域的本质-引入外部 js 文件。

开发者学堂课程【Ajax 前端开发入门与实战跨域的本质-引入外部 js 文件】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/595/detail/8542


跨域的本质-引入外部 js 文件

跨域的实现

XMLHttpRequest 对象默认情况下是无法获取到非同源服务器下的数据。那么怎么获取别人服务器的数据呢?

使用 XMLHttpRequest 是达不到的,我们只能另辟蹊径。

我们可以通过 script 标签,用 script 标签的 src. 属性引入一个外部文件,这个外部文件是不涉及到同源策略的影响的。

创建 weather.html

<! DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8"><title>Document</title>

<script type="text/javascript" src="./js/haha.js"></script>

</ head>

<body>

</ body></html>

创建 register.html

< ! DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8"><title>Document</title>

<scripttype="text/javascript"src="http://www.lisi.com/test.js"></script>

//直接使用 css 变量

</ head>

<body>

< / body></htm1> 

创建 test.css

//定义一个变量

Var str=haha;

//定义一个方法

Function test(){

Console.log(str)

}

//方法调用

Foo(123)

 

二、跨域的本质

就是服务器返回了一个我们之前定义好的方法调用,方法的参数就是我们想要的

<script type=text/ javascriptsrc></script>

1)jsonp 跨域只能是 get 请求,而不能是 post 请求;

2)jsonp 跨域的原理到底是什么;

3)除了 jsonp 跨域之外还有那些方法绕过“同源策略”,实现跨域访问;

4)jsonp 和 ajax,或者说 jsonp 和 XMLHttpRequest 是什么关系;

相关文章
|
5月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
3月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
54 0
|
18天前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
JSON JavaScript 前端开发
js跨域实现
【10月更文挑战第31天】在实际开发中,需要根据具体的需求和项目情况选择合适的跨域解决方案。
33 1
|
4月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
150 2
前端JS读取文件内容并展示到页面上
|
4月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
3月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
243 0
|
4月前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5