jsonp学习一认识jsonp

为什么要用jsonp?

由于同源策略，大致理解就是http://www.aa.com不能和http://www.bb.com进行数据沟通。

例如：

$.ajax({ 
url: “http://www.google.com/search?q=jquery“, 
success: function(json){ 
alert(json.count) 
} 
});

上面的代码是向谷歌发送一个搜索请求，关键字是JQuery，将处理后的结果返回到我自己的服务器上面来，很显然是不能实现的。

什么是jsonp？

JSONP(JSON with Padding)是Json的一种“使用模式”，用于解决浏览器跨域数据访问问题。

jsonp原理？

从远程服务器引入js脚本是可行的，不受同源策略的影响。

jsonp获取远程服务器数据流程

如图，在本地上的一个jsp页面中，加入了<script>标签，并指定了要访问的接口并传递了参数callback，http://server.example.com/Users/1234?callback=parseResponse,这个URL请求会进行处理，返回json数据。

例如远程服务器servlet中这样生成js脚本：

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
//接收参数，根据条件获取JSON数据  
String jsonData = getDataAsJson(req.getParameter("symbol"));  
//获取回调函数名 
String callback = req.getParameter("callback");  
//拼接动态JS代码  
String output = callback + "(" + jsonData + ");  
resp.setContentType("text/javascript");  
PrintWriter out = resp.getWriter();   
out.println(output);      
// 输出为 jsonpFunc({"symbol" : "IBM", "price" : "91.42"}); 
}

然后将js脚本加载到本地的jsp页面中。

执行下面的回调函数，处理返回的json数据。

var parseResponse = function(data) {  
        alert(data.result);  
};