JavaScript调用webService

   Web Service是一个应用组件,它逻辑性的为其他应用程序提供数据与服务.各应用程序通过网络协议和规定的一些标准数据格式（Http，XML，Soap)来访问Web Service,通过Web Service内部执行得到所需结果.Web Service可以执行从简单的请求到复杂商务处理的任何功能。一旦部署以后，其他Web Service应用程序可以发现并调用它部署的服务。

   WebService的主要目标是跨平台的可互操作性。为了达到这一目标，WebService完全基于XML（可扩展标记语言）、XSD（XMLSchema）等独立于平台、独立于软件供应商的标准，是创建可互操作的、分布式应用程序的新平台。由此可以看出，在以下三种情况下，使用WebService会带来极大的好处。

 

<script type="text/javascript">
		function createXMLHttpRequest() {
			var xmlHttp;
			if (window.ActiveXObject) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			else if (window.XMLHttpRequest) {
				xmlHttp = new XMLHttpRequest();                
			}
			return xmlHttp;
		}
	
		function ServiceRequest(ServerURL,ServiceName,NameSpace,MethodName,CallBack,ParamNames,ParamValues) {
			var xmlHttp = createXMLHttpRequest();
			var SOAPString = GetSOAPHeader(NameSpace,MethodName,ParamNames,ParamValues);
			var SOAPActionHeader = NameSpace + MethodName;
			xmlHttp.open("POST", ServerURL+ServiceName, false);
			//xmlHttp.open("POST", "http://192.168.6.8:8080/m/services/JbxxcxService?wsd/getACertDetailFromWeb", true);
			xmlHttp.onreadystatechange = function(){
				if (xmlHttp.readyState == 4) {
					if (xmlHttp.status == 200 || xmlHttp.status == 0) {
						CallBack(xmlHttp);
					}
				}
			};
			xmlHttp.setRequestHeader("Content-Type", "text/xml");
			xmlHttp.setRequestHeader("SOAPAction", SOAPActionHeader);
			xmlHttp.send(SOAPString);
		}
		
		function GetSOAPHeader(NameSpace,MethodName,ParamNames,ParamValues){
			var SOAPString="";
			//SOAP 1.1
			SOAPString+="<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">\n"
			SOAPString+="<soap:Body>\n";
			SOAPString+="<" + MethodName + " xmlns=\"" + NameSpace + "\">\n";
			if(ParamNames!=null) {
				for(var i=0,j=ParamNames.length;i<j;i++) {
					SOAPString+="<"+ParamNames[i]+">"+ParamValues[i]+"</"+ParamNames[i]+">\n";
				}
			}
			SOAPString+="</" + MethodName + ">\n";
			SOAPString+="</soap:Body>\n";
			SOAPString+="</soap:Envelope>\n";
			return SOAPString;
		}
		
		function JSPProcessCallBack(xmlHttp) {
			var value = xmlHttp.responseXML.getElementsByTagName("out")[0].firstChild.nodeValue;
			loadXml(value);
		}
		function loadXml(data){
	   //IE下加载xml字符串
	   if(navigator.userAgent.indexOf('MSIE') >= 0) {
	      //加载xml字符串  (IE下的加载方式)
	      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
	      xmlDoc.async = false;  //关闭异步加载，这样作可以使得文档加载完全之前，解析起不会继续执行脚本 
	      xmlDoc.loadXML(data); 
	   }
	   //火狐下加载xml字符串
	  if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
		   //加载xml字符串  (FireFox下的加载方式)
		   var doc = new DOMParser();  
		   var xmlDoc = doc.parseFromString(data, "text/xml"); 
    }
    //遍历list标签
    var elementList;
    elementList = xmlDoc.getElementsByTagName('children');
    
    for(var i = 0; i<elementList.length; i=i+1){
        var value;
        value = elementList[i].getAttribute('id');
        var childs;
        //当前元素的子结点，获得所有列
        childs = elementList[i].childNodes;
        var cellArray = new Array();
        //遍历row的子节点，取得每一个结点的内容
        for(var j = 0; j<childs.length; j=j+1){
          var cell = $.trim($(childs[j]).text());
          var cells = cellArray.push(cell);
        }
        addRow(value,cellArray);
    }
		}
		
		function getWebService(){
			//JSP WebService
			var name = $("#name").val();
			var id_card = $("#id_card").val();
		  var JSPServerURL = "http://192.168.6.8:8080/m/services/";
			var JSPServiceName="JbxxcxService?wsd";
			var JSPNameSpace = "http://192.168.6.8:8080/m/services/JbxxcxService/JbxxcxService?wsdl";
			var JSPMethodName="getACertDetailFromWeb";
			var names=["name","id_card"];
			var values=[name,id_card];
			ServiceRequest(JSPServerURL,JSPServiceName,JSPNameSpace,JSPMethodName,JSPProcessCallBack,names,values);
		}
		/*********
     * 添加一行
     */
		function addRow(new_id, text) {
			$("#"+new_id).remove();
			var insertTr = "<tr id='" + new_id + "'>";
			var context = new Array();
			context = text
			if(context != "" && context.length>0 ){
				for(var i = 0; i < context.length; i = i + 1){
						insertTr = insertTr + "<td bgcolor='#f7f7f7' style='font-size: 12px'>"+context[i]+"</td>";
			}
			insertTr = insertTr + "</tr>";
			$("#gridTable").append(insertTr);
		  }
		}
	</script>

 页面代码：

<body>
<div id="tabCon">
		<div>
			<form id="form1" name="form1" method="post" action="">
		      	<label><span>姓名：</span><input type="text" name="name" id="name" class="cxInput" /></label>
						<label><span>证件号码：</span><input type="text" name="id_card" id="id_card" class="cxInput" /></label>
						<label><span></span><input type="button" name="imageField" value="查询"  onClick="getWebService();"/></label>
						<table id="gridTable" width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF">
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">证件类型</th>
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">证件编号</th>
				    	<th width="4%" bgcolor="#B6E0F9" style="font-size: 12px">姓名</th>
				    	<th width="4%" bgcolor="#B6E0F9" style="font-size: 12px">性别</th>
				    	<th width="4%" bgcolor="#B6E0F9" style="font-size: 12px">职务</th>
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">身份证号</th>
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">单位名称</th>
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">发证日期</th>
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">证件状态</th>
				    	<th width="8%" bgcolor="#B6E0F9" style="font-size: 12px">一次复审期限</th>
				    	<th width="8%" bgcolor="#B6E0F9" style="font-size: 12px">二次复审期限</th>
				    	<th width="8%" bgcolor="#B6E0F9" style="font-size: 12px">证件有效期开始</th>
				    	<th width="8%" bgcolor="#B6E0F9" style="font-size: 12px">证件有效期结束</th>
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">复审记录1</th>
				    	<th width="5%" bgcolor="#B6E0F9" style="font-size: 12px">复审记录2</th>
           </table>
				</form>
		</div>
		</div>
</body>