Javascript Ajax回调函数'；s位置

我对位于

$（document）.ready中的回调函数有问题。回调函数过去不起作用。当我把它放在
$（document.ready）之外时，代码已经开始完美地工作了。我不明白为什么。位置重要吗

这项工作：

$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
$.ajax({
url:“http://www.example.com/data.php",
键入：“获取”，
数据类型：“jsonp”，
jsonpCallback：“读取”，
});
});
});
变量读取=函数（数据）{
控制台日志（数据）；
}

这是行不通的

$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
$.ajax({
url:“http://www.example.com/data.php",
键入：“获取”，
数据类型：“jsonp”，
jsonpCallback：“读取”，
});
});
变量读取=函数（数据）{
控制台日志（数据）；
}
});

更新1：对不起，伙计们，链接没有什么不同。我忘了换第二个。read函数的位置只有一个区别。
$（document）.ready（function（）{
的意思是：在页面完成加载时执行。
$(document).ready(function() {
  $("#ara-button").click(function() {
    $.ajax({
      url: "http://www.csstr.com/data.json",
      type: "get",
      dataType: "jsonp",
      jsonpCallback: "read",
    });
  });
  window.read = function(data) {
    console.log(data);
  }
});

在第二个示例中，您仅在页面完成加载后才定义
read
函数

在工作示例中，您首先定义
read
函数，然后说，“一旦页面将被加载，执行ajax调用，然后调用
read
函数”

编辑：另外，您可以阅读@igoorge answer以获得更详细的解释。
在ajax之前添加read方法

$（文档）.ready（函数（）{
变量读取=函数（数据）{
控制台日志（数据）；
}
$（“#ara按钮”）。单击（函数（）{
$.ajax({
url:“http://www.csstr.com/data.json",
键入：“获取”，
数据类型：“jsonp”，
jsonpCallback：“读取”，
});
});
});
您的函数定义在Jquery范围内，因此在执行ajax时，无法找到“read”函数的定义

$(document).ready(function() {
  $("#ara-button").click(function() {
    $.ajax({
      url: "http://www.csstr.com/data.json",
      type: "get",
      dataType: "jsonp",
      jsonpCallback: "read",
    });
  });
  window.read = function(data) {
    console.log(data);
  }
});

这就是第一个例子起作用的原因

希望这会有所帮助。
您将JsonP回调名称作为字符串传递的原因是，JQuery需要像这样将其添加到URL
？callback=read
。JsonP请求只是JQuery在后台创建的一个
标记，并添加到页面
中。一旦JQuery将该脚本标记添加到页面，browser会将其视为加载要执行的普通JavaScript文档。由于请求的
？callback=read
部分，远程服务器知道使用可执行JavaScript而不仅仅是原始数据进行响应。可执行JavaScript只是对具有您提供的名称的函数的函数调用，在本例中是de>read
函数。由于返回的脚本是在全局范围内执行的，
read
函数也需要存在于全局范围内。浏览器中的全局范围是
窗口
对象，因此基本上
read
函数需要出现在
窗口
对象上，以便执行剪切脚本以查找函数

$(document).ready(function() {
  $("#ara-button").click(function() {
    $.ajax({
      url: "http://www.csstr.com/data.json",
      type: "get",
      dataType: "jsonp",
      jsonpCallback: "read",
    });
  });
  window.read = function(data) {
    console.log(data);
  }
});

它在第一个示例中的ready函数之外工作，因为在根级别定义的任何内容都是全局范围的

Codpen演示：


如果您想更多地了解JsonP的工作原理，请继续阅读。
如果您仍然感到困惑，可能是因为您对JsonP的实际工作方式还不是100%熟悉。JsonP是一种绕过的黑客。同源策略的简短版本是，浏览器不允许您读取从请求返回到域以外的域的响应，除非该域上的服务器r域说没关系

大多数浏览器都实施了同源策略，以帮助保护用户免受恶意脚本的攻击。例如，如果您在一个浏览器选项卡中使用银行网站进行身份验证，然后在另一个选项卡中访问恶意网站，而浏览器中没有同源限制，则恶意网站可能会向您的银行网站发出ajax请求。该请求将携带您的浏览器为该域存储的任何cookie，并且您的cookie将显示您已通过身份验证，从而使攻击脚本能够访问来自您的银行帐户的经身份验证的数据。同源策略防止恶意网站能够查看该请求的响应数据

一开始，客户端和服务器没有正式的方式选择跨域共享。当时浏览器直接阻止了跨域共享。为了绕过这个JsonP，JsonP被发明了。同源策略只会对ajax请求隐藏响应，但正如您可能已经注意到的，浏览器完全可以加载脚本通过
标记从其他网站获取。脚本标记只是对javascript文档执行一个普通的旧GET请求，然后开始在页面上执行该脚本。JsonP利用了相同来源限制不适用于
标记这一事实

请注意，如果您在浏览器中直接转到，您将看到您要查找的数据。但是，请尝试添加以下查询字符串


注意到有什么不同吗？响应不是返回您想要的数据，而是将您的数据传递到名为
read
的函数中。这就是您知道服务器理解JsonP hack的方式。它知道将您想要的数据包装在函数调用中，以便JQuery可以在客户端上执行JsonP hack，它就是这样做的通过创建一个
标记并将其嵌入到网页中进行初始化。该脚本标记指向URL，但也将该查询字符串添加到URL的末尾。结果是一个脚本标记，它从该URL加载脚本并执行它。该脚本正在加载到页面的全局范围中，因此当调用
read
函数时，它将该功能也将存在于全局范围内

今天，官方的方式是ar