Jsonp解决ajax跨域问题

来源：互联网发布：优化的南洋金珠会掉色编辑：程序博客网时间：2024/06/06 10:03

<script type="text/javascript">      function getResult(data){          alert("through jsonp,receive data from other domain : "+data.result);      }      function jsonp_fun(){          $.ajax({              url:'http://localhost:8888/other/other.jsp',              type:'post',              data:{'params':'fromjsonp'},              dataType: "jsonp",              jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)              jsonpCallback:"getResult",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以不写这个参数，jQuery会自动为你处理数据              success: function(data){              },              error: function(){                  alert('fail');              }          });      }  </script>  <body>      <input type="button" value="jsonp" onclick="jsonp_fun()"/>  </body>

这里的jsonCallback，回调函数设置为getResult，那么返回后会先调用getResult函数中的代码，再调用success函数中的代码，一般情况下，不用定义getResult函数，同样jsonCallback不需要设置，那么就只执行success中的代码，也就跟平时的ajax一样用啦。

   function jsonp_fun(){          $.ajax({              url:'http://localhost:8888/other/other.jsp',              type:'post',              data:{'params':'fromjsonp'},              dataType: "jsonp",              jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)              success: function(data){                  alert("through jsonp,receive data from other domain : "+data.result);              },              error: function(){                  alert('fail');              }          });      }

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  <%      String params = request.getParameter("params");      String callback = request.getParameter("callback");      // 经过该接口一系列操作，然后得到data，将data返回给调用者      String data = "{\"result\":\""+params+"\"}";      out.println(callback + "("+data+")");  %>

这里没有指定jsonpCallback，实际上jquery底层拼装了一个函数名，当然生成函数规则就没研究了。

补充：

1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加

0 0