你的位置:首页 > Java教程

[Java教程]JSONP技术原理及实现


跨域问题一直是前端中常见的问题,每当说到跨域,第一浮现的技术必然就是JSONP

JSONP在我的理解,它并不是ajax,它是在文档中插入一个script标签,创建_callback方法,通过服务器配合执行_callback方法,并传入一些参数

JSONP的局限就在于,因为是通过插入script标签,所以参数只能通过url传入,因此只能满足get请求,特别jQuery的ajax方法时,即使设置type: 'POST',但是只要设置了dataType: 'jsonp',在请求时,都会自动使用GET请求

实现逻辑

step1: 创建_callback方法 (_callback中可以删除script标签和_callback方法)

step2: 插入script标签

step3: 服务器输出js

实现: 

var requestJsonp = function (opt) {  var funName, script;  /*   * step1 创建_callback方法   */   //_callback函数名  funName = '_cb' + (Math.random() * 1000000);  //创建_callback方法  window[funName] = function (data) {    if (typeof opt.success == 'function') {      opt.success(data);    }        window[funName] = null;    delete window[funName];    document.body.removeChild(script);    script = null;  };  /*   * step2 插入script标签   */  script = document.createElement('script');  script.type = 'text/javascript';  script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;  document.body.appendChild(script);  /*   * step3 服务器输出js   * 服务器应接受url参数中_callback的值,作为函数名执行输出js   * 类似输出   * _callback({"name":"jsonp","description":"jsonp test"});   */   /*   * 处理error   */  script.addEventListener('error', function () {    window[funName] = null;    delete window[funName];    if (typeof opt.error == 'function') {      opt.error();    }    document.body.removeChild(script);    script = null;  });};requestJsonp({  url: 'http://www.url.org?tid=Jsx2',  success: function (data) {    console.log(data);  },  error: function () {    console.log('request error!');  }});

对于浏览器的行为就是插入script标签,执行js代码, 删除script标签

实现代码并没有考虑兼容以及传入data后生成url的问题