jsonp 请求和回传实现

摘要:
JSONP最重要的一点是它可以解决跨域问题。否则,谁将使用此格式。它是一个非官方协议,允许在服务器端集成Scripttag并将其返回到客户端,以javascript回调的形式实现跨域访问。是的,它是一种协议,而不是数据格式。起初,我被ghost数据类型“jsonp”误导了。我们根本不需要考虑格式。我们只需要注意几个方面:1.jsonp:“callback”,jsonpCallback:“userHandler”。这两个可以自定义,也可以不定义。为了可读性,建议自定义它们。

  JSONP最主要的是可以解决跨域问题,不然谁会没事用这种格式。

  下面是我用JSONP的一些心得体会:

 JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。对,它就是一种协议,不是数据格式,开始我也被

dataType: "jsonp"这个鬼东西误导了,我们根本不需要考虑格式问题,该返回什么格式就返回什么格式,只要注意几个地方就可以了:

1. jsonp: "callback",jsonpCallback:"userHandler",这两个可以自定义也可以不定义,为了可读性建议还是自定义好。
$.ajax({
           url: "http://172.25.19.63:8084/web/",
           type: "post",
           dataType: "jsonp",
           jsonp: "callback",
           jsonpCallback:"userHandler",
//           contentType: 'application/json',
//           data:JSON.stringify(json),
           data:{password: "password",
               username: "username"},
           success: function(data){
               alert(data.name)//得到”忍着不哭泣“
      },
      error: function(data){
         alert(data.status);//调用状态
      }
});
2.  在服务器端callback = resquest.getParamter("callback")取到的值是"userHandler",然后如下图拼装起来写入response里面就OK了
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      callback = resquest.getParamter("callback")//取到的值应该是userHandler
      PrintWriter out = response.getWriter();
      String json = {"name":"忍着不哭泣"}
      out.println(callback+"("+json+")");
      out.close();
}

3.上图是json格式字符串(可以其他格式)客户端就会取到json对象。

Jsonp原理: 
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

免责声明:文章转载自《jsonp 请求和回传实现》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Bootstrap入门(二十四)data属性【Java 校验框架 Validation 】-解决方式下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

linux rsync 指定用户名和密码的方式同步(转)

rsync 客户端 172.17.0.29 rsync 服务端 --daemon  方式运行 172.17.0.31 备份端 以下首先说明服务端的安装情况: 1  检查是否安装rsync     rpm -qa rsync     rsync-3.0.6-12.el6.x86_64  如果没有安装进行yum 安装即可     yum install -y...

python 读取串口数据常用函数及实例分析

前记: 人生苦短,我用python,python在做一些算法验证和接口验证方面,的确是非常的好用。读取串口经常用到,这里就做个总结,给自己和周围的人做个备忘吧。 函数解析: 初始化串口数据: importserial #Serial takes two parameters: serial device and baudrate ser = serial....

vis.js 关系图 插件 配置项

vis.js 关系图 插件 配置项 关系图的配置 var options = { nodes: { borderWidth: 1, borderWidthSelected: 1, brokenImage: undefined, chose...

高德JSAPI获取当前所在位置的经度纬度

这是在浏览器中的效果: 控制台打印出来的就是经度纬度的值 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge...

Indigo参考 (2) DataContract 使用 详解(转)

在阅读之前,请先阅读我写过的第一篇有关Indigo的文章. Data Contract是用来定义Indigo Service与Client端之间用来交换的数据的格式,如果我们需要传递自定义的数据,那么就需要将其定义为符合Indigo规范的Data Contract。数据里面的每一个数据项,被成为Data Member。 [DataContract] pu...

跨域

跨域:协议、域名、端口、任何一个不一样,都是跨域; 1、浏览器处于安全的考虑限制 2、跨域 3、XHR(XMLHttpRequest)请求 这三个同时满足即为跨域; 原因:来源于跨域安全策略,默认情况,XHR(XMLHttpRequest)对象只能访问与包含它的页面位于同一个域中的资源,这种安全策略可以预防恶意行为; 解决思路:只要发出的不是XHR(XML...