关于json-p

目录

json-p是什么

json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的技术,而是巧妙的利用,组合目前的技术而实现跨域通讯的方法。我们知道浏览器由于安全考虑,在编写ajax程序时,httprequest/xmlhttp都不能发送非本域的http请求,类似下面的代码

<!--www.a.com/test.aspx页面里的内容 -->

<script>

 ajax.request("http://www.b.com/ajaxserver.aspx",function(){});

</script>

都不会得到你想要的结果,由于您的网页域名是www.a.com,而您发送的ajax请求的目标域却是www.b.com。浏览器会阻止这一的请求,这就是所谓的同源策略。而json-p就是解决这一问题的其中一种方式。

json-p原理分析

假如我们有一个网页www.a.com/index.aspx 其中一段代码如下:

<scriptsrc="http://www.b.com/test.js"><script>

test.js里面的代码:

alert("我是属于域www.b.com的");

显然这佯做毫无问题,我们打开www.a.com/index.aspx的时候,会弹出一个框(我是属于www.b.com的)。

现在我们将www.a.com/index.aspx里面的代码改成这样

<script>
function test(str){
alert(str);
}
window.onload=function(){var script=document.createElement("script");
script.src="http://www.b.com/test.js";
document.getElementByTagName("head")[0].appendChild(script);
}
</script>

www.b.com/test.js里面的内容改成:

test("我是www.b.com/test.js里面的参数哦");

如果不意外的话,浏览器加载完依然会弹出一个对话框(我是www.a.com里面的函数)。 这2个例子清晰的表明,对于js脚本, 浏览器并没有同源的限制,www.a.com能够直接使用www.b.com的javascript资源,并且支持我们通过编写javascript脚本,动态的创建script标签,动态加载。那么我们能否利用浏览器对于script没有同源限制的这一特性,来实现我们的跨域通信呢,答案是肯定的,jsonp实质上就是利用了这一点。现在假设www.a.com/index.aspx 有个用户登陆了, 我们需要在index.aspx页面要将这一信息发送给www.b.com/login.aspx。index.aspx我们可以编写如下面的代码

function callback(ret){
alert(ret);
}
var script=document.createElement("script");
script.src="http://www.b.com/login.aspx"+"?name="+youname+"&pwd="+pwd+"&call=callback";
document.getElementByTagName("head")[0].appendChild(script);

在www.b.com/login.aspx页面编写如下代码

Response.Header.Append("Content-Type","application/javascript");
var name=Request.QueryString["name"];
var pwd=Request.QueryString["pwd"];
var call=Request.QueryString["call"]
if(SystemService.Login(name,pwd)){
  Response.Write(call+"('login success!')");}else{Response.Write(call+"('name or pwd error!')");
}
Response.End();

大家如果能看懂上面的代码吗? 对, 这就是所谓的jsonp。

json-p的缺点

  1. 目标域的服务器必须要如你所愿的输出一些你想要的脚本才可以。如上面www.b.com/login.aspx页面输出的callback ,想象一下,假如www.b.com/login.aspx输出的并非callback;而是输出alert("你妹的,你妹的"),那会是一种什么情况....说白了, 目标域,如果不受你控制,又不支持这样方式,那么你是无法使用json-p这种方式的。
  2. 只能是get请求

关于json-p的更多相关文章

  1. 使用TSQL查询和更新 JSON 数据

    JSON是一个非常流行的,用于数据交换的文本数据(textual data)格式,主要用于Web和移动应用程序中.JSON 使用“键/值对”(Key:Value pair)存储数据,能够表示嵌套键值对 ...

  2. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

  3. 【疯狂造轮子-iOS】JSON转Model系列之一

    [疯狂造轮子-iOS]JSON转Model系列之一 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗 ...

  4. Taurus.MVC 2.2 开源发布:WebAPI 功能增强(请求跨域及Json转换)

    背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...

  5. .NET Core系列 : 2 、project.json 这葫芦里卖的什么药

    .NET Core系列 : 1..NET Core 环境搭建和命令行CLI入门 介绍了.NET Core环境,本文介绍.NET Core中最重要的一个配置文件project.json的相关内容.我们可 ...

  6. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  7. JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...

  8. json与JavaScript对象互换

    1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...

  9. .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator

    去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...

  10. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

随机推荐

  1. c语言第2次作业

  2. FreeBSD network connect

    在安装FreeBSD的过程中,网络设置部分我将其设置为DHCP,在此期间,下载了en_us_freebsd_hanbook.txzen_us_freebsd_hanbook.txz,zh_cn_fre ...

  3. getchar的利用

    /*以每行一个单词的形式打印其输入 */ getchar   putchar函数,是逐个打印和输入(逐个循环打印) #include <stdio.h> int main() { int ...

  4. ASPX.Net控件

    简单控件 Label :显示文字,编译后的元素的为span 主要设置属性边框包括边框颜色,边框样式,边框粗细 Liteal :显示文字,编译后不会产生任何元素,一般用来从后台输出JS代码 Textbo ...

  5. Python爬虫爬取豆瓣电影名称和链接,分别存入txt,excel和数据库

    前提条件是python操作excel和数据库的环境配置是完整的,这个需要在python中安装导入相关依赖包: 实现的具体代码如下: #!/usr/bin/python# -*- coding: utf ...

  6. Eclipse版本android 65535解决方案(原理等同android studio现在的分包方式)

    由于工作的需要看了下Eclipse下android65535的解决方案,查了好多文档,真心的发自内心的说一句请不要再拷贝别人的博客了,害人,真害人. 接下来我说下我的实现方式,首先说下65535的最可 ...

  7. CSS盒子模型元素实际宽度的计算

    一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 ...

  8. win8 win10 安装msi 提示2502、2503的错误代码

    前言: 归根到底是权限不够导致的.win7应该不会有这个问题.   问题发生: 换了个电脑,装个win10预览版玩玩,发现python的msi安装文件安装不了.错误代码是2502.   其实我已经在w ...

  9. IntelliJ IDEA 12.0 +Maven 初使用 - WEB项目的建立

    新建项目 1.Fiew菜单 - New Project,选择Maven Module项,输入Project name,选择项目所在的路径,选择SDK,其余默认即可,点击Next按钮

  10. Saltstack之salt-master的打开文件数问题

    一.引言: 单个salt-master下的minion数已经达到2101个了,所以在master日志有如下的提示: 2016-09-09 11:36:22,221 [salt.utils.verify ...