JSONP

JSONP利用，并提供一个回调函数来接收数据，函数名可约定，通过地址参数传递，第三方的响应为一个json包装的数据，（称为jsonp, json padding）JSONP_oppoNewsgetRelativeRecList_26427578({"code":0,"data":[], "desc": ""}) 后端返回的是调用callback的js代码，浏览器加载这段代码后，会调用callback函数，并传递解析后json对象作为参数执行

基本原理：

• html标签的src属性没有同源限制，浏览器解析

  完善版本

  function ajax(options) {
    function setData() {
      var map = {};
  
      if (typeof data === 'string') {
        data.split('&').forEach(function(item) {
          var tmp = item.split('=');
          map[tmp[0]] = tmp[1];
        });
      } else if (typeof data === 'object') {
        map = data;
      }
  
      if (dataType === 'jsonp') {
        var timeName;
  
        if (jsonpCache > 0) {
          timeName = parseInt(Date.now() / (jsonpCache * 1000 * 60));
        } else {
          timeName = Date.now() + Math.round(Math.random() * 1000);
        }
  
        callback = callback
          ? ['JSONP', callback, timeName].join('_')
          : ['JSONP', timeName].join('_');
        map['callback'] = callback;
      }
  
      var arr = [];
      for (var name in map) {
        var value = (map[name] && map[name].toString()) || '';
        name = encodeURIComponent(name);
        value = encodeURIComponent(value);
        arr.push(name + '=' + value);
      }
      map = arr.join('&').replace('/%20/g', '+');
  
      if (type === 'get' || dataType === 'jsonp') {
        url += url.indexOf('?') > -1 ? map : '?' + map;
      }
    }
  
    // JSONP
    function createJsonp() {
      window[callback] = function(data) {
        clearTimeout(timeoutFlag);
        script.parentNode.removeChild(script);
        success(data);
      };
  
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
  
      setTime(callback, script);
  
      script.onerror = script.onreadystatechange = function() {
        if (
          !this.readyState ||
          ((this.readyState === 'loaded' || this.readyState === 'complete') &&
            !window[callback])
        ) {
          delete window[callback];
          script.onload = script.onreadystatechange = null;
          script.parentNode.removeChild(script);
          clearTimeout(timeoutFlag);
          error(new Error('ajax_load_error'));
        }
      };
  
      document.body.appendChild(script);
    }
  
    // 设置请求超时
    function setTime(callback, script) {
      if (timeOut !== undefined) {
        timeoutFlag = setTimeout(function() {
          if (dataType === 'jsonp') {
            delete window[callback];
            script.parentNode.removeChild(script);
            error(new Error('ajax_load_timeout'));
          } else {
            timeoutBool = true;
            xhr && xhr.abort();
          }
          console.warn('timeout:: ', url);
        }, timeOut);
      }
    }
  
    function createXHR() {
      xhr = new XMLHttpRequest();
      xhr.open(type, url, async);
  
      if (type === 'post' && !contentType) {
        xhr.setRequestHeader(
          'Content-Type',
          'application/x-www-form-urlencodedcharset=UTF-8',
        );
      } else if (contentType) {
        xhr.setRequestHeader('Content-Type', contentType);
      }
  
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (timeOut !== undefined) {
            if (timeoutBool) {
              return;
            }
            clearTimeout(timeoutFlag);
          }
  
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            success(xhr.responseText);
          } else {
            error(xhr.status, xhr.statusText);
          }
        }
      };
  
      xhr.send(type === 'get' ? null : data);
      setTime();
    }
  
    var url = options.url || '';
    var type = (options.type || 'get').toLowerCase();
    var data = options.data || null;
    var callback = options.callback || null;
    var contentType = options.contentType || '';
    var dataType = options.dataType || '';
    var async = options.async === undefined && true;
    var timeOut = options.timeOut;
    var before = options.before || function() {};
    var error = options.error || function() {};
    var success = options.success || function() {};
    var jsonpCache = parseInt(options.jsonpCache) || 0;
    var timeoutBool = false;
    var timeoutFlag = null;
    var xhr = null;
  
    setData();
    before();
  
    if (dataType === 'jsonp') {
      createJsonp();
    } else {
      createXHR();
    }
  }
  
  export default ajax;
  

  用法

  function createFetch(api, data) {
    const url = getBaseUri() + api;
  
    return new Promise(function (resolve, reject) {
      ajax({
        url: url,
        dataType: 'jsonp',
        timeOut: 15000,
        jsonpCache: 1,
        data: data,
        callback: api.replace(/\//g, ''),
  
        success: function (res) {
          resolve(res)
        },
  
        error: function (error) {
          reject(error)
        }
      })
    }).then(res => {
      let data
      let error
      switch (res.code) {
        case 0:
          data = res.data
          break
        case undefined:
          data = res.articles
          break
        case 1400:
          error = createError(1400, '请求参数错误')
          break
        case 1401:
          error = createError(1401, '鉴权失败')
          break
        case 1403:
          error = createError(1403, 'Session过期')
          break
        case 1500:
          error = createError(1500, '内部服务错误')
          break
        case 1504:
          error = createError(1504, '第三方资源请求超时')
          break
  
        default:
          error = createError(res.code || -1, res.msg || res.message || res.desc || 'unknown mistake')
          break
      }
  
      return error ? Promise.reject(error) : data
    }).catch(error => {
      console.log(`%c>>Request ${url} get error ${error.code}(${error.message})`, 'color: red;')
      return Promise.reject(new Error(error.message))
    })
  }
  
  export function fetchRelatedNews(data = {}) {
    const params = Object.assign({
      num: '5'
    }, getBasicParams(), data)
    return createFetch('oppoNews/getRelativeRecList', params)
  }
  

  关于jsonp的xss漏洞有时间再说