跨域 jsonp

标签: jsonp | 发表时间:2013-12-11 15:48 | 作者:javalij
出处:http://www.iteye.com

跨域有好多种方式,会根据当前的业务逻辑选择对应方式

这里介绍了jsonp的方法的实现过程

 

准备工作

模拟两个不同的域(下面用a.com 和b.com 来讲解)

a.com站点下面创建一个client.html 

b.com站点下面创建一个server.php

a.com站点通过js跨域请求b.com站点,我们利用script标签不受域访问限制特点进行请求(img标签同样有此特点),最主要的特点就是能执行请求返回来的js脚本

下面代码执行过程是

1、点击send按钮,创建script标签,为该标签src赋值后,添加到document中。

2、放到document中会立即请求b.com中的server.php ,请求的地址有个callback=resutl参数,这个result就是client.html中定义的一个js函数

3、server.php 返回一个'result("{\"message\",\"xxxxxx\"}")';

4、接着执行client.html中的js函数resut;

 

代码如下:

client.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jsonpClient.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <script type="text/javascript">
  	function createScript(){
  		var script = document.createElement("script");
		script.id="jsonid";
		script.src="http://b.com/server.php?q=sss&callback=result";
		document.body.appendChild(script);  		
  	}
  	
  	function result(data){
  		var dataJson = eval("("+data+")");
  		document.write(dataJson.message);
                document.body.removeChild(document.getElementById("jsonid"));

}
<body>
    <input type="button" value="send" onclick="createScript()"/>
  </body>
</html>

 

server.php 

q = $_REQUEST['p'];
callback = $_REQUEST['callback'];

处理过程省略
....
....
....
resutl="xxxxx";
echo callback+'("{\"message\",\"'+resutl+'\"}")';

 

 

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jsonp] 推荐:

jsonp详解

- - 博客园_首页
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西. 下面一步步来搞清楚jsonp是个什么玩意. 首先基于安全的原因,浏览器是存在 同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 看起来不知道什么意思,实践一下就知道了.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

跨域 jsonp

- - 互联网 - ITeye博客
跨域有好多种方式,会根据当前的业务逻辑选择对应方式. 这里介绍了jsonp的方法的实现过程. 模拟两个不同的域(下面用a.com 和b.com 来讲解). a.com站点下面创建一个client.html . b.com站点下面创建一个server.php. a.com站点通过js跨域请求b.com站点,我们利用script标签不受域访问限制特点进行请求(img标签同样有此特点),最主要的特点就是能执行请求返回来的js脚本.

说说jsonp

- - Web前端 - ITeye博客
jsonp充其量只能说是一种“方法”. 它可以让页面从其他域中获取资料. 首先要知道的是同源策略,在javascript中使用http请求(ajax)是会受到同源策略的限制的. A网站的页面是不能在javascript中访问B网站的资源的. 但是,对于这种希望A网站访问B网站的资源的需求怎么办呢. html 中虽然说javascript是不能跨域的,但是有许多标签,比如,