公司网站建设要多少钱,网站中怎么做图片的变换,虚拟空间网站回收池有什么作用,wordpress在本地打开JSONP是一个非官方的协议#xff0c;它允许在服务器端集成Script tags返回至客户端#xff0c;通过javascript callback的形式实现跨域访问#xff08;这仅仅是JSONP简单的实现形式#xff09;。本文主要介绍JSONP跨域原理#xff0c;一起来看。 JSONP是一个非官方的协议它允许在服务器端集成Script tags返回至客户端通过javascript callback的形式实现跨域访问这仅仅是JSONP简单的实现形式。本文主要介绍JSONP跨域原理一起来看。 JSONP是一个非官方的协议它允许在服务器端集成Script tags返回至客户端通过javascript callback的形式实现跨域访问这仅仅是JSONP简单的实现形式。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法以活动为中心一连串的活动的顺序组合成一个完整的工作进程。 之所以会有跨域这个问题的产生根本原因是浏览器的同源策略限制理解同源策略的限制同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。 解决这个限制的一个相对简单的办法就是在服务器端发送请求服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。 另一个办法就是使用框架(frames)将第三方站点的资源包含进来但是包含进来的资源同样要受到同源策略的限制。 有一个很巧妙的办法就是在页面中使用动态代码元素代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败幸运的是我们可以使用JSON(JavaScript Object Notation)来改进这个应用。 JSON和JSONP 与XML相比JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。 例如一个ticker对象 var ticker {symbol:IBM,price:100} 而JSON串就是 {symbol:IBM,price:100} 这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据但是我们的目的并不是这个。 通过使我们的函数能够加载动态的JSON数据我们就能够处理动态的数据这项技术叫做 Dynamic Javascript Insertion。 我们看下面的例子 index.html中 1 script typetext/javascript
2 function showPrice(data){ alert(Symbol: data.symbol , Price: data.price); }
3 var url ticker.js; //Outer JS URL
4 var script document.createElement(script);
5 script.setAttribute(src, url); //load javascript document.getElementsByTagName(head)[0].appendChild(script); /script ticker.js中 var data {symbol:IBM, price:100};
showPrice(data); 上面的代码通过动态加入Javascript代码来执行函数加载数据。 正如之前提到过的同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码来执行在他们代码中的JSON数据。 这就是JSONP(JSON with Padding)。注意使用这种方法时你必须在页面中定义回调函数就像上例中的showPrice一样。 我们通常所说的JSONP服务(远程JSON服务)实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。 然后执行这个函数处理JSON数据并显示在客户页面上。 JQuery的JSONP支持 从JQery 1.2以后就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称你就可以用下面的形式来就加载JSON数据。 url?callback? 示例 1 jQuery.getJSON(url callbak?, function(data) { alert(Symbol: data.symbol , Price: data.price); }); jquery会在window对象中加载一个全局的函数当代码插入时函数执行执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化如果这个请求是在同一个域名下那么他就会像正常的Ajax请求一样工作。 上例中我们在动态插入到页面的代码中使用了静态的json数据虽然完成了依次JSONP返回但仍不是JSONP服务因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法 服务器端使用PHP。 首先我们来定义接口的规范就像这样http://www.mydomain.com/jsonp/ticker?symbolIBMamp;callbackshowPricesymbol是请求条件callback是回调函数名称。 在页面文件中我们使用JQuery的支持 1 //JQuery JSONP Support var url http://www.mydomain.com/api/suggest.php?symbolIBMcallback?;
2 jQuery.getJSON(url, function(data){
3 alert(Symbol: data.symbol ,
4 Price: data.price);
5 }); 在suggest.php中 1 $jsondata {symbol:IBM, price:120};
2 echo $_GET[callback].(.$jsondata.); 再举个.NET webservice 的例子 客户端 View Code 1 $.getJSON(
2 http://192.168.0.66/services/WebService1.asmx/ws?callback?,
3 { name: ff, time: 2pm },
4 function(data) { alert(decodeURI(data.msg)) }
5 ); 服务器端 View Code 1 [WebMethod] public void ws(string name,string time) { HttpRequest Request HttpContext.Current.Request; string callback Request[callback]; HttpResponse Response HttpContext.Current.Response; Response.Write(callback ({msg:this isnamejsonp})); Response.End(); } 现在如果我们想制作一些mashup或者将第三方的资源整合到一个页面中我们就很容易想到JSONP的解决方法了。 注意 JSONP是一个非常强大的构建mashp的方法可是不是一个解决跨域访问问题的万能药。它也有一些缺点 第一也是最重要的JSONP不提供错误处理。如果动态插入的代码正常运行你可以得到返回但是如果失败了那么什么都不会发生。你无法获得一个404的错误也不能取消这个请求。 另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。 转自http://developer.51cto.com/art/201105/264791.htm 转载于:https://www.cnblogs.com/yja9010/archive/2012/12/06/2806301.html
