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

1. Ajax 상호작용 에 대한 절차
     1.1  xml. httprequest 가 져 오기
      1.2  xml. httprequest 의 onreadystatechange 응답 이벤트 설정
      1.3  ajax 요청 가 져 오기 준비 xmlhttp.open("GET", "AjaxServerlet?age=18&name=zhang", true);   //Ajax 방법의 GET 방식 으로 요청 합 니 다. 매개 변 수 는 xmlhttp. open () 을 통 해 지 니 고 있 습 니 다.
      1.4  ajax 요청 xmlhttp. send () 보 내기;
      1.5  Ajax 상호작용 으로 얻 은 데 이 터 를 처리 하고 xml. httprequest 의 onready statechange 응답 이벤트 에서 구체 적 으로 처리 합 니 다.
2. Ajax 와 자바 의 Servlet 상호작용 의 작은 예
      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.1 ajax     ,   javascript  

					// 5.1.1   eval    
					var ajaxResult = eval("(" + xmlhttp.responseText + ")");

					//5.1.2   jquery   ,  jQuery.parseJSON(),        
					/* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); */

					//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("GET", "AjaxServerlet?age=18&name=zhang", true); 
                        //4、  ajax  
			xmlhttp.send();

		};
	}
</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>

3, 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);

	}

}

4, 웹. 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>

좋은 웹페이지 즐겨찾기