[JavaScript知识库]jsonp跨域实现原理，并封装jsonp和ajax

什么是跨域：

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。此时游览器为了安全考虑就会禁止不同源的服务器地址发起HTTP请求。

解决方式：

1. jsonp
2. 服务器代理
3. CROS

本文主要介绍jsonp解决跨域问题：

jsonp解决跨域问题主要是通过链接一个外部脚本文件来实现。这个相信大家也经常用到过，如下：导入一个jquery外部链接等。这其实就是一个不同协议、不同域名、不同端口的例子，这就是jsonp解决跨域的原理。

<script src="jsonp.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

简单实现jsonp：

如下就是通过点击一个按钮事件，创建一个js的外部脚本实现了跨域。其中callback传入一个回调函数，用来接收发送请求的回调。这里的回调函数名字需要与后端进行约定，然后后端根据这个回调名传一个函数给前端接收。

<script>
  let btn1 = document.getElementById("btn1");
  function cbfn(res){
      console.log(res,'这是一个请求以后的的回调函数');
  }
  btn1.onclick = function(){
    let o = document.createElement("script");
    o.src = "http://127.0.0.9:3000/getAjax?callback=cbfn";
    document.querySelector("head").appendChild(o);
  }
</script>

jsonp与ajax整体封装：

function ajax(options){
  // 请求配置
  let config = Object.assign({
    method: "get",
    url: "",
    headers: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    jsonp: "callback", // 与后端约定
    data: "",
    success:function(){}
  }, options)
  // 处理jsonp请求
  if(config.dataType === "jsonp"){
    jsonpFn(config.url, config.data, config.jsonp, config.success);
    return false;
  }
  function jsonpFn(url, data, cbName, cbFn){
    let fnName = "KKB_"+Math.random().toString().substr(2);
    window[fnName] = cbFn;
    let path = url+"?"+o2u(data)+"&"+cbName+"="+fnName;
    let o = document.createElement("script");
    o.src = path;
    document.querySelector("head").appendChild(o);
  }

  let xhr = new XMLHttpRequest();
  if(config.method == "get"){
    let data = o2u(config.data)
    config.url = config.url + "?" + data;
  }
  // 初始化请求
  xhr.open(config.method, config.url, true);
  // 设置请求头
  for (let key in opts.headers) {
    xhr.setRequestHeader(key, config.headers[key]);
  }
  let sendData;
  switch (config.headers['content-type']) {
    case 'application/x-www-form-urlencoded':
      sendData = o2u(config.data);
      break;
    case 'application/json':
      sendData = JSON.stringify(config.data);
      break;
  }
  // 请求成功回调函数
  xhr.onload = function () {
    let resData;
    if (xhr.getResponseHeader("content-type").includes("xml")) {
        resData = xhr.responseXML;
    } else {
        resData = JSON.parse(xhr.responseText);
    }
    options.success(resData);
  }
  // 发送请求
  if (options.method == "get") {
    xhr.send();
  } else {
    xhr.send(sendData);
  }
}
// 数据修改：name=1&sex="name"
function o2u(obj) {
  let keys = Object.keys(obj);
  let values = Object.values(obj);
  return keys.map((v, k) => {
      return `${v}=${values[k]}`;
  }).join("&");
}

项目完整代码：

GitHub - txd688/jsonp-test: 封装ajax和jsonp请求方式，实现跨域请求。

想给大家分享一个plmm：憨桃人儿
憨桃人儿

?