JSONP的 javaScript 和 JQuery 用法

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

注：jsonp的方式只是针对get请求方式，不支持post请求。这也是Jsonp方式的局限性

javaScript 用法

可以通过动态创建script标签或是写入固定的script标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

html代码：

这里的callback是和后台约定的，两边相同即可。调用的方法为自己自定义的方法

image.png

php代码：

7EBAC307-4925-43C9-A512-DDC16D9E2BE5.png

运行结果：

image.png

jQuery 用法

jQuery本身就支持JSONP，jQuery封装的$.ajax中有一个dataType属性，将该属性设置成dataType:"jsonp"，就能指定按照jsonp方式访问远程服务从而实现JSONP跨域了。

注意：虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。如果设为dataType: 'jsonp'，这个$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。

参数	描述
URL	发送请求的地址
type	请求方式默认为get
dataType	JSONP格式。使用SONP形式调用函数时，例如callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数
jsonp	在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
jsonpCallback	实现跨域请求的时候定义回调函数用的，用于添加自己的回调函数,无此项则回调函数默认为success
async	默认设置为true，所有请求均为异步请求
data	需要传到后台的数据
success	成功之后执行的方法

HTML代码：

image.png
也可以直接在url里面传递数据

url: "http://10.80.1.211/PHP/json_jsonp/jsonp.php?name=胡自鲜&sex=女",
data:{},

php代码：

image.png

运行结果：

image.png

我的博客链接

更多资源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io