ajax get json 跨域调用封装

AJAX是一种用于创建快速响应网页应用的技术，可以大大提高网页的用户体验。而跨域调用则是指在不同的域名下访问同一资源，这在传统的AJAX中是不被允许的。然而，通过JSONP和CORS等机制，我们可以实现跨域调用。在本文中，我们将重点介绍如何通过AJAX get JSON方式来跨域调用，并将其进行封装。

// 封装的AJAX get JSON跨域调用函数
function ajaxGetJson(url,callback) {
  var xhr = null;
  if (window.XMLHttpRequest) {
    // 常规浏览器支持window.XMLHttpRequest
    xhr = new XMLHttpRequest();
  } else {
    // 针对IE浏览器的兼容性处理
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  // 使用get方式发送JSONP请求
  xhr.open("get",url,true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 解析返回的数据，并传递给回调函数
      var data = JSON.parse(xhr.responseText);
      callback(data);
    }
  };
  xhr.send(null);
}

// 通过封装后的函数来实现跨域调用
ajaxGetJson("http://example.com/api",function (data) {
  console.log(data);
});

上面的代码中，我们定义了一个ajaxGetJson函数，它接受一个URL和一个回调函数作为参数。在函数中，我们使用XMLHttpRequest对象来发出GET请求，并通过onreadystatechange事件来监听状态变化。当返回状态为4且返回状态码为200时，我们解析返回的数据，并通过回调函数来处理数据。

当我们想要进行跨域调用时，只需将目标URL传递给ajaxGetJson函数，并提供一个回调函数来处理获取到的数据即可。

总之，我们可以通过AJAX get JSON方式来跨域调用，并通过封装来简化我们的代码。值得注意的是，我们需要在服务器端设置CORS、JSONP等跨域支持机制。

ajax get json 跨域调用封装

相关文章