要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系?

1、什么是跨域?

跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互。比如说:现有一个http://www.zq.com和http://www.qt.com两个独立的网站,要实现从后一个网站向前一个网站中取数据。把做为数据来源的当作服务端,把去获取数据的当作客户端,实现面向服务的编程。

在动态网页当中,最重要的一项就是取数据。如果是在同一个项目中,将网站挂在同一个域名下,这种情况下无论是前台Ajax还是后台直接取数据都非常方便。但是如果像上面的两个网站一样,在不同的域名下,那么取数据就变得非常麻烦(现在有Web Servers和WCF实现面向服务的编程)

2、什么情况下用JSONP做跨域访问?

当要用Ajax从其它的项目中取数据时候。如果是在后台中从其它网站取数据,可用Web Servers或WCF等技术来实现。

3、JSONP和JSON的关系?

JSON是一种基于文本的数据交互方式,而JSONP是基于JSON的使用方式。从使用上简单的讲就是:不跨域 用JSON实现A jax和后台数据交互; 跨域 用JSONP实现Ajax和其它域中程序做数据交互。

4、$.ajax实现JSONP

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PRequest.aspx.cs" Inherits="jsonP.PRequest" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
  6. <script src="Scripts/json2.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. function aa() {
  9. var person = {};//自定义数组
  10. person.name = "aName";
  11. person.age = 18;
  12. //console.log(JSON.stringify(person));
  13. $.ajax({
  14. url: "http://localhost:58878/jp.ashx",//另一个域中的程序
  15. type: "get",
  16. dataType: "jsonp",//预期返回类型为JSONP
  17. data: { 'person': JSON.stringify(person) },
  18. jsonp: "callback", //在一个jsonp请求中重写回调函数的名字,可省
  19. success: function (rt) {
  20. var result = JSON.parse(rt);
  21. //console.log(result);
  22. $("#lb").html(result.Name + "<br />" + result.Age);
  23. }, error: function (e) {
  24. //console.log(e);
  25. }
  26. });
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <input id="Button1" type="button" value="取值" onclick="aa()" />
  32. <div id = "lb" style="width: 90px;height: 90px;background-color: red"></div>
  33. </body>
  34. </html>

通过分析不难发现其与JSON写法上的不同:

1、url上的细微差异,在JSONK中常是直接某个路径下的处理程序,而JSONP是写别的网站(域)下的处理代码程序路径。但要注意:JSON也能这样写

2、dataTypy现在处理的是JSONP而不是JSON

其它传参数据 ,接参数等和JSON并无二异

数据源部分

  1. using System.Web;
  2. namespace PResponse
  3. {
  4. /// <summary>
  5. /// Summary description for jp
  6. /// </summary>
  7. public class jp : IHttpHandler
  8. {
  9. public class person
  10. {
  11. public string Name { get; set; }
  12. public int Age { get; set; }
  13. }
  14. public void ProcessRequest(HttpContext context)
  15. {
  16. context.Response.ContentType = "text/plain";
  17. string callback = context.Request["callback"];//callback不能少
  18. string ca = context.Request["person"];
  19. person b = Newtonsoft.Json.JsonConvert.DeserializeObject<person>(ca);
  20. string response = "{\"Name\":\"" + b.Name + "\",\"Age\":\"" + b.Age + "\"}";
  21. string re = Newtonsoft.Json.JsonConvert.SerializeObject(response);
  22. string call = callback + "(" + re + ")";//response和re相同,前面的callback不能少
  23. context.Response.Write(call);
  24. }
  25. public bool IsReusable
  26. {
  27. get
  28. {
  29. return false;
  30. }
  31. }
  32. }
  33. }

这样就实现了跨域访问

5、说明

1)之所以在前台取数据要分JSON和JSONP,是因为JavaScript 的同源策略

jsonp实现跨域访问的更多相关文章

  1. 使用jsonp进行跨域访问

    一.使用场景 当我们请求非本服务器的资源的时候,浏览器会禁止访问,并提示不允许跨域访问.此时我们可以使用jsonp这种请求方式,从其他服务器获取资源.在客户端调用提供jsonp支持的接口,获取json ...

  2. 使用jsonp形式跨域访问实现电商平台的左侧导航栏

    电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. poj ...

  3. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

  4. jsonp实现跨域访问json数据

    前台js function init() { $.ajax({ url: 'http://localhost:8012/index.json', dataType: "jsonp" ...

  5. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  6. AJax与Jsonp跨域访问

    一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...

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

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

  8. C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题

    客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...

  9. 【AngularJs】---JSONP跨域访问数据传输

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

随机推荐

  1. 查看程序是否启动或者关闭--比如查看Tomcat是否开启!直接用ps命令查看进程就行了啊

    1.查看程序是否启动或者关闭--比如查看Tomcat是否开启!直接用ps命令查看进程就行了啊 2.Tomcat服务器和虚拟机的关系,Tomcat启动运行过程要调用系统环境变量的java_home啊,J ...

  2. OneAPM:打造云时代的应用性能管控平台

    在2015年大连市CIO信息化年会的现场,记者与OneAPM东北区总经理佟维针对云时代的企业系统应用性能的管理控制进行了简短交流.北京蓝海讯通科技股份有限公司,即OneAPM是中国基础软件领域的新兴领 ...

  3. IOS开发中的几种设计模式

    ios开发学习中,经常弄不清楚ios的开发模式,今天我们就来进行简单的总结和探讨~ (一)代理模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现.优势:解耦合敏捷原则 ...

  4. Java-斐波那契数

    1.目标:使用非递归求斐波那契,0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... 2.思路:观察规律得:从第3个数起,把和从为下一个数的加数,把加数作为下一个数的被加数,即三个 ...

  5. const和#define常量的区别

    (1) 编译器处理方式不同 define宏是在预处理阶段展开. const常量是编译运行阶段使用. (2) 类型和安全检查不同 define宏没有类型,不做任何类型检查,仅仅是展开. const常量有 ...

  6. 我们为什么需要DTO(数据传输对象)

    原文:http://www.cnblogs.com/Gyoung/archive/2013/03/23/2977233.html DTO即数据传输对象(Data Transfer Object).之前 ...

  7. Android videoview循环播放视频

    如何在一个activity里实现videoview对一个文件夹下的所有视频文件顺序循环播放,当切换界面时暂停, 切换回来继续原来的视频播放呢.所谓的 自动循环播放就是监听到视频播放结束之后继续重新播放 ...

  8. USACO Section 2.4: Bessie Come Home

    因为题目给了边的信息,所以比较适用bell-man的方法 /* ID: yingzho1 LANG: C++ TASK: comehome */ #include <iostream> # ...

  9. poj 1325 Machine Schedule 二分匹配,可以用最大流来做

    题目大意:机器调度问题,同一个任务可以在A,B两台不同的机器上以不同的模式完成.机器的初始模式是mode_0,但从任何模式改变成另一个模式需要重启机器.求完成所有工作所需最少重启次数. ======= ...

  10. ubuntu添加环境变量【原创】

    cpro放到环境变量里,并且加上可执行权限如果在本地添加,则需mkdir ~/bin mv cpro /home/zhangbh/bin/vi ~/.bashrcexport PATH=/usr/lo ...