网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例;
前言:
ajax请求地址:http://192.168.1.102:8080/carop/jsonp
服务端要返回的jsonp字符串:jsonpCallback({“name”:”刘德华”,”电话”:”17688888888″})
jsonp写法,写法上可以理解成一个javascript函数的执行,例如alert(“hello world”)会弹出hello world的窗口,再例如alert({“name”:”刘德华”})会弹出[object Object]的
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签不受同源策略限制的特性,允许网页从其他域名获取数据。在JavaScript中,由于浏览器的安全策略,通常不允许从一个域名下的网页向另一个域名发送Ajax请求。而JSONP提供了一种绕过这种限制的方式。
标题中的"jsonp跨域请求实现示例",是指通过JSONP技术实现不同源之间的数据通信。描述中提到的"ajax请求地址"和"服务端要返回的jsonp字符串",分别代表客户端发起请求的URL和服务器端应返回的JSONP格式的数据。
在JSONP中,客户端(浏览器)需要创建一个预先定义好的函数,这个函数的名称在请求中作为参数传递给服务器。服务器收到请求后,将数据封装在这个函数调用中返回,这样浏览器就能执行这个包含数据的函数,从而实现了跨域数据交换。
示例中,客户端使用jQuery的`$.ajax`方法发起JSONP请求。关键参数包括:
- `dataType: "jsonp"`:指定请求类型为JSONP。
- `jsonpCallback: "jsonpCallback"`:定义了回调函数名为`jsonpCallback`。这是服务器返回的JSONP字符串中应该包裹的数据。
服务器端,以Java的Servlet为例,响应客户端的请求,需要将数据包装在指定的回调函数名中。这里服务器接收GET请求,然后构造一个JSONP响应,其内容为`jsonpCallback({"name":"刘德华","tel":"17688888888"})`。这个响应直接被浏览器解析并执行,调用了预先定义好的`jsonpCallback`函数,并将数据作为参数传递。
需要注意的是,JSONP只支持GET请求,因为`<script>`标签只能加载GET请求的资源。同时,由于所有的数据都在服务器端生成的JavaScript代码中,因此服务器必须是可信的,否则可能会遭受XSS(跨站脚本攻击)。
总结起来,JSONP是一种解决浏览器同源策略限制的跨域数据交互方式,它通过动态插入`<script>`标签,让服务器返回一个JavaScript函数调用,函数体中包含要传递的数据。客户端通过预定义该函数来接收和处理数据。在上述示例中,客户端使用jQuery发起JSONP请求,服务器端用Java Servlet构建JSONP响应,实现了跨域数据的获取。