一、同源策略
要理解跨域，先要了解一下“同源策略”。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。
一些常见的是否同源示例可参照下表：
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的。例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com/wiki/?title=api_v2提供的接口数据。这里我们以搜索图书为例，参数链接为：https://api.douban.com/v2/book/search?q=javascript&count=1，该链接中数据为JSON格式，如下：
我通过如下代码去访问该数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert( xhr.responseText );
}
};
xhr.open('get', 'https://api.douban.com/v2/book/search?q=javascript&count=1', true);
xhr.send(); };
};
</script>
</html>
上述程序运行时会报错：
但<img>的src（获取图片），<link>的href（获取css），<script>的src（获取JavaScript）这三个都不符合同源策略，它们可以跨域获取数据。这里要介绍的JSONP就是利用<script>的src来实现跨域获取数据的。
二、JSONP
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
动态创建<script>标签，设置其src，回调函数在src中设置：
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。
function handleResponse(response){
// 对response数据进行操作代码
}
了解了JSONP的基本使用方法，我们在实现上面通过ajax调用豆瓣接口的需求，实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSONP实现跨域2</title> </head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
function handleResponse(response){ console.log(response); }
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
};
};
</script> </html>
在控制台，我们可以查看到返回的response数据格式为JSON对象格式的，具体需要取出哪些参数，可以根据自己的需要：
JSONP目前还是比较流行的跨域方式，虽然JSONP使用起来方便，但是也存在一些问题：
首先， JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。
其次，要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给<script>元素新增了一个 onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。
二、jQuery封装JSONP
对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。
通过jQuery的$.ajax实现跨域的代码参考如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery实现JSONP</title> </head>
<body> <div id="mydiv"> <button id="btn">点击</button> </div> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : { q : "javascript", count : 1 },
success: function(response, status, xhr){
console.log('状态为：' + status + ',状态是：' + xhr.statusText); console.log(response);
} });
});
});
</script>
</html>
最后的结果与JavaScript通过动态添加<script>标签得到的结果是一样的。
通过$.getJSON(）
利用getJSON来实现，只要在地址中加上callback=?参数即可，参考代码如下：
$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){ console.log(data); });这样也能实现跨域的功能。
相关推荐
**AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常，AJAX请求受到同源策略限制。为实现跨域，我们可以使用CORS（Cross-Origin Resource Sharing）机制。服务器需要在响应头中添加`Access-Control-Allow-...
JSONP（JSON with Padding）和AJAX是两种常见的在JavaScript中实现跨域数据请求的技术。在Web开发中，由于浏览器的同源策略限制，JavaScript不能直接向其他域名发送请求，但JSONP和AJAX通过特定的方式绕过了这个限制...
### JSONP 跨域请求数据实现手机号码查询实例分析 #### 前言 在现代Web开发中，跨域问题一直是前端开发者面临的一个常见难题。简单来说，由于浏览器的同源策略限制，当一个网页尝试从不同的源（即不同的协议、端口...
JSONP是早期解决跨域问题的手段，适用于只支持GET请求的情况。它的原理是利用HTML的`<script>`标签不受同源策略限制的特性，通过动态创建`<script>`标签来加载服务器返回的JavaScript代码，这个代码通常是一个函数...
需要注意的是，虽然JSONP提供了一种灵活的跨域请求解决方案，但它也有一些局限性和安全风险。例如，JSONP允许执行任意的JavaScript代码，如果服务器端的输出没有经过严格验证和清洗，可能会导致跨站脚本攻击（XSS）...
第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi
需要注意的是，虽然JSONP可以轻松地实现跨域请求，但它也有一些限制，如只支持GET请求，且无法处理错误。对于更复杂的跨域需求，可以考虑使用CORS（Cross-Origin Resource Sharing）机制。不过，在本项目中，JSONP...
JSONP（JSON with Padding）是一种解决跨域请求的方法，主要用于解决不同域之间因浏览器同源策略限制而无法进行AJAX请求的问题。在AJAX请求中，浏览器的同源策略限制了与当前页面不同域的服务器进行数据交互，而...
JSONP（JSON with Padding）是一种常见的解决JavaScript跨域问题的技术。由于浏览器的同源策略限制，JavaScript通常不能向不同源的服务器...了解和掌握JSONP有助于理解跨域请求的原理，为解决实际问题提供更多的选择。
2. JSONP原理：JSONP的基本思想是，服务器提供一个可以接受参数的JavaScript函数名，客户端在请求时传递这个函数名，服务器返回一个调用该函数并带有JSON数据的脚本，`<script>`标签加载这个脚本，从而实现跨域数据...
JSONP（JSON with Padding）是一种解决跨域请求的方法，即在客户端通过 script 标签请求服务器端的数据，然后服务器端将数据以 JSON 格式返回，并在返回数据中包含一个回调函数，以便客户端可以将数据处理。...
基于ajax方式的跨域请求jsonp的前后台代码
总的来说，JSONP跨域请求是一种古老但有效的方式，用于解决浏览器同源策略带来的限制问题。它的优点是简单易用，支持跨域GET请求。但是，JSONP也有一定的安全风险，比如被恶意利用，因此在使用时需要谨慎。另外，...
除了JSONP，还有多种跨域请求的方法，如： 1. **IFrame：** 通过嵌入一个IFrame来加载跨域内容，常用于实现页面间的通信。 2. **document.domain：** 同一顶级域名下的子域名可以通过设置`document.domain`来实现跨...
在Spring框架中处理JSONP跨域请求是一个常见问题，尤其当开发者需要从前端JavaScript代码中调用不同域上的RESTful服务时。由于浏览器的安全限制，同源策略防止了不同域的文档或脚本间的交互，这使得传统的AJAX请求不...
3. 传统的AJAX请求无法用于跨域请求，因为XMLHttpRequest对象遵守同源策略，而jsonp请求通过动态创建标签的方式绕过这一限制。 文章的代码示例提供了如何在Vue2.0项目中实现jsonp跨域请求的基本步骤： - 首先需要...
**Ajax JSONP 跨域处理详解** 在Web开发中，由于浏览器的安全策略限制，JavaScript通常不能直接访问不同源（协议、域名或端口不同）的资源，这就是所谓的“同源策略”。然而，随着Web应用的发展，跨域数据交互的...
总之，jQuery通过`$.getJSON()`和JSONP机制为开发者提供了一种简单的方式来实现跨域数据请求，使得在前后端分离的架构中，前端可以轻松地获取和处理来自其他域的数据。虽然有一些限制，但在许多场景下，JSONP仍然是...
然而，Ajax技术在实现动态网页交互时常常需要跨越这个限制，这时就引入了JSONP（JSON with Padding）作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...
JQuery同样支持跨域请求，如果检测到跨域请求，JQuery会自动使用JSONP的方式来发送请求。 AJAX和JSONP的跨域问题，虽然在技术上已经可以解决，但在实际使用过程中还需要根据具体的安全要求和业务场景，选择合适的...