码迷,mamicode.com
首页 > Web开发 > 详细

跨域 - 自定义 jsonp实现跨域

时间:2015-06-13 21:31:43      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

问题:在现代浏览器中默认是不允许跨域。

办法:通过jsonp实现跨域
 
在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。
 
有两个站点:
  1.要获取数据的站点:http://localhost:1326/Default.aspx
     1.1页获取页面的json数据
技术分享
技术分享
 技术分享
2.要显示获取结果的站点
技术分享
 技术分享

 

数据源页面的源码


         protectedvoid Page_Load(object sender, EventArgs e)

        {

            // 摘要:获取或设置输出流的 HTTP 字符集。

            // 返回结果: System.Text.Encoding 对象,包含与当前响应的字符集有关的信息。         

            Response.ContentEncoding = Encoding.UTF8;

          

            // 摘要:  获取或设置输出流的 HTTP MIME 类型。            //

            // 返回结果: 输出流的 HTTP MIME 类型。默认值为“text/html”。          

            Response.ContentType = "application/javascript";

            String  jsonContent = "{‘InnerDevId‘:12,‘InnerOrgId‘:13}";   

            //将字符串写入响应输出流            

            /*

             * 这里定义的方法必须加上window.onload。因为如果不加,这段代码将会在页面没有加载的时候就执行了。

             */

            Response.Write("window.onload = function () { dosomething(" + jsonContent + ")}");

        }

 

 使用页面的源码

 



 

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="testgetjson._Default"%> 

<!DOCTYPEhtml

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

 

    <title>测试页面</title>

    <scripttype="text/javascript"src="Scripts/jquery-1.7.1.js"></script>

   <scripttype="text/javascript">      

           function dosomething(jsondata) {

 

               var odiv = document.getElementById(‘div1‘);

               var strJson =  JSON.stringify(jsondata);

               //$("#div1").text(strJson);

               odiv.innerHTML=strJson;

               returnfalse;

 

           }    

   </script>

    <scripttype="text/javascript"src="http://localhost:1326/Default.aspx"></script>

 

</head>

<body>

    <formid="form1"runat="server">

        <p>这里展现出来的,是跨域的问题,是从别的网页加载数据,还是从服务器加载数据</p>

        <divid="div1"></div>

 

        <pid="pmsg"></p>

    </form>

</body>

</html>

 

利用jQuery实现跨域

利用jQuery实现跨域实际很简单。只要把服务区还回的json数据,加上加上回调函数,就可以实现。

服务端修改后,和jQuery结合实现跨域----修改后的实现代码

 


using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace testjsopGbk

{

    publicpartialclass_Default : System.Web.UI.Page

    {

        protectedvoid Page_Load(object sender, EventArgs e)

        {

            // 摘要:获取或设置输出流的 HTTP 字符集。           

            // 返回结果: System.Text.Encoding 对象,包含与当前响应的字符集有关的信息。

            // 异常:   System.ArgumentNullException:试图将 System.Web.HttpResponse.ContentEncoding 设置为 null。         

                Response.ContentEncoding = Encoding.UTF8;

 

                // 摘要:获取或设置输出流的 HTTP MIME 类型。

                // 返回结果:输出流的 HTTP MIME 类型。默认值为“text/html”。                             

               Response.ContentType = "application/javascript";

               String  jsonContent = "{‘InnerDevId‘:12,‘InnerOrgId‘:13}";  

 

        

 

       

                // 摘要: 获取 HTTP 查询字符串变量集合。

               // 返回结果:System.Collections.Specialized.NameValueCollection,包含由客户端发送的查询字符串变量的集合。例如,如果请求: URL 为 http://www.contoso.com/default.aspx?id=44,则 System.Web.HttpRequest.QueryString的值为“id=44”。

                string dosomething = Request.QueryString["Callback"] == null ? "jsoncallback" : Request.QueryString["Callback"].ToString();

 

                //将字符串写入响应输出流

                /*

                 * 这里将从url动态获取的方法名写到还回数据的前面。

                 */

                Response.Write(dosomething + "(" + jsonContent + ")");

            }

 

        }

    }

}


 

JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的jquery.ajaxjsonp格式和jquery.getScript方式。

 

ajax要在各种浏览器下都实现完美的跨域需要借助于jsonp技术,jsonp实质是请求一个js脚本文件,在js文件载入完毕时执行某个函数,这样就可以完美的规则跨域问题了。

 

什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

跨域 - 自定义 jsonp实现跨域

标签:

原文地址:http://www.cnblogs.com/Blogs-Wang/p/4574002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!