AJAX基本知识，解决跨域（JSONP和CORS）

AJAX（Asynchronous JavaScript and XML）是一种在网页中实现异步数据交换的技术。解决跨域问题主要有两种方法：JSONP和CORS。

1. 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"});

2. 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会更加方便和强大。