jsonp实现跨域访问

要实现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

 

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


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

 

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

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

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

数据源部分

 

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

 

这样就实现了跨域访问

5、说明

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

posted @ 2014-07-04 16:07  huidaoli  阅读(369)  评论(0)  编辑  收藏  举报