2. Ajax 와 자바 는 POST 방식 으로 상호작용 한다.

1. Ajax 상호작용 에 대한 절차
   1.1 xml. httprequest 가 져 오기
1.2 xml. httprequest 의 onreadystatechange 응답 이벤트 설정
1.3 ajax 요청 가 져 오기 준비 xmlhttp.open("POST", "AjaxServerlet", true);
1.4 메시지 헤 더 를 폼 형식 으로 설정 하고 폼 을 모방 한 POST 에서 xmlhttp. setRequestHeader ("Content - type", "application / x - www - form - urlencoded") 를 제출 합 니 다.
1.5 ajax 요청 xmlhttp. send ("age = 18 & name = zhang") 보 내기;   //Ajax 의 POST 요청, 매개 변 수 는 xmlhttp. send () 방법 으로 지 니 고 있 습 니 다.
1.6 Ajax 상호작용 으로 얻 은 데 이 터 를 처리 하고 xml. httprequest 의 onready statechange 응답 이벤트 에서 구체 적 으로 처리 합 니 다.
2. Ajax 와 자바 의 Servlet 는 POST 를 통 해 상호작용 을 한다.
   2.1 html 코드

<body>
	<button id="mybtn">  </button>
	<div id="myAjax"></div>
</body>

2.2 자 바스 크 립 트 코드

<script type="text/javascript">
	//1、   xmlhttprequest
	function getXmlhttp() {
		var xmlhttp;
		if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else { // code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlhttp;
	}
	window.onload = function() {
		document.getElementById('mybtn').onclick = function() {

			//1、   xmlhttprequest   
			var xmlhttp = getXmlhttp();
			//2、xmlhttprequest     
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//5、        
					//5.1ajax     ,   javascript  
					// 5.1.1   eval    
					var ajaxResult = eval("(" + xmlhttp.responseText + ")");
					//5.1.2   jquery   ,  jQuery.parseJSON(),        
					/* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); */
					alert(ajaxResult)
					//5.2  JavaScript     
					var age = ajaxResult.age;
					var name = ajaxResult.name;

					//5.3      DIV,     
					var mydiv = document.getElementById("myAjax");
					mydiv.innerHTML = "name:" + name + "," + "age:" + age;
				}
			}
			//3、    ajax  
			//3.1   get  ,      ,   open           
			xmlhttp.open("POST", "AjaxServerlet", true);
			//4、  ajax  
			xmlhttp.setRequestHeader("Content-type",
					"application/x-www-form-urlencoded");
			xmlhttp.send("age=18&name=zhang");

		};
	}
</script>

2.3 스타일 코드

<style type="text/css">
#myAjax {
	width: 400px;
	height: 400px;
	border: 1px dashed red;
	text-align: center; /* div             */
	line-height: 400px; /*   div     ,div                */
	font-size: 16px;
	font-weight: bold;
}
</style>

2.4 AjaxServerlet. java 코드

public class AjaxServerlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String age = request.getParameter("age");
		String name = request.getParameter("name");
		Person person = new Person(name, age);

		String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
				+ "\":" + age + "}";
		System.out.println(personJSON);
		response.getWriter().write(personJSON);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);

	}

}

2.5
웹. xml 코드

<servlet>
	<servlet-name>AjaxServerlet</servlet-name>
	<servlet-class>com.ajax.com.AjaxServerlet</servlet-class>
</servlet>

<servlet-mapping>
	<servlet-name>AjaxServerlet</servlet-name>
	<url-pattern>/AjaxServerlet</url-pattern>
</servlet-mapping>

<welcome-file-list>
	<welcome-file>index.html</welcome-file>
</welcome-file-list>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

【Java】요청을 던져 화면을 표시②(GET/POST)

(골) html 양식에 POST된 값(성명)을 포함하여 화면에 표시 입력 양식 작성 hello.html POST처의 placeholder에는 model.addAttribute GET/POST는 동일한 엔드 포인트 (...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

2. Ajax 와 자바 는 POST 방식 으로 상호작용 한다.

좋은 웹페이지 즐겨찾기