Jsonp 跨域的原理以及Jquery的解决方案

来源：互联网发布：南红烤色优化编辑：程序博客网时间：2024/05/22 00:33

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。

原理：JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

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

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

<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd"> <html xmlns="http://www.worg/xhtml" > <head> <title>Test Jsonp</title> <mce:script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" mce_src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></mce:script><mce:script type="text/javascript"></mce:script> </head> <body> <mce:script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonpCallback" mce_src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonpCallback"></mce:script> </body> </html>

jQuery的解决方案：

<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd"> <html xmlns="http://www.worg/xhtml" > <head> <title>Test Jsonp</title> <mce:script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" mce_src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></mce:script><mce:script type="text/javascript"></mce:script> </head> <body></body> </html>

jquery 的jsoncallback是动态生成的，真正请求服务器的地址：http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738

服务端：比如调用的是一个servlet.返回值，out.print("callback('param')");