跨域请求

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过
AJAX 的方式请求。
同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为
什么是同源？例如：http://www.example.com/detail.html 与一下地址对比：

image.png

SON with Padding，是一种借助于 script 标签发送跨域请求的技巧。
其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一
段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。
以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求

  <script src="http://api.zce.me/users.php?callback=foo"></script>

==============================================================
总结一下：由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方
案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再
来看原理。
<script src="http://api.zce.me/users.php?callback=foo"></script>
foo(['我', '是', '你', '原', '本', '需', '要', '的', '数', '据'])
1
1
问题：

1. JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
2. 只能发送 GET 请求
   注意：JSONP 用的是 script 标签，更 AJAX 提供的 XMLHttpRequest 没有任何关系！！！
   jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp
   其他常见的 AJAX 封装 库：
   Axios
   5.2.2. CORS
   Cross Origin Resource Share，跨域资源共享

 // 允许远端访问
header('Access‐Control‐Allow‐Origin: *');

这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-
Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。
==============================================================

<script>
// http://day-12.io/13-jsonp.html
function myonload (data) {
  console.log(data)
}
</script>
 <script src="http://localhost/data.js"></script>
 <!-- <script src="http://localhost/data.php"></script> -->

<
通过 script 标签请求一个服务端的 PHP 文件
这个文件返回的结果是一段 JS，作用是调用我们事先定义好的一个函数
从而将服务端想要给客户端发过去的数据发送给客户端
==========================================================
原生js封装jsonp：

function jsonp (url, params, callback) {
var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)

  if (typeof params === 'object') {
    var tempArr = []
    for (var key in params) {
      var value = params[key]
      tempArr.push(key + '=' + value)
    }
    params = tempArr.join('&')
  }

  var script = document.createElement('script')
  script.src = url + '?' + params + '&callback=' + funcName
  document.body.appendChild(script)

  window[funcName] = function (data) {
    callback(data)

    delete window[funcName]
    document.body.removeChild(script)
  }
}

//调用方式：
jsonp('http://localhost/jsonp/server.php', { id: 123 }, function (res) {
  console.log(res)
})

jsonp('http://localhost/jsonp/server.php', { id: 123 }, function (res) {
  console.log(res)
})

===========================================================
jq中jsonp的使用方式：

   <script src="jquery.js"></script>
   
 <script>

$.ajax({
  url: 'http://localhost/jsonp/server.php',
  dataType: 'jsonp',
  success: function (res) {
    console.log(res)
  }
})
</script>

========================================================
快捷方式：

 $.get('http://localhost/cors.php', {}, function (res) {
  console.log(res)
})