[精品]jQuery用jsonp实现有限制的跨域请求

jQuery用jsonp实现有限制的跨域请求

浏览器一般意义上是禁止跨域请求的，这是从安全方面来考虑的。但是如果我们的业务是分布式的！这就会产生问题，这在云计算之风大起的今天是个重要问题。一下讲的是一种有限制的跨域请求实现。

jsonp基本原理：

插入<script>标签：这个script标签的scr是没有跨域限制的，所以我们可以插入这样一个标签如下：

<script type="text/javascript" src="http:跨域的请求/getList.js"/>

js里面的实际内容则是：

jsonpcallback("data");

这样一旦获取了js文件之后，jsonpcallback函数就会执行。而jsoncallback函数的真正实体事先已经定义好了。

jQuery实现jsonp：

浏览器端：

$.getJSON("http:/跨域的请求/getList.js?data=jsondata&jsoncallback=?",

        function(data){

          $.each(data.items, function(i,item){

            $("<img/>").attr("src", item.media.m).appendTo("#images");

            if ( i == 3 ) return false;

          });

});

服务器端（Java）：

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) 

  throws ServletException, IOException {

String jsonData = getDataAsJson(req.getParameter("data"));

String output = req.getParameter("jsoncallback") + "(" + jsonData + ");";

resp.setContentType("text/javascript");

          

PrintWriter out = resp.getWriter();

out.println(output);

// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});

}

请求url中的jsoncallback=?就是指定了回调函数也就是getJSON的下一个参数，具体是什么名字则是由jQuery自动生成一个不会重复的函数名，例如：jsonp1232617941775