博客

js调用webservice，如何调用，跨域问题，返回值解析。

一、调用

	var data;
	data = '<?xml version="1.0" encoding="utf-8"?>';
	data = data + '<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">';
	data = data + '<soap12:Body>';
	data = data + '<GetOpenId xmlns="http://tempuri.org/" >';
	data = data + '<cell>1</cell>';
	data = data + '</GetOpenId>';
	data = data + '</soap12:Body>';
	data = data + '</soap12:Envelope>';
	var json;
	var xmlhttp = new XMLHttpRequest();
	// var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	xmlhttp.open("post", "http:/localhost/InterFaceService.asmx", false);
	xmlhttp.setRequestHeader("Content-Type", "application/soap+xml");
	//     xmlhttp.setRequestHeader("Content-Security-Policy", "upgrade-insecure-requests");
	xmlhttp.onreadystatechange = function() { //绑定响应状态事件监听函数     
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                                          
			var info = xmlhttp.responseText;
			//显示JSON对象字符串
			console.log( xmlhttp.responseText);
			var me='GetOpenId'+'Result';
	    	var response=xmlhttp.responseXML.documentElement;
		  var method=response.getElementsByTagName(me)[0].firstChild.data; 
		 alert(method);
		}
	}
	try {
		xmlhttp.send(data);
	} catch (e) {
		console.log(e);
	}

二、跨域

浏览器针对js默认做了跨域认证，要进行跨域使用，就必须对webservice的web.config进行取消跨域配置。

注：如果一方是http,则webservice 也必须是http。 同理https也是一样。

web.config完整代码：

configuration>
  <system.web>
<webServices>
       <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
        <add name="HttpSoap"/>
        <add name="Documentation"/>
       </protocols>
    </webServices>
  </system.web>
    <system.webServer>
 <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Request-Private-Network" value="true" />
      </customHeaders>
    </httpProtocol>
    </system.webServer>
</configuration>

三、返回值解析

          var me='GetOpenId'+'Result';//GetOpenId 是请求webservice的方法，Result是固定的字符。GetOpenId可根据请求的方法定义变量，从而实现动态获取
	      var response=xmlhttp.responseXML.documentElement;
		  var method=response.getElementsByTagName(me)[0].firstChild.data;