您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息
三六零分类信息网 > 宝鸡分类信息网,免费分类信息发布

Jsonp的原理以及简单实现的方法

2024/5/12 17:42:41发布45次查看
功能jsonp是json的一种使用模式,用来解决主流浏览器的跨域数据访问的问题.因为同源策略,页面是无法直接与其他不同源的页面沟通的.利用script元素的这个开放策略,网页可以得到从其他来源动态产生的 json 资料,而这种使用模式就是所谓的 jsonp。用 jsonp 抓到的资料并不是 json,而是任意的javascript,用 javascript 直译器执行而不是用 json 解析器解析。
同源:指协议,域名,端口相同.当浏览器的页面执行一个脚本时会检查这个脚本是属于哪个页面的,只有和这个页面同源的脚本才会执行,否则控制台会报错.
原理在客户端用script标签,获取jsonp格式的数据(用 jsonp 抓到的资料并不是 json,而是任意的javascript,用 javascript 直译器执行而不是用 json 解析器解析),同时执行一个jsonp的callback函数,要执行这个callback函数,就要在客户端先定义这个callback函数。
简单实现这是我找到的一个比较简单的实现:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>top customers with callback</title></head><body> <p id="pcustomers"> </p> <script type="text/javascript"> function oncustomerloaded(result, methodname) { var html = '<ul>'; for (var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getelementbyid('pcustomers').innerhtml = html; } </script> <script type="text/javascript" src="http://www.yiwuku.com/myservice.aspx?jsonp=oncustomerloaded"></script></body></html>
比如客户想访问http://www.yiwuku.com/myservice.aspx?jsonp=callbackfunction
假设客户期望返回json数据:[“customername1”,”customername2”]
那么真正返回到客户端的script tags: callbackfunction([“customername1”,”customername2”])
以上就是jsonp的原理以及简单实现的方法的详细内容。
宝鸡分类信息网,免费分类信息发布

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录