zoukankan      html  css  js  c++  java
  • 跨域

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

    办法:通过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的数据方式调用。

  • 相关阅读:
    【开源】使用Angular9和TypeScript开发RPG游戏
    [开源]开放域实体抽取泛用工具 NetCore2.1
    【开源】C#信息抽取系统【招募C#队友】
    自然语言处理真实项目实战(20170830)
    自然语言处理真实项目实战(20170822)
    智慧航空AI大赛-阿里云算法大赛总结 第一赛季总结
    iOS11和机器学习CoreML库
    [不定期更新长文]卷积神经网络工作原理研究
    微服务SpringCloud之GateWay熔断、限流、重试
    微服务SpringCloud之GateWay服务化和过滤器
  • 原文地址:https://www.cnblogs.com/Blogs-Wang/p/4574002.html
Copyright © 2011-2022 走看看