博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
利用jsonp实现跨域请求
阅读量:4677 次
发布时间:2019-06-09

本文共 1117 字,大约阅读时间需要 3 分钟。

  同源策略,它是由提出的一个著名的。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

 

  由于同源策略,我们在使用ajax请求资源时不能跨域请求,也就是说必须是同一个域名,协议,端口。但我们在开发的时候经常会需要请求到其他服务器(跨域)的数据,其中一种方法就是jsonp。

 

  另外提一下,一般都是使用json这种数据格式来传递数据,因为javascript原生支持json格式,所以使用起来很方便。不要把json和jsonp混淆了,他们根本不是一个次元的东西!!!比如说两个中国人进行对话,json就是汉语(具体内容),而jsonp就是两个人交流的方式(用嘴)。

什么是jsonp? 

  我们都知道script标签是可以跨域请求的,例如我们引入jquery.js的时候经常使用cdn上的资源,并没有把jquery.js这个文件真正地下载到自己的服务器上。那么利用script可以跨域请求的特性,我们就能请求其他服务器的资源。这种技术也就是所谓的jsonp。多说无益,下面是一个简单的实例,看了之后相信你就能对jsonp的原理有了理解。  

 

    

  

请求的服务器下面有对应的jsonp.js(名字自己起,不一定是jsonp.js)这个文件,里面的代码如下:

 

demo1({"name": "lin"}); /*在远程服务器上的js代码,也就是说该服务器上的数据我们都可以传入函数,那么html执行的时候也就获取到了这些远程数据*/

   

  html文件渲染如下,可见远程服务器的数据已经被请求过来:

 

  

  

  工作流程解析:我们先在html定义了demo1这个函数,然后引入远程jsonp.js文件,该js文件执行html定义的demo1函数(执行时传入的参数就是想要传递的数据)。这样html也就变相的获取到了远程服务器的数据。

   

   总结:script标签也就是一个简单的get请求,服务器处理该get请求,返回一个函数,传入该函数的参数也就是客户端希望获得的数据。其实不只是script可以跨域请求,只要有src属性的标签都可以借助同样的原理进行跨域请求,例如img, iframe

  

转载于:https://www.cnblogs.com/yonglin/p/7101147.html

你可能感兴趣的文章
插入排序
查看>>
.Net Core + NGINX跳转登录时端口丢失
查看>>
C#实现对文件目录的实时监控
查看>>
Python3 序列解包
查看>>
「Linux」VMware安装centos7(一)
查看>>
Java中模拟POST上传文件
查看>>
Ubuntu 中sendmail 的安装、配置与发送邮件的具体实现
查看>>
时隔2月,我的第二篇
查看>>
[导入]C++ OpenGL底层和C# GUI无缝联合!
查看>>
调试程序Bug-陈棚
查看>>
STM32 寄存器库和固件库
查看>>
第11周表格
查看>>
linux运维云计算课程学习,Linux云计算面试时遇到的问题
查看>>
Abiword对话框资源
查看>>
跟我一起写 Makefile
查看>>
C# uri
查看>>
GPS定位 测试
查看>>
前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
查看>>
探索从 MVC 到 MVVM + Flux 架构模式的转变
查看>>
传统认知PK网络认知 刚子扯谈烤串认知
查看>>