jsonp原理和使用简介

 js 前端 jsonp jquery

jsonp相关

背景：js现在作为主流的连接前后端的工具，最常用的数据格式是json。如果前端页面和服务器在同一个域名下面，数据传输没有问题，但假如你的后台服务和前端代码是部署在不同的域名下，由于js的安全限制，你是不能获取数据的。于是聪明的前端开发人员使用了一种跨域数据交互协议,就是jsonp。

jsonp来源

我们知道,js的跨域调用是可以的，那么我们如果让服务端返回的不仅仅是一段数据，而是一段代码，那么这段代码肯定是可以执行的。这个就是jsonp的基本原理。

看下面一段代码：

我们假设remote.js是远程的js文件，并具内容是：localHandler({"result":"这是服务端要返回的数据"});,那么这个文件会被调用，数据也就传过来了。 使用
现在主流的框架都支持jsonp了，较常用的jqeury可以这样使用:

1. var url = 'http://我的服务器的地址:port/quesetion/hello?callback=?'; $.getJSON(url, function(data) { var content = data[0]; alert(content): } 服务器返回的数据是： Question q = dataService.randomQuestion(null);//这个不用管，只是我的代码 String callBack = req.getParameter("callback"); System.out.println("callback="+ callBack); response.setContentType(RESPONSE_JSON_CONTENTTYPE); PrintWriter writer = response.getWriter(); StringBuilder sb = new StringBuilder(); sb.append(callBack + "([");//这里需要作为一个函数包装起来 sb.append(q.toString()); sb.append("])"); writer.write(sb.toString()); return null;