AjaxAngular jsonp 同源策略的题目

引用:http://www.cnblogs.com/dengzy/p/5388357.html

说交AJAX就见面不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二只是跨域的求如何化解?数据好为此由定义字符串或者用XML来叙述,跨域可以经劳动器端代理来化解。最让尊重或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。JSON是同样种多少交换格式,而JSONP是同一栽据开发人员的才智创造有的一样种不法跨域数据交互协议。

JSON的格式:

  JSON能够以非常简单的章程来讲述数据结构,XML能开的其都能做。

  1、JSON只发生星星点点种多少列描述符,大括声泪俱下{}和方括号[],其余英文冒号:是映射符,英文逗号,是劈隔符,英文双引号””是定义符。

  2、大括如泣如诉{}用来描述一组“不同品种的无序键值对聚集”(每个键值对可掌握呢OOP的性描述),方括号[]为此来讲述一组“相同类别的雷打不动数据集合”(可对应OOP的数组)。

  3、上述两栽集合中若发生多独子项,则通过英文逗号,进行分隔。

  4、键值对因英文冒号:进行分隔,并且建议键名都加上英文双引号””,以便为不同语言的分析。

5、JSON内部常因此数据类型无非就是是字符串、数字、布尔、日期、null 这么几独,字符串必须用对引号引起来,其余的且不用,日期类型比较特别,这里就是非开展叙述了,只是建议要客户端从未如约日期排序功能需求的口舌,那么把日子时一直当做字符串传递就吓,可以节约很多难为。

JSON实例:

var person = {                   // 描述一个丁 

    “Name”: “Bob”,

    “Age”: 32,

    “Company”: “IBM”,

    “Engineer”: true

}

var personAge = person.Age;        // 获取之人口的音信      

var members = [                    // 描述几单人口

    {

        “Name”: “Bob”,

        “Age”: 32,

        “Company”: “IBM”,

        “Engineer”: true

    }, {

        “Name”: “John”,

        “Age”: 20,

        “Company”: “Oracle”,

        “Engineer”: false

    }, {

        “Name”: “Henry”,

        “Age”: 45,

        “Company”: “Microsoft”,

        “Engineer”: false

    }

]

var johnsCompany = members[1].Company;  // 读取其中John的合作社名称

var conference = {                       // 描述一坏会议

    “Conference”: “Future Marketing”,

    “Date”: “2012-6-1”,

    “Address”: “Beijing”,

    “Members”:

    [

        {

            “Name”: “Bob”,

            “Age”: 32,

            “Company”: “IBM”,

            “Engineer”: true

        }, {

            “Name”: “John”,

            “Age”: 20,

            “Company”: “Oracle”,

            “Engineer”: false

        }, {

            “Name”: “Henry”,

            “Age”: 45,

            “Company”: “Microsoft”,

            “Engineer”: false

        }

    ]

}

var henryIsAnEngineer = conference.Members[2].Engineer; // 读取参会者Henry是否工程师  

