jsonp是怎么通过script标签进行跨域的

jsonp是怎么通过script标签进行跨域的,第1张

script标签的还在是可以跨域的,jsonp 就是利用这一点来跨域。

在 GET 请求中,我们都是为了获取远程的一些数据,所以要实现的目的就是服务器端代码要通过某种方式让 JavaScript 能够拿到数据。所以,jsonp 的实现大概有以下几个步骤:

创建一个全局的临时函数,并在函数内调用响应回调

// jsonp1 是生成的一个临时函数名,可以通过简单的计数来生成,如jsonp2, jsonp3

// 生成不同的函数的目的是为了防止多个 jsonp 同时请求,回调的函数被覆盖

windowjsonp1 = function( data ) {

    

    // 调用在成功之后的回调方法

    

    onsuccess( data );

    

    // 删除临时函数,释放内存

        

    windowjsonp1 = null;

    

};

2 通过  documentcreateElement( 'script' ) 创建 script 标签,src 属性设置成远程的 api 的 url。其实就是让浏览器加载一段 JS,这段 JS 就是服务器返回的内容。

3 服务器端对返回的数据进行包装,生成一段 JS,这段 JS 里面调用了 jsonp1 这个方法,并且把数据作为参数传进去。

4 script 标签加载完成之后,jsonp1 被执行,通过 onsuccess 将 data 传递给回调方法,jsonp1 方法被销毁,释放内存。

跨域问题解决办法如下:

jsonp跨域

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的,所以我们可以通过这个“犯罪漏洞”来进行跨域。一般,我们可以动态的创建script标签,再去请求一个带参网址来实现跨域通信。

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

虚拟主机不支持functionfile-get-contents,就没得搞了,你不可能让提供商给你开

jquery其实也是用ajax,只是方便一点而已,如果接口方有ajax的接口,你才可以用

>

点击“下载”按钮,会把文本域中的内容全部作为一个html后缀文件下载下来,各流程效果如下面几张图:

下载按钮点击示意

出现下载确认框(根据浏览器的设置不同也可能直接下载),然后名称默认就是testhtml。

默认就是testhtml名称

然后对应保存目录就多了个类似下图的文件:

保存好的testhtml文件截图示意

双击该testhtml文件可以在浏览器中正常浏览,说明,保存信息无误。

testhtml在浏览器中访问的效果

触发下载的JS代码就几行:

对于非文本文件,也是可以直接JS触发下载的,例如,如果我们想下载一张,可以把这张转换成base64格式,然后下载。

代码示意:

不止是html文件,txt, json等只要内容是文本的文件,都是可以利用这种小技巧实现下载的。

在Chrome浏览器下,模拟点击创建的<a>元素即使不append到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的funDownload()方法有一个appendChild和removeChild的处理,就是为了兼容Firefox浏览器。

download属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载,但我手头上并无相关浏览器,无法确定真实情况如何,欢迎有条件的小伙伴帮忙测下告知结果。

就这些吧,感谢阅读!

问题出现在

<script type="text/javascript" src="C:/Users/family/Desktop/JSON&JSONP使用技巧/jsonFilejs">

浏览器是没有权限访问你电脑上的绝对路径的

把js和html放在一个目录下,src改成src="jsonFilejs",使用相对路径

使用jquery的ajax的jsonp类型跨域请求数据、始终获取不到返回数据是设置错误造成的,解决方法为:

1、创建基本的文件结构json_ajaxhtml和json_ajaxphp,下载jqueryjs。

2、如图分别编写json_ajaxhtml和json_ajaxphp文件的编码。

3、分别在w(l)amp环境下运行json_ajaxhtml和json_ajaxphp。

4、经过源码和运行结果的分析,知道了在json_ajaxhtml中设置了按钮的点击事件,点击按钮。

注意事项:

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE60+、FF15+、Safari20+、Opera90+等。

以上就是关于jsonp是怎么通过script标签进行跨域的全部的内容,包括:jsonp是怎么通过script标签进行跨域的、跨域问题怎么解决、如何跨域获取远程html页的纯json数据并本地调用等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9826122.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-02
下一篇2023-05-02

发表评论

登录后才能评论

评论列表(0条)

    保存