WebService學習筆記-Ajax請求Webservice

時間 2020-01-14

標籤 webservice 學習筆記 ajax 請求欄目 WebService 简体版

原文原文鏈接

Webservice地址爲 http://192.168.13.232:8989/ws_01/umgsaijavascript

JSP頁面地址爲 http://192.168.13.232:8080/Demo/index.jsp html

Webservice的請求體以下java

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://ws.umgsai.com/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <soapenv:Body>
    <q0:sayHello>
      <arg0>sa</arg0>
    </q0:sayHello>
  </soapenv:Body>
</soapenv:Envelope>

Webservice的響應體以下jquery

<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">
  <S:Body>
    <ns2:sayHelloResponse xmlns:ns2="http://ws.umgsai.com/">
      <return>Hello sa</return>
    </ns2:sayHelloResponse>
  </S:Body>
</S:Envelope>

JSP頁面以下ajax

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	var url = "http://192.168.13.232:8989/ws_01/umgsai";
	$(function(){
		$("#WebserviceJQuery").click(function(){
			var name = document.getElementById("username").value;
			//請求體
			var data = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://ws.umgsai.com/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soapenv:Body><q0:sayHello><arg0>' + name + '</arg0></q0:sayHello></soapenv:Body></soapenv:Envelope>';
			/*
			$.post(url, data, function(msg){
				var $Result = $(msg);
				var value = $Result.find("return").text();
				alert(value);
			},"xml");
			*/
			$.ajax({
				type:"POST",
				url:url,
				data:data,
				success:function(msg){
					var $Result = $(msg);
					var value = $Result.find("return").text();
					alert(value);
				},
				error:function(msg){
					alert("錯誤信息：" + msg);
				},
				datatype:"xml",
				contentType:"text/xml;charset=utf-8"
			});
		});
	});

	function reqWebservice() {
		var name = document.getElementById("username").value;
		//請求體
		var data = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://ws.umgsai.com/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soapenv:Body><q0:sayHello><arg0>' + name + '</arg0></q0:sayHello></soapenv:Body></soapenv:Envelope>';
		var request = GetXmlHttpObject();
		request.onreadystatechange = function(){
			if(request.readyState == 4 && request.status == 200){
				var result = request.responseXML;
				//alert(result);
				var returnElement = result.getElementsByTagName("return")[0];
				var value = returnElement.firstChild.data;
				alert(value);
			}
		};
		//響應體 <S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">
/*
		<S:Body>
		    <ns2:sayHelloResponse xmlns:ns2="http://ws.umgsai.com/">
		      <return>Hello sa</return>
		    </ns2:sayHelloResponse>
		  </S:Body>
		</S:Envelope>

*/
		request.open("POST", url);
		request.setRequestHeader("Content-type", "text/xml;charset=utf-8");
		request.send(data);
	}

	function GetXmlHttpObject() {
		var xmlHttp = null;
		try {
			// Firefox, Opera 8.0+, Safari
			xmlHttp = new XMLHttpRequest();
		} catch (e) {
			// Internet Explorer
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		return xmlHttp;
	}
</script>
</head>
<body>
	name:
	<input id="username" name="username" value="" />
	<button onClick="reqWebservice()">Ajax請求Webservice</button>
	<button id="WebserviceJQuery">Ajax請求Webservice with JQuery</button>
</body>
</html>

存在跨域訪問的問題，只能經過 http://192.168.13.232:8080/Demo/index.jsp 來訪問。跨域

經過 http://localhost:8080/Demo/index.jsp來訪問是提示錯誤。jsp