JSONP是怎发的

 1、一个分明的问题,Ajax直接呼吁普通文书在跨域无权力访问的题目,甭管您是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律取缔;

 2、不过我们同时发现,Web页面上调用js文件时则非为是否跨域的影响(不仅如此,我们还发现凡是有”src”这个特性之标签都有所跨域的能力,比如<script>、<img>、<iframe>);

 3、于是可以看清,当前等如果想通过纯web端(ActiveX控件、服务端代理、属于未来之HTML5底Websocket等艺术不到底)跨域访问数就单发相同种或,那即便是在长距离服务器上设法将数量作进js格式的文本里,供客户端调用和越来越处理;

 4、恰巧我们既知道有同等栽名叫JSON的纯字符数量格式可以简单的叙述复杂数据,更了不起的是JSON还让js原生支持,所以当客户端几乎可自由的处理这种格式的数额;

 5、这样子解决方案就是呼的要来了,web客户端通过和调用脚本一模一样的不二法门,来调用跨域服务器上动态变化的js格式文件(一般为JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就是在于管客户端需要之数据装入进去。

  6、客户端在对JSON文件调用成功之后,也尽管获了和谐所欲的多少,剩下的虽是遵循好需求进行拍卖同展现了,这种获取远程数据的艺术看起非常像AJAX,但实则并无一样。

  7、为了好客户端应用数据,逐渐形成了平等种非正式传输协议,人们管它称作JSONP,该谋的一个要义就是容用户传递一个callback参数为服务端,然后服务端返回数据时会将以此callback参数作为函数叫作来包裹已JSON数据,这样客户端就足以随意定制好的函数来机关处理回来数据了。

JSONP的客户端具体落实:

jQuery也好,ExtJs也罢,又或者是别支持jsonp的框架

跨域js文件中之代码(当然指合web脚本安全策略的),web页面也是可无条件履行之。

服务端返回http://flightQuery.com/jsonp/flightResult.aspx

flightHandler({

    “code”: “CA1998”,

    “price”: 1780,

    “tickets”: 5

});

jsonp.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns=”http://www.w3.org/1999/xhtml"&gt;

<head>

    <title></title>

    <script type=”text/javascript”>

    // 得到航班信息查询结果后底回调函数

    var flightHandler = function(data){

        alert(‘你询问的航班结果是:票价 ‘ + data.price + ‘ 元,’ + ‘余票 ‘ + data.tickets + ‘ 张。’);

    };

    // 提供jsonp服务之url地址(不管是啊类型的地方,最终生成的归值都是千篇一律段落javascript代码)

    var url = “http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler”;

    // 创建script标签,设置其属性

    var script = document.createElement(‘script’);

    script.setAttribute(‘src’, url);

    // 把script标签进入head,此时调用开始

    document.getElementsByTagName(‘head’)[0].appendChild(script);

    </script>

</head>

<body>

</body>

</html>

jQuery如何实现jsonp调用

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

 <html xmlns=”http://www.w3.org/1999/xhtml” >

 <head>

     <title>Untitled Page</title>

      <script type=”text/javascript” src=jquery.min.js”></script>

      <script type=”text/javascript”>

     jQuery(document).ready(function(){

        $.ajax({

             type: “get”,

             async: false,

             url: “http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998”,

             dataType: “jsonp”,

             jsonp: “callback”,

//传递让要处理程序或页面的,用以获得jsonp回调函数称之参数称(一般默认为:callback)

             jsonpCallback:”flightHandler”,

//自定义的jsonp回调函数名,默认为jQuery自动生成的擅自函数称呼,也堪写”?”,jQuery会自动为公处理数量

             success: function(json){

                 alert(‘您查询到航班信息:票价: ‘ + json.price + ‘ 元,余票: ‘ + json.tickets + ‘ 张。’);

             },

             error: function(){

                 alert(‘fail’);

             }

         });

     });

     </script>

     </head>

  <body>

  </body>

 </html>

 

说明

  1、ajax和jsonp这片种植技术于调用方式上“看起”很像,目的为同样,都是呼吁一个url,然后将服务器返回的数目进行拍卖,因此jquery和ext等框架都拿jsonp作为ajax的平种植样式开展了包装;

  2、但ajax和jsonp其实本质上是殊的东西。ajax的为主是经XmlHttpRequest获取非本页内容,而jsonp的中心则是动态添加<script>标签来调用服务器提供的js脚本。

  3、所以说,其实ajax与jsonp的界别不在于是否跨域,ajax通过服务端代理一样好兑现跨域,jsonp本身为非排斥同域的数目的获得。

  4、还有就是是,jsonp是相同种植艺术还是说不强制性协议,如同ajax一样,它呢不肯定不要是因此json格式来传递数据,如果您肯,字符串都执行,只不过这样不便民用jsonp提供公开服务。

jquery在处理jsonp类型的ajax时已把jsonp归入了ajax

 

angularJS中jsonp的使用

myUrl = “http://localhost:8090/[api](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=c9b83b45d6fdac5b&k=api&k0=api&kdi0=0&luki=9&mcpm=0&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=5bacfdd6453bb8c9&ssp2=1&stid=9&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http:%2F%2Fwww.bubuko.com%2Finfodetail-748374.html&urlid=0)/testcallback=JSON\_CALLBACK”;

$http.jsonp(myUrl).success(
  function(data){

    alert(data);

  }

);

1.angularJS中使用$http.jsonp函数

2.点名callback和回调函数称呼,函数称呼也JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须备呢老写。

3.啊可指定其他回调函数,但得是概念在window下之大局函数。

4.url遭受须长callback

5.当callback为JSON_CALLBACK时,只会调用success,即使window中产生JSON_CALLBACK函数,也未会见调用该函数。

 

 

浏览器是存在同源策略是机制的,在大局层面禁止了页面加载或施行与本人来源不同之地带的别脚本。

JSONP是千篇一律种好绕了浏览器的安全限制,从不同之域请求数据的艺术。

 

Jquery中jsonp的使用

myUrl = “http://localhost:8090/api/test”;

$.ajax({

  type:”GET”,

  url:myUrl,

  dataType:”jsonp”,

  jsonp:”callback”,

  jsonpCallback:”jsonpCallback”,

  success:function(data){

    alert(data.msg);

  }

});

function jsonpCallback(data){

  alert(data);

}

1.jsonp不得不动用get请求,解决同源问题,返回javascript代码,因为要javascript文件是没有同源问题之。

2.当告数据列也jsonp时,会将callback=jsonpCallback加在url上,http://localhost:8090/api/testcallback=jsonpCallback

3.面前台javascript中定义jsonpCallback函数,此函数必须定义在window下,也尽管是全局的函数,否则找不至。

4.后大博请求的callback参数值jsonpCallback,返回字符串”jsonpCallback(result)”,result为回去结果。

5.伸手返回的凡script tag,首先会调用jsonpCallback函数,不管是否找到该函数,都见面调用success函数。

6.如果没有定义jsonp和jsonpCallback,jsonp默认为”callback”,jsonpCallback会是Jquery自动生成的函数名为。

相关文章