下面是详细讲解“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是通过动态创建