✿✿✿JavaScript --- Ajax异步请求与JSONP 跨域请求
// 使用原生JavaScript发送AJAX请求
function makeAjaxRequest(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
callback(response);
}
};
xhr.send();
}
// 使用JSONP进行跨域请求
function jsonpRequest(url, callbackName) {
var script = document.createElement('script');
script.src = `${url}?callback=${callbackName}`;
document.body.appendChild(script);
// 定义全局函数作为回调
window[callbackName] = function (data) {
callback(data);
document.body.removeChild(script);
delete window[callbackName];
};
}
// 使用示例
makeAjaxRequest('https://api.example.com/data', function (response) {
console.log('AJAX Response:', response);
});
jsonpRequest('https://api.example.com/data', 'jsonCallback');
这段代码展示了如何使用原生JavaScript的XMLHttpRequest对象发送AJAX请求以及如何使用JSONP进行跨域请求。makeAjaxRequest
函数用于发送普通的AJAX请求,而jsonpRequest
函数用于发送JSONP请求。在发送JSONP请求时,我们动态创建了一个<script>
标签,并将请求发送到服务器。服务器端应该对JSONP请求进行相应的处理。
评论已关闭