js跨域调用WebService的简单实例

2023年6月11日下午12:06 • JavaScript

下面是详细讲解“js跨域调用WebService的简单实例”的完整攻略，包含了两条示例说明。

什么是跨域调用？

在同源策略下，Web页面只能调用同一域名下的Web服务，无法调用外部的Web服务。这是因为出于安全考虑，为防止页面通过Javascript获取到外部服务的数据后，将数据篡改或者传输给恶意的第三方站点。

但是有时候，我们确实需要通过Javascript跨域访问外部Web服务。这个时候，我们需要采用跨域调用技术。

跨域调用WebService

在Javascript中使用AJAX技术，可以跨域调用外部Web服务，并获取返回值。下面是使用Javascript调用外部Web服务的示例代码：

// 使用XHR对象实现跨域调用外部Web服务，并获取返回值
function crossDomainWebService() {
  var xmlhttp = new XMLHttpRequest();
  var url = "http://www.example.com/webservice.asmx";
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var result = xmlhttp.responseText;
      alert(result);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

代码中，使用了XMLHttpRequest对象实现跨域调用外部Web服务，并获取返回值。需要注意的是，无论是GET还是POST方法，都可能引起跨域安全问题，因此需要使用特定的技术来处理跨域问题。

示例说明1：使用JSONP技术跨域调用

下面是一个使用JSONP技术跨域调用的示例代码。前提是被调用的接口服务需要支持JSONP。

// 使用JSONP实现跨域调用外部Web服务，并获取返回值
function crossDomainWebServiceByJSONP() {
  var url = "http://www.example.com/webservice.asmx?callback=myCallback";
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.head.appendChild(script);
}

function myCallback(data) {
  alert(data);
}

代码中，使用了JSONP技术实现跨域调用外部Web服务，并获取返回值。需要注意的是，由于JSONP是通过动态创建