平时项目中处理ajax跨域资源请求时,例如www.example2.com上的某个页面要请求www.example1.com的数据,咱们使用得较多的是jsonp方式。jsonp经过JavaScript callback的形式实现跨域访问,其实现原理是:前端
在 Web 页面中插入动态脚本元素,该页面源指向其余域中的服务 URL 而且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,由于同源策略不阻止动态脚本插入,而且将脚本看做是从提供 Web 页面的域上加载的。经过script标签实现跨域请求,而后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。jquery
前端使用jsonp的demo:ajax
1. 使用jquery或zeptojson
其中callback是前端准备好的回调函数,在ajax请求中,会附加在get请求url的参数后面。服务器端以JavaScript语法的方式生成一个function,function的名字就是传递过来的callback。如getresult.cgi返回如下结果:跨域
callback({'ret':0, 'data':[]});浏览器
客户端浏览器解析script标签(jqeury和zepto的实现代码中,动态生成了script标签并添加到页面中),并执行返回的JavaScript语句。服务器
2. 直接建立script标签函数
在须要跨域请求的地方,动态建立script标签,并添加到页面中。jsonp
脚本加载后当即执行callback,即实现了跨域请求。url
注意:jsonp只能处理get请求。