在浏览器中，页面跨域访问服务器资源是不被允许的。跨域指的是协议、IP、端口，三者任何一个没有和当前页面一致，浏览器就判定为跨域，不让你访问资源，ajax无法发起请求。JSONP是一种简单、常见的跨域方法，它只适用于get请求，简单的数据交互，大的图片、页面之类的信息适合。
js中采用生成src 标签跨域，将js中内容引到当前页面，达到跨域的目的。js的url中带有callback=jsonpCallback的参数，一般参数名是callback，我在书写时参数名必须是callback 换一个参数名出错，目前不知道原因
/** * 测试 * 调用第三方接口 */ function checkWeiDun(){ var checkMac=ac=document.getElementByItById("mac").value; checkFlag = false; var jsonpUrl =" ="http://192.168.54.109:8080/common/xheducation/jsonp? callback=jsonpCallback&mac="+checkMac; //后台拦截到callback，知道要生成一个调用方法，方法名是jsonpCallback，并传递参数 //然后前端通过script标签去访问并执行，上面的东西 var script = = document.createElementment('script'); script.setAttribute(ute('src', jsonpUrl); // 把script标签加入head，此时调用开始 document.getElementsBytsByTagName('head')[0].appendChild(script); //然后就会调用页面的jsonpCallback方法，这就是jsonp的实现原理。 } function jsonpCallback(result){ if(result){ checkFlag=true; alert(rt(result.time); }else{ checkFlag=false; } }jquery中封装了JSONP的ajax请求，很方便、推荐使用。jquery 封装的请求中dataType 是jsonp，告诉ajax这是跨域请求。jquery中的url中默认会添加一个参数callback，并随机生成一个参数值，这个值就是回调函数名，一般是这种形式url+"callback=？"，?就是随机数，为了回调函数容易管理，一般指定回调函数名jsonpCallback，或者服务器直接写死回调函数名。
/** *@dataType (String) *"xml": 返回 XML 文档，可用 jQuery 处理。 *"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。 *"script": 返回纯文本 JavaScript 代码。 *"json": 返回 JSON 数据 。 *"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 *"text": 返回纯文本字符串 */ /** *@jsonp (String)在一个jsonp请求中重写回调函数的名字。 *这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分， *比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 */ /** *@jsonpCallback (String) *为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。 *这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。 *你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。 */ /** * url http://192.168.54.109:8080/common/xheducation/jsonp?callback=? http://192.168.54.109:8080/common/xheducation/jsonp?callbacktest=? http://192.168.54.109:8080/common/xheducation/jsonp?callbacktest=successCallback */ $.ajax({ url: 'http://192.168.54.109:8080/common/xheducation/jsonp', dataType: "jsonp", jsonp: "callbacktest", //将默认的参数名callback变成callbacktest jsonpCallback: 'successCallback' //将jquery随机生成的callbacktest=？参数变成callbacktest=successCallback }); function successCallback(data) { }Angular Js 中也对跨域请求进行了封装，method指定为JSONP 并且在url后面添加参数callback=JSON_CALLBACK，JSON_CALLBACK是回调的函数名，服务器返回的jsonpObject名字必须是JSON_CALLBACK，不然Angular Js无法解析返回的信息
var jsonpUrl ="http://192.168.54.113:8080/common/xhjy/jsonp?callback=JSON_CALLBACK"; $http({ method: 'JSONP' , url: jsonpUrl , headers: { "Content-Type" : "appliction/json;charset=utf-8" } }).success( function(data, status, headers, config){ alert(111); }).error( function(response, status, headers, config){ alert(222); }) ;
