通过JSONP实现完美跨域

三水清 2010-06-11 20:17:47

以前我经常在博客说JSONP,例如我的WordPress天气插件就是通过JSONP来调用的天气数据,今天就说说通过JSONP实现跨域的应用~

什么是JSONP

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用 html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

对于上面的解释,我们可以简单这样理解:JSONP就是可以通过JavaScript文件进行跨域通讯的方式,例如:现在各大网站风靡的搜索提示,搜狗云输入法
注意:JSONP服务器端代码需要充分做好安全措施。

最简单的JSONP
var JSONP = document.createElement("script") ;
//FF:onload IE:onreadystatechange
JSONP.onload = JSONP.onreadystatechange = function(){
//onreadystatechange,仅IE
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
alert($("#demo").html());
JSONP.onload = JSONP.onreadystatechange = null//请内存,防止IE memory leaks
}
}
JSONP.type = "text/javascript";
JSONP.src = "http://a.pojaaimg.cn/2010/js/jquery.js";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);

简单解释:我们通过创建script,然后指定它的src等属性,然后插入到head执行

建议:onload、onreadystatechange 写在src赋值之前,防止载入js太快而没有给onload、onreadystatechange 赋值(Image对象在IE下具有此类现象

JSONP实例

我们可以首先定义一个函数来执行JSONP返回的数据,然后通过JSONP的src传此函数给后台,进行处理,返回可执行的函数。例如下面代码:

function jsonpHandle(a){
alert(a);
}
var JSONP = document.createElement("script") ;
JSONP.type = "text/javascript";
JSONP.src = "http://js8.in/jsonp.php?callback=jsonpHandle";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);

后台jsonp.php的代码:

echo $_GET["callback"]."('hello,world')";

声明:文章未声明为原创文章,本文链接 http://js8.in/548.html. 转载请注明转自JS8.IN ™

通过JSONP实现完美跨域的更多相关文章

  1. jsonp与cors跨域的一些理解(转)

    CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...

  2. jsonp与cors跨域的一些理解

    浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个 ...

  3. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

  4. 从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域

    缘起 哈喽大家周四好,趁着大家在团建的时候花一个下午学点儿东西,也是督促大家学习哟,希望大家看到老张的文章,可以有一丢丢的学习动力.不过话说过来,该吃的团建还是要去的,不能学我呀 [ /(ㄒoㄒ)/~ ...

  5. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  6. JS-JQuery(JSONP)调用WebService跨域若干技术点

    1.JSONP:JSON With Padding,让网页从别的网域获取信息,也就是跨域获取信息,可以当做是一种“工具”,大多数架构Jquery.EXTjs等都支持. 由于同源策略,一般来说位于 se ...

  7. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  8. 图片ping、JSONP和CORS跨域

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<由外边距合并到BFC> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话 ...

  9. JSONP解决ajax跨域问题

    在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

随机推荐

  1. [ python ] 项目二:主机批量管理程序

    开发要求: 1. 对主机进行批量管理    2. 可对单台或主机组批量执行命令    3. 可上传文件到对应的主机或组    4. 使用多线程实现  程序: 1. README # 作者:hkey # ...

  2. iframe自适应高度的方法

    不带边框的iframe因为能和网页无缝的结合从而不刷新新页面的情况下实现更新页面部分的数据成为可能,可是iframe却不像层那样可以收缩自如,iframe高度需要动态的调整需要JS来配合使用,只能通过 ...

  3. jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...

  4. hihocoder 1178 : 计数

    #1178 : 计数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Rowdark是一个邪恶的魔法师.在他阅读大巫术师Lich的传记时,他发现一类黑魔法来召唤远古生物, ...

  5. vscode的go插件安装

    vscode安装go的很多插件都是失败,如下: Installing 5 tools at E:\www\go_project\bin go-symbols guru gorename goretur ...

  6. AC日记——[Hnoi2017]影魔 bzoj 4826

    4826 思路: 主席树矩阵加减+单调栈预处理: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 200005 ...

  7. python url配置单独放在某个应用目录中

    文件目录: 将 urls.py 文件复制blog目录下: 此时,blog文件夹下多了urls.py文件 现在对比,两个urls.py文件: 分离前:(只有website里有urls.py) from ...

  8. thinkphp 检测上传的图片中是否含有木马脚本

    1.检测原理 要想检测图片中是否含有木马脚本,首先从制作原理来分析这种木马程序.这种木马程序是十六进制编码写的,图片的十六进制代码中主要包含<% ( ) %>.<? ( ) ?> ...

  9. websocket初步了解

    https://www.cnblogs.com/fuqiang88/p/5956363.html websocket是一种新型的协议,协议标识符为ws,加密即为wss 简单说来就是一种持续的http服 ...

  10. 洛谷P4302 [SCOI]字符串折叠 [字符串,区间DP]

    题目传送门 字符串折叠 题目描述 折叠的定义如下: 一个字符串可以看成它自身的折叠.记作S = S X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S) = SSSS…S(X个S). 如 ...