下面将为您详细讲解 AJAX与JSONP跨域访问问题小结 的完整攻略。
1. 跨域访问问题简介
跨域访问是指在访问资源时，所涉及的协议、域名、或端口号中任意一个不同，都被认为是跨域访问。由于浏览器的同源策略（Same Origin Policy），跨域访问会受到限制，JavaScript 代码不能访问另一个域名下的资源，否则会出现安全问题。
而AJAX和JSONP使用 JavaScript 代码从服务器获取数据，因此也会受到跨域访问限制。
2. 解决方案：AJAX与JSONP
2.1 AJAX解决方案
AJAX可通过CORS（Cross-Origin Resource Sharing）实现跨域请求，CORS需要响应头中设置Access-Control-Allow-Origin属性值来确定允许跨域请求的源地址。
示例代码：
var url = 'https://api.example.com/data';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
在这段代码中，我们使用新建的XMLHttpRequest对象，打开一个GET请求，同时设置 withCredentials 参数为 true，表示要开启跨域请求。
如果是POST请求，则需要将请求的数据放在send中。
var url = 'https://api.example.com/data';
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({name: 'John', age: 30}));
2.2 JSONP解决方案
JSONP（JSON with padding）利用动态创建
