JSONP跨域GET请求解决Ajax跨域访问问题

JSONP是一种跨域解决方案，它利用<script>标签的跨域性质，通过在客户端动态生成<script>标签来实现跨域访问数据。

实现JSONP的关键在于服务器端需要返回一段函数调用的代码，同时在客户端动态生成<script>标签，并将需要访问的数据作为函数的参数传入。

以下是JSONP的基本格式：

callbackFunctionName(JSONData)

其中callbackFunctionName是在客户端定义的回调函数名，JSONData是需要访问的数据，在服务器端返回时会被包裹在回调函数中。

通过这种方式，客户端可以获取到服务器端返回的数据，同时绕过了跨域限制。

下面是两个示例，分别使用jQuery和纯JavaScript实现JSONP跨域GET请求。

jQuery实现JSONP跨域GET请求

利用jQuery的jsonp方法，可以非常方便地实现JSONP跨域GET请求。

$.ajax({
  url: 'http://example.com/api',
  dataType: 'jsonp',
  jsonpCallback: 'callbackFunctionName',
  success: function(data) {
    console.log(data);
  }
});

在上述代码中，我们指定了请求的URL、数据类型为jsonp，回调函数名为callbackFunctionName，同时在请求成功后将返回的数据打印到控制台中。

纯JavaScript实现JSONP跨域GET请求

如果不使用任何JavaScript框架，也可以通过手动创建<script>标签来实现JSONP跨域GET请求。

function jsonp(url, callback) {
  var script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

function callbackFunctionName(data) {
  console.log(data);
}

jsonp('http://example.com/api', 'callbackFunctionName');

在上述代码中，我们定义了两个函数。jsonp函数用于创建<script>标签，并将标签的src属性设置为请求的URL+回调函数名，然后将标签添加到页面中。同时我们定义了一个回调函数callbackFunctionName，用于处理返回的数据。最后，我们调用jsonp函数来发起请求。

以上就是JSONP跨域GET请求解决Ajax跨域访问问题的完整攻略。