jsonp详解

title: jsonp详解
tags:
categories:

ajax不允许跨域获取数据
说明，假定后端语言是 PHP

script标签

jsonp的原理：script标签具有跨域性，可以利用Script标签的src属性发送跨域请求，获取相应数据

<script src="域名/域名下的php文件名?callbackName=fnName"></script>
<script>
    // 回调函数
    function fnName(data){
        console.log(data);
    }
</script>

后端返回的是js代码，是函数调用

<?php $fnName = $_GET['callbackName'] 
echo $fnName.'(hello world)';
?>

jQuery-jsonp

type必须是get

$.ajax({
    url: "域名/域名下的php文件名",
    dataType: "jsonp",
    jsonp: "callbackName",  // 约定等号左边的key，服务器根据该名称获取回调函数名称
    jsonpCallback: "fnName", // 约定等号右边的value，标识回调函数名称
    success: function(){
        // todo
    },
    error: function(){
        // todo
    }
})

模仿封装jQuery-ajax

function myAjax(options) {
  // 默认值
  var defaults = {
      jsonp: "callback",
      jsopCallback: "jQuery"+ ('v3.1.1'+ Math.random()).replace(/\D/g,'')+"_"+new Date().getTime();
  };
  // window是全局对象，[]中的值可以是变量，也可以是字符串
  window[defaults.jsonpCallback] = function(data){
      defaults.success(data);
  };
  // 处理业务参数,把data数据转换为查询字符串
  var param = '';
  if(defaults.data){
      for(var key in defaults.data){
          param += key+"="+defaults.data[key]+"&";
      }
  }
  
  // 使用设置参数覆盖默认配置
  for(var key in options){
      defaults[key] = options[key];
  };
  // 处理跨域请求
  var script = document.createElement("script");
  script.src = defaults.url+"?"+ param + defaults.jsonp+"="+defaults.jsonpCallback;
  var head = document.querySelector("head");
  head.appendChild(script);
}