AJAX(Asynchronous JavaScript and XML)是一种在网页中实现异步数据交换的技术。解决跨域问题主要有两种方法:JSONP和CORS。
JSONP(JSON with Padding):
JSONP是一种方便解决跨域数据访问的方法,它通过动态创建
<script>
标签请求一个带参数的服务器端脚本,服务器端脚本将数据作为JavaScript代码返回,由于<script>
标签请求的脚本不受浏览器同源政策的限制,因此可以实现跨域请求数据。
JSONP的使用示例:
// 创建一个回调函数
function handleResponse(data) {
console.log(data);
}
// 动态创建script标签
var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.head.appendChild(script);
服务器端需要将传入的callback
参数作为函数名包裹数据:
handleResponse({"key": "value"});
CORS(Cross-Origin Resource Sharing):
CORS是一个W3C标准,它允许由服务器决定是否允许跨域请求,从而可以避免使用JSONP的一些限制。CORS需要服务器端支持,浏览器端会自动处理CORS响应。
设置CORS响应头的示例:
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
使用CORS发送AJAX请求的示例:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
在实际开发中,选择JSONP还是CORS取决于你的需求和服务器端是否支持CORS。如果服务器端不支持CORS,那么你可能需要使用JSONP。如果服务器端支持CORS,那么使用CORS会更加方便和强大。