jsonp的工作原理,jsonp是什么,怎样实现的,JSONP 的原理、理解与实例分析

本文主要介绍了JSONP的原理、理解和实例，并结合实例分析了JSONP的基本概念、原理、理解和使用技巧。有需要的可以参考一下。

本文介绍了JSONP的原理、理解和实例。分享给你，供你参考，如下：

1.什么是jsonp

1.1同源策略

由于浏览器同源策略的限制，XmlHttpRequest只允许请求当前源的资源(相同的域名、协议、端口)。

-1)jsonp只支持get请求。

-2)不受同源策略限制，兼容性好。它不需要XMLHttpRequest(ActiveX)支持，通过js回调函数返回结果。

-3)无法解决不同域的两个页面之间的js调用问题

2. jsonp 原理

动态添加一个脚本标签，在get链接上发送回调函数名给服务器，获取回调函数名。此函数名返回的js函数(汇编函数)的json数据作为函数的实际参数传入。返回的数据是JS函数在前端调用回调函数(json数据传入)执行回调函数。

3.实例

先说服务器要返回的数据表单，如下图。php thinphp框架写的访问URL是

http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback后面的名字=jsonpCallback callback要传到服务器后端，组装成一个js回调函数，这样前端的json数据就会作为回调函数的参数传入来获取数据。

公共函数testJsonP(){

$ JSON name=I(' get . callback ')；//获取URL上的回调名，即获取jsonpCallback

$a=[name='张三'，sex='男'，msg='成功返回！'];//数据数组

$ JSON=JSON _ encode($ a)；//转换为json数据

echo $jsonname。'('.$json。');'；//正确的格式应该是jsonp回调({'name':' \ u5f20 \ u4e09 '，' sex':' \ u7537 '，' msg ':' \ u8fd 4 \ u56de \ u 6210 \ u529f \ uff 01 ')不要忘记分号；这是一个返回的js函数。前台必须有这个函数名。

}

提示：上面的关联数组$a=array( 'msg'='成功返回！')

访问URL http://localhost:63343/H5/jsonp . html动态添加脚本标签，调用src中的回调函数jsonpCallback()。callback=jsonpCallback的名字就是jsoncallback的名字。

！文档类型html

超文本标记语言

头部语言

meta charset='UTF-8 '

标题/标题

/头

身体

脚本类型='文本/javascript '

函数jsoncallback(date){

console.log(日期)；

警报(日期)；

alert(date . msg)；

}

var script=document . createelement(' script ')；

script . src=' http://91 hx . xicp . cn:8989/Service/Validata/test jsonp？callback=jsoncallback '；

document . body . insert before(script，document . body . first child)；

/脚本

/body

/html

我们可以在浏览器中使用Google here直接检查数据访问是否正确，切换到网络选项卡就可以看到生成的访问地址，点击然后

如下图，点击左边的链接切换到响应，可以看到响应的数据。应该和前端写的函数名一致。里面的json数据就是那个函数的参数。别忘了有分号。

我们在前端有Console.log数据，我们还可以查看它并切换到Console选项卡。

对更多JavaScript相关内容感兴趣的读者可以查看我们的专题：《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》和《JavaScript数学运算用法总结》。

希望这篇文章对大家的JavaScript编程有所帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